CodePen

HTML

            
              <div id="sideNav">
  <h2 class="topm">Main Menu</h2>
  <div class="linkstop">
    <ul class="top">
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li class="level"><a href="#">Services</a>
        <ul class="sub">
          <li><a href="#">Overview</a></li>
          <li><a href="#">Inserts</a></li>
          <li><a href="#">Newsletters</a></li>
          <li><a href="#">Graphics / Cuts</a></li>
          <li><a href="#">Liturgical and Special Covers</a></li>
          <li><a href="#">Free Websites and E-mail</a></li>
          <li><a href="#">Booklets / Directories</a></li>
          <li><a href="#">Hardbound Books</a></li>
      </ul>
      </li>
      <li><a href="#">Contact Us</a></li>
      </ul>
  </div>
</div>
            
          
!
via HTML Inspector

CSS

            
              #sideNav { 
  font-size:1em;
  width:150px;

}
#sideNav ul {
  margin:0;
  padding:0;
}
#sideNav a {
  color:#333333;
  display:block;
  text-indent:10px;
  width:100%;
  height:25px;
  line-height:25px;
}

#sideNav a:hover {
  color:#99002A;
}

h2.topm {
  font-size:1.2em;
  color:#99002A;
  border-bottom:3px solid #333333;
}
ul.top {
  background:white;
  
}
ul.top li a {
  text-decoration:none;
}
#sideNav li {
  list-style: none;
}
#sideNav li:hover {
  position:relative;
}
ul.sub {
  visibility:hidden;
  display:none;
  -webkit-transition-property:opacity, margin-top, visibility, margin-left; 
  -webkit-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  -webkit-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  -moz-transition-property:opacity, margin-top, visibility, margin-left; 
  -moz-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  -moz-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  -o-transition-property:opacity, margin-top, visibility, margin-left; 
  -o-transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  -o-transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out; 
  transition-property:opacity, margin-top, visibility, margin-left; 
  transition-duration:0.4s, 0.3s, 0.4s, 0.3s; 
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  
}

li:hover .sub {
  background:#ededed;
  visibility:visible;
  display:block;
  position: absolute;
  opacity:1;
  left: 100px;
  top: 5px;
  width:225px;
  
}
ul.sub li {
  background:#ededed;
  border: none;
  float:left;
  width:225px;
  margin-left:10px;
  
}

/*RESET STYLES*/
li:hover .sub .sub {
  visibility:hidden;
  display:none;
}
.sub li:hover .sub {
  visibility:visible;
  display:block;
}

li.level {
  position:relative;
}

li.level > a:after {
  content:"";
  width:0px;
  height:0px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #99002A;
  position:absolute;
  top: 12px;
  right:55px;  
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................