Vertical Nav Bar


  <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:relative;
  margin-top: 50px;
/*  border-right:1px solid #447bd4;*/
}
.menuItem {
  position: relative !important;
  display: block !important;
/*  left: -55px !important;*/  left: -48px !important;
/*  width: 125px !important;*/	width:98px;
/*  height: 40px !important;*/	height:98px;
  text-align: right !important;
  letter-spacing: 1px !important;
/*  padding-top: 12px !important;
  padding-right: 35px !important;*/
	background-color:#000;
	margin-bottom:2px;
	opacity:0.9;
	line-height:98px;
	text-align:center !important;
	text-transform:uppercase;
	outline:none;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
        -transition: all 0.2s ease-in;
}
        .menuItem > a {
          color: #fff !important;
        }
.menuItem:hover,
/*.menuItem:hover a*/.menuItem:hover > a {
/*  background: #447bd4 !important;*/   background: transparent !important;
/*  color: #efefef !important;*/  color: #000 !important;
  cursor: default !important;
}
/*HOME LINK*/
#navBox > UL > LI:first-child > A:hover,
#navBox > UL > LI:first-child > A:hover:before {
  cursor: pointer !important;
}
.menuItem > a:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 160px;
  height: 50px;
}
.subMenu {
  visibility: hidden !important;
  opacity: 0 !important;
  position:relative;
/*  top: -40px;*/  top: -98px;
/*  left:160px;*/  left:98px;
  padding:4px 4px 4px 10px;
/*  background: #447bd4;*/  background: #000;
  height: auto;
  width: 175px;
  border-left: 1px solid #efefef;
  text-align: left !important;
/*  border-radius: 12px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;*/
  font: normal 11px "arial narrow", helvetica, sans-serif !important;
}
        .subMenu > li > a {
          color: #fff !important;
        }
.subMenu > li:hover a {
  display: block !important;
  width: 175px !important;
  background-color: #efefef !important;
  padding-left: 9px !important;
  margin-left: -9px !important;
/*  color: #447bd4 !important;*/  color: #000 !important;
/*  border-radius: 12px !important;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;*/
  cursor: pointer !important;
}
#navBox ul li:hover ul,
#navBox ul a:hover ul {
  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;
}