Top
Home

<ul class="menu">
<li class="navbuta"><a href="#" title="HOME">HOME</a></li>
<li class="navbutb"><a href="#" title="ABOUT US">ABOUT US</a></li>
<li class="navbutc"><a href="#" title="CONTACT US">CONTACT US</a></li>
<li class="navbutd"><a href="#" title="GALLERY">GALLERY</a>
<ul class='children'><li><a href="#" title="SHOWROOM">SHOWROOM</a></li></ul></li>

</ul>

------------------------------------------------------------------

* {
margin : 0;
padding : 0;
}

a {
text-decoration : none;
text-align : right;
}

ul {
list-style : none;
}

p {
margin : 20px 0;
}

ul.menu {
position : relative;
width : 168px;
border-bottom : 0 solid #38DF04;
}

ul.menu li {
font-weight : bold;
float : left;
width : 100%;
padding : 2px 4px;
}

ul.menu li a:link {
color : #000000;
display : block;
padding : 2px 4px;
background-color : #f00;
}

ul.menu li a:visited {
color : #000000;
}

ul.menu li a:hover {
color : #000000;
background-color : #eeeeee;
}

ul.menu li a:active {
color : #000000;
background-color : #ffffff;
}

ul.menu ul li a {
border-right : none;
width : 100%;
display : inline-block;
background : #00aa00;
}

ul.menu li:hover {
position : relative;
z-index : 100;
}

ul.menu ul {
width : 175px;
visibility : hidden;
position : absolute;
top : 0;
left : 172px;
z-index : 100;
}

ul.menu ul li a {
margin : 0;
width : 100%;
display : inline-block;
background : #336699;
color : #ffffff;
text-align : left;
border-bottom : 10px;
}

ul.menu ul li a:visited {
width : 100%;
display : inline-block;
background : #336699;
color : #ffffff;
text-align : left;
}

ul.menu ul li a:hover {
border-right : none;
width : 100%;
display : inline-block;
background : #97B4CA;
color : #000000;
text-align : left;
}

ul.menu ul ul {
left : 100%;
top : 0;
}

ul.menu li:hover > ul {
visibility : visible;
}