<div id="navBox">
<ul>
<li class="menuItem"><a href="#">Home</a>
<li class="menuItem"><a href="#">About</a>
<ul class="subMenu">
<li><a href="#">My Face</a>
<li><a href="#">My Place</a>
<li><a href="#">My Pets</a>
<li><a href="#">My Toys</a>
<li><a href="#">My Friends</a>
</ul>
<li class="menuItem"><a href="#">My Stuff</a>
<ul class="subMenu">
<li><a href="#">Photos</a>
<li><a href="#">Art</a>
<li><a href="#">Dashboards</a>
<li><a href="#">Themes</a>
<li><a href="#">Miscellaneous</a>
</ul>
<li class="menuItem"><a href="#">Contact</a>
<ul class="subMenu">
<li><a href="#">Facebook</a>
<li><a href="#">Twitter</a>
<li><a href="#">Email</a>
<li><a href="#">Ask</a>
<li><a href="#">Submit</a>
</ul>
</ul>
</div>
body {
background-color: #efefef;
}
.menuItem,
.subMenu {
list-style: none !important;
}
.menuItem > a,
.subMenu > li > a {
text-decoration: none !important;
color: #447bd4 !important;
font: small-caps 14px verdana, sans-serif;
text-transform: uppercase;
}
#navBox {
width: 145px;
position: absolute;
margin-top: 50px;
border-right: 1px solid #447bd4;
}
.menuItem {
position: relative;
display: block;
left: -55px;
width: 125px;
height: 40px;
text-align: right;
letter-spacing: 1px;
padding-top: 12px;
padding-right: 35px;
}
.menuItem:hover,
.menuItem:hover a {
background: #447bd4 !important;
color: #efefef !important;
cursor: default !important;
}
.menuItem > a:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 160px;
height: 50px;
}
.menuItem:first-child > A:hover,
.menuItem:first-child > A:hover:before {
cursor: pointer !important;
}
.subMenu {
visibility: hidden !important;
opacity: 0 !important;
position: relative;
top: -40px;
left: 160px;
padding: 4px 4px 4px 10px;
background: #447bd4;
height: auto;
width: 175px;
border-left: 1px solid #efefef;
text-align: left;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
font: normal 14px verdana, sans-serif;
}
.subMenu > li:hover a {
display: block;
width: 175px;
background-color: #efefef !important;
color: #447bd4 !important;
padding-left: 9px;
margin-left: -9px;
border-radius: 12px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
cursor: pointer !important;
}
#navBox ul .menuItem:hover .subMenu {
visibility: visible !important;
opacity: 1 !important;
-moz-transition: ease-in all .25s !important;
-webkit-transition: ease-in all .25s !important;
-o-transition: ease-in all .25s !important;
}