<!DOCTYPE html>
<html>
<head>
<style>
ul{width:100%}
ul li{
display:block;list-style-type:none;width:200px;background:red;border:1px solid;float:left
}
ul li a{
padding:20px 30px;text-decoration:none;color:white;
}
ul li ul{
width:300px;
margin-left:-40px
}
ul ul{
display:none;
}
ul li:hover {
background-color: green;
color: #FFF;
}
ul li:hover > ul {
display: block;
}
ul ul ul {
position: absolute; left:100%; top:0;
}
ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
</style>
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact US</a></li>
</ul></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</li>
<li><a href="#">Contact US</a></li>
</ul>
</body>
</html>
<html>
<head>
<style>
ul{width:100%}
ul li{
display:block;list-style-type:none;width:200px;background:red;border:1px solid;float:left
}
ul li a{
padding:20px 30px;text-decoration:none;color:white;
}
ul li ul{
width:300px;
margin-left:-40px
}
ul ul{
display:none;
}
ul li:hover {
background-color: green;
color: #FFF;
}
ul li:hover > ul {
display: block;
}
ul ul ul {
position: absolute; left:100%; top:0;
}
ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
</style>
</head>
<body>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About Us</a>
<ul>
<li><a href="#">home</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact US</a></li>
</ul></li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact US</a></li>
</ul>
</li>
<li><a href="#">Contact US</a></li>
</ul>
</body>
</html>
