Question

我使用了以下代码：

#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>

应该已经给出this output，但它只是提供垂直链接而不是水平菜单栏。

请帮忙！

Answer 1

为我工作正常..您确定在外部样式表中使用这些代码吗？

CSS中的菜单栏不会出现

1 个答案: