#menu8 {
   width: 200px;
   margin-top: 10px;
}
     
#menu8 li a {
   text-decoration: none;
   height: 32px;
     voice-family: "\"}\"";   
     voice-family: inherit;
     height: 24px;
}
     
#menu8 li a:link, #menu8 li a:visited {
   color: #777;
   display: block;
   background: url(images/menu8.gif);
   padding: 8px 0 0 20px;
}
     
#menu8 li a:hover {
   color: #257EB7;
   background: url(images/menu8.gif) 0 -32px;
   padding: 8px 0 0 25px;
}
     
#menu8 li a:active {
   color: #fff;
   background: url(images/menu8.gif) 0 -64px;
   padding: 8px 0 0 25px;
}

#menu8 ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

<div id="menu8">
    <ul>
      <li><a href="#1" title="Home">Home</a></li>
      <li><a href="#2" title="About">About</a></li>
      <li><a href="#3" title="Services">Services</a></li>
      <li><a href="#4" title="Portfolio">Portfolio</a></li>
      <li><a href="#5" title="Store">Store</a></li>
      <li><a href="#6" title="Download">Download Menu</a></li>
    </ul>
</div>

#button {
   width: 12em;
   border-right: 1px solid #000;
   padding: 0 0 1em 0;
   margin-bottom: 1em;
   font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
   background-color: #90bade;
   color: #333;
}

#button ul {
   list-style: none;
   margin: 0;
   padding: 0;
   border: none;
}
     
#button li {
   border-bottom: 1px solid #90bade;
   margin: 0;
   list-style: none;
   list-style-image: none;
}
     
#button li a {
   display: block;
   padding: 5px 5px 5px 0.5em;
   border-left: 10px solid #1958b7;
   border-right: 10px solid #508fc4;
   background-color: #2175bc;
   color: #fff;
   text-decoration: none;
   width: 100%;
}

html>body #button li a {
   width: auto;
}

#button li a:hover {
   border-left: 10px solid #1c64d1;
   border-right: 10px solid #5ba3e0;
   background-color: #2586d7;
   color: #fff;
}

<div id="button">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Hidden Cameras</a></li>
      <li><a href="#">CCTV Cameras</a></li>
      <li><a href="#">Employee Theft</a></li>
      <li><a href="#">Helpful Hints</a></li>
      <li><a href="#">F.A.Q</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
</div>

dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}

<dl id="menu">
    <dt onmouseover="javascript:montre('smenu1');"><a href="#">Menu 1</a></dt>
    <dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
     <ul>
      <li><a href="#">Sub Menu 1.1</a></li>
      <li><a href="#">Sub Menu 1.2</a></li>
      <li><a href="#">Sub Menu 1.3</a></li>
     </ul>
    </dd>
    <dt onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">Menu2</dt>
    <dd id="smenu2" onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre();">
     <ul>
      <li><a href="#">Sub Menu 2.1</a></li>
      <li><a href="#">Sub Menu 2.2</a></li>
     </ul>
    </dd>
    <dt onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">Menu3</dt>
    <dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre();">
     <ul>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
      <li><a href="#">Sub Menu 3.1</a></li>
     </ul>
    </dd>
    <dt onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">Menu4</dt>
    <dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre();">
     <ul>
      <li><a href="#">Sub Menu 4.1</a></li>
      <li><a href="#">Sub Menu 4.1</a></li>
     </ul>
    </dd>
</dl>

<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>

#menu5 {
   width: 200px;
   margin: 10px;
}
     
#menu5 li a {
   height: 32px;
     voice-family: "\"}\"";   
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
}   
     
#menu5 li a:link, #menu5 li a:visited {
   color: #FFF;
   display: block;
   background:  url(menu5.gif);
   padding: 8px 0 0 10px;
}
     
#menu5 li a:hover {
   color: #FFF;
   background:  url(menu5.gif) 0 -32px;
   padding: 8px 0 0 10px;
}
#menu5 ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

<div id="menu5">
    <ul>
      <li><a href="#1" title="Link 1">Link 1</a></li>
      <li><a href="#2" title="Link 2">Link 2</a></li>
      <li><a href="#3" title="Link 3">Link 3</a></li>
      <li><a href="#4" title="Link 4">Link 4</a></li>
      <li><a href="#5" title="Link 5">Link 5</a></li>
    </ul>
</div>

#menu12 {
   width: 200px;
   margin: 10px;
   }
     
#menu12 li a {
   height: 32px;
     voice-family: "\"}\"";   
     voice-family: inherit;
     height: 22px;
   text-decoration: none;
}   
     
#menu12 li a:link, #menu12 li a:visited {
   color: #666;
   display: block;
   background:  url(menu12.gif);
   padding: 10px 0 0 35px;
}
     
#menu12 li a:hover {
   color: #000;
   background:  url(menu12.gif) 0 -32px;
   padding: 10px 0 0 35px;
}
#menu12 ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

