XHTMLソース

<ul id="menu">
 <li><a href="#"> メニューA</a>
  <ul>
   <li><a href="#">A の詳細メニュー1</a></li>
   <li><a href="#">A の詳細メニュー2</a></li>
   <li><a href="#">A の詳細メニュー3</a></li>
   <li><a href="#">A の詳細メニュー4</a></li>
  </ul>
 </li>
 <li><a href="#"> メニューB</a>
  <ul>
   <li><a href="#">B の詳細メニュー1</a></li>
   <li><a href="#">B の詳細メニュー2</a></li>
  </ul>
 </li>
 <li><a href="#"> メニューC</a>
  <ul>
   <li><a href="#">C の詳細メニュー1C の詳細メニュー1C の詳細メニュー1</a></li>
   <li><a href="#">C の詳細メニュー2</a></li>
  </ul>
 </li>
 <li><a href="#"> メニューD</a>
  <ul>
   <li><a href="#">D の詳細メニュー1</a></li>
   <li><a href="#">D の詳細メニュー2</a></li>
   <li><a href="#">D の詳細メニュー3</a></li>
  </ul>
 </li>
 <li><a href="#"> メニューE</a></li>
</ul>

CSSソース

* {
     margin:0;
     padding:0;
}
body {
     font-size: small;
     font-family: Meiryo, Osaka, verdana, arial, sans-serif;
}
a {
     color: #6086F6;
     text-decoration: none;
}
a:hover {
     color: blue;
}
li {
     list-style-type:none;
}
#menu {
     width: 180px;
     background: url(img/bg.gif) repeat-y;
     line-height: 1.1;
}
#menu li {
     margin-bottom: 0;
     letter-spacing: .1em;
}
#menu li a {
     background: url(img/list_01.gif) no-repeat;
     display: block;
     padding: 13px 10px 11px 30px;
     border-bottom: 1px solid #FFF;
     width: 140px;
}
#menu li a:focus,
#menu li a:hover {
     background: url(img/list_01.gif) no-repeat right top;
     text-decoration: none;
}
#menu li li a {
     background: url(img/list_02.gif) no-repeat;
     padding: 8px 10px 8px 38px;
     width: 132px;
}
#menu li li a:focus,
#menu li li a:hover {
     background: url(img/list_02.gif) no-repeat right top;
}

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