XHTMLソース

<ul id="drop_down_menu">
 <li><a href="#">メニュー 1</a></li>
 <li><a href="#">メニュー 2 +</a>
  <ul>
   <li><a href="#">メニュー 2-1 +</a>
    <ul>
     <li><a href="#">メニュー 2-1-1</a></li>
     <li><a href="#">メニュー 2-1-2</a></li>
     <li><a href="#">メニュー 2-1-3</a></li>
    </ul>
   </li>
   <li><a href="#">メニュー 2-2</a></li>
   <li><a href="#">メニュー 2-3</a></li>
  </ul>
 </li>
 <li><a href="#">メニュー 3 +</a>
  <ul>
   <li><a href="#">メニュー 3-1 +</a>
    <ul>
     <li><a href="#">メニュー 3-1-1 +</a>
      <ul>
       <li><a href="#">メニュー 3-1-1-1</a>
       <li><a href="#">メニュー 3-1-1-2</a>
       <li><a href="#">メニュー 3-1-1-3</a>
      </ul>
     </li>
     <li><a href="#">メニュー 3-1-2</a></li>
     <li><a href="#">メニュー 3-1-3</a></li>
     <li><a href="#">メニュー 3-1-4</a></li>
    </ul>
   </li>
   <li><a href="#">メニュー 3-2 +</a>
    <ul>
     <li><a href="#">メニュー 3-2-1</a></li>
     <li><a href="#">メニュー 3-2-2</a></li>
     <li><a href="#">メニュー 3-2-3</a></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><a href="#">メニュー 4</a></li>
</ul>

CSSソース

ul#drop_down_menu {
     margin: 0;
     padding: 0;
     list-style: none;
     font-size: 0.75em;
}
ul#drop_down_menu li {
     float: left;
     position: relative;
     margin: 0;
     padding: 0;
}
ul#drop_down_menu li a {
     display: block;
     padding: 5px 9px;
     width: 130px;
     border-top: 1px solid #FFF;
     border-right: 1px solid #CCC;
     border-bottom: 1px solid #CCC;
     border-left: 1px solid #FFF;
     text-decoration: none;
     background: #EEE;
}
ul#drop_down_menu a:hover,
ul#drop_down_menu li:hover a {
     background: #CCC;
     color: #FFF;
}
ul#drop_down_menu li ul {
     display: none;
}
ul#drop_down_menu li ul li {
     float: none;
}
ul#drop_down_menu li ul li ul {
     position: absolute;
     top: 0;
     left: 150px;
}
ul#drop_down_menu li:hover > ul {
     display: block;
}
ul#drop_down_menu li:hover ul li a,
ul#drop_down_menu li:hover ul li:hover ul li a,
ul#drop_down_menu li:hover ul li:hover ul li:hover ul li a {
     background: #EEE;
     color: #666;
}
ul#drop_down_menu li:hover ul li a:hover,
ul#drop_down_menu li:hover ul li:hover a,
ul#drop_down_menu li:hover ul li:hover ul li a:hover,
ul#drop_down_menu li:hover ul li:hover ul li:hover a,
ul#drop_down_menu li:hover ul li:hover ul li:hover ul li a:hover,
ul#drop_down_menu li:hover ul li:hover ul li:hover ul li:hover a {
     background: #CCC;
     color: #FFF;
}

• 第4章 ユーザビリティを向上させるCSSデザインの法則