<div id="menu12">
   <ul>
    <li><a href="#1" title="Link 1">Link 1</a></li>
    <li><a href="#2" title="Link 2">Link 2</a></li>
    <li><a href="#3" title="Link 3">Link 3</a></li>
    <li><a href="#4" title="Link 4">Link 4</a></li>
    <li><a href="#5" title="Link 5">Link 5</a></li>
   </ul>
</div>

#menu {
   width: 200px;
   border-style: solid solid none solid;
   border-color: #94AA74;
   border-size: 1px;
   border-width: 1px;
   margin: 10px;
}
     
#menu li a {
   height: 32px;
     voice-family: "\"}\"";   
     voice-family: inherit;
     height: 24px;
   text-decoration: none;
}   
     
#menu li a:link, #menu li a:visited {
   color: #5E7830;
   display: block;
   background: url(images/menu1.gif);
   padding: 8px 0 0 10px;
}
     
#menu li a:hover {
   color: #26370A;
   background: url(images/menu1.gif) 0 -32px;
   padding: 8px 0 0 10px;
}
     
#menu li a:active {
   color: #26370A;
   background: url(images/menu1.gif) 0 -64px;
   padding: 8px 0 0 10px;
}
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

<div id="menu">
    <ul>
      <li><a href="#1" title="Home">Home</a></li>
      <li><a href="#2" title="About">About</a></li>
      <li><a href="#3" title="Services">Services</a></li>
      <li><a href="#4" title="Portfolio">Portfolio</a></li>
      <li><a href="#5" title="Store">Store</a></li>
      <li><a href="#6" title="Download">Download Menu</a></li>
    </ul>
</div>

ul.vert-one{margin:0;padding:0;list-style-type:none;display:block;
font:bold 16px Helvetica, Verdana, Arial, sans-serif;line-height:165%;
width:200px;}

ul.vert-one li{margin:0;padding:0;border-top:1px solid #4D0000;
border-bottom:1px solid #761A1A;}

ul.vert-one li a{display:block;text-decoration:none;color:#fff;
background:#600;padding:0 0 0 20px;width:180px;}

ul.vert-one li a:hover{
background:#900 url("images/vert-one_arrow.gif") no-repeat 0 9px;}

ul.vert-one li a.current,ul.vert-one li a.current:hover{
background:#933 url("images/vert-one_arrow.gif") no-repeat 0 9px;}

<ul class="vert-one">
    <li><a href="#" title="CSS Menus">Home</a></li>
    <li><a href="#" title="CSS Menus">Articles</a></li>
    <li><a href="#" title="CSS Menus" class="current">Topics</a></li>
    <li><a href="#" title="CSS Menus">Forum</a></li>
    <li><a href="#" title="CSS Menus">Blog</a></li>
    <li><a href="#" title="CSS Menus">Subscribe</a></li>
    <li><a href="#" title="CSS Menus">Contact Us</a></li>
</ul>

#menu12 {
width: 178px;
padding: 0 0 0 0;
margin-bottom: 1em;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #6898d0;
color: #333;
}
#menu12 ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}    
#menu12 li {
border-bottom: 1px solid #90bade;
margin: 0;
width: auto;
}
#menu12 li a {
display: block;
padding: 3px 0px 3px 0.5em;
border-left: 5px solid #8AA1B6;
border-right: 5px solid #8AA1B6;
background-color: #6898d0;
color: #fff;
text-decoration: none;
width: auto;
}
#menu12 li a:hover {
border-left: 5px solid #800000;
border-right: 5px solid #800000;
background-color: #FF7C3E;
color: #fff;
}
.bt1 {
width : auto;
font-family : Verdana, Arial, Helvetica, sans-serif;    
font-size : 10px;   
text-align : left;   
font-weight : bold;   
color : #ffffff;   
background-color : #8AA1B6;   
padding-top : 3px;   
padding-bottom : 4px;   
padding-left : 4px;   
border-left: 5px solid #FF7C3E;
display : block;   
}
.ht11 {
font-size : 10px;   
font-weight: bold;
color : #000;    
font-family : Verdana, Arial, Helvetica, sans-serif;   
text-decoration : none;   
}    
.hw12 {
font-size : 11px;   
font-weight : bold;   
color : #ffffff;   
font-family : verdana, arial, helvetica, sans-serif;
text-decoration : none;   
}

<div id="menu12">
    <ul>
      <li><div class="bt1"><span class="ht11">» </span>
      <span class="hw12">Navigation Menu</span></div></li>
      <li><a title="Home" href="#">Home</a></li>
      <li><a title="Photos" href="#">Photo Gallery</a></li>
      <li><a title="Events" href="#">Events Calendar</a></li>
      <li><a title="Forum" href="#">Community</a></li>
      <li><a title="Articles" href="#">Article Directory</a></li>
      <li><a title="Link Directory" href="#">Link Directory</a></li>
      <li><a title="Download" href="#">Freeware Download</a></li>
    </ul>
</div>