0

次のコードを使用しました。

#menu {
  background: #333;
  height: 30px;
}
#menu ul {
  margin:0;padding:0;
}
#menu ul a {
  text-decoration: none;
}
#menu ul li {
  list-style: none;
  float: left;
  position: relative;
}
#menu ul li a {
  background: #333;
  color: #fff;
  border: 1px solid #333;
  display: block;
  padding: 4px;
  width: 154px;
}
#menu ul ul {
  padding:0;
  overflow: hidden;
}
#menu ul ul li {
  float: none;
  display: none;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;  
}
#menu ul ul li a {
  background: #f0f0f0;
  color: #333;
  border:none;
}
#menu ul ul li a:hover {
  background: #ccc;
}
#menu ul li a:hover, 
#menu ul li:hover ul li {
  display:block !important;
}


<div id="menu">
  <ul>
    <li><a href="#">Cars</a>
      <ul>
        <li><a href="#">Volvo</a></li>
        <li><a href="#">bmw</a></li>
        <li><a href="#">Subaru</a></li>
      </ul>
    </li>
    <li><a href="#">Boats</a>
      <ul>
        <li><a href="#">Sea Ray</a></li>
        <li><a href="#">Whaler</a></li>
        <li><a href="#">Fairline</a></li>
      </ul>
    </li>
    <li><a href="#">Bikes</a>
      <ul>
        <li><a href="#">Yamaha</a></li>
        <li><a href="#">Suzuki</a></li>
        <li><a href="#">Rider</a></li>
      </ul>    
    </li>
  </ul>
</div>

この出力を提供する必要がありましたが、水平メニュー バーの代わりに垂直リンクを提供するだけです。

助けてください！

4

1 に答える 1

0

私にとってはうまくいっています..これらのコードを外部スタイルシートで使用していてよろしいですか??

于 2013-04-23T12:52:16.593 に答える