CSS中的菜单栏不出现

Posted 2023-02-16

【中文标题】CSS中的菜单栏不出现

【英文标题】：Menu bar in CSS doesn't appear

【发布时间】：2013-04-23 12:39:54

【问题描述】：

我使用了以下代码：

#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，但它只是给出了垂直链接而不是水平菜单栏。

请帮忙！

【问题讨论】：

对我来说完全没问题jsfiddle.net/xDgS7

我的工作正常。你确定你没有使用任何额外的 CSS（外部 CSS）吗？

你用的是什么浏览器？

【参考方案1】：

对我来说工作得很好。你确定你在外部样式表中使用这些代码吗？？

【讨论】：

我把上面的代码保存在'try.css'中，制作了一个html文件'try1.html'，把下面的代码放进去 并在浏览器中执行 'try1.html' .....显示的空白页面

即使我也做了同样的事情，并且它在 chrome 和 firefox 中工作。你的浏览器是哪个？