css 样式未正确呈现，可能是 div 问题？

Question

我正在尝试在 CSS 中制作水平菜单布局。我正在使用此处列出的指南： http://www.devinrolsen.com/pure-css-horizontal-menu/

我有一个类似这样的 css 文件，名为 navigation.css：

.navigation{
  width:100%;
  height:30px;
  background-color:lightgray;
}
.navigation ul {
  margin:0px;
  padding:0px;
}
.navigation ul li {
  display:inline;
  height:30px;
  float:left;
  list-style:none;
  margin-left:15px;
}
.navigation li a {
  color:black;
  text-decoration:none;
}
.navigation li a:hover {
  color:black;
  text-decoration:underline;
}
.navigation li ul {
  margin:0px;
  padding:0px;
  display:none;
}
.navigation li:hover ul {
  display:block;
  width:160px;
}
.navigation li li{
  list-style:none;
  display:block;
}

在我的实际 php 页面中，我有这个

<div class="navigation">
  <ul>
    <li>
    <a href="#">something</a>
      <ul>
        <li><a href="./hello.php">Hello</a></li>
        <li><a href="./hello2.php">hello2</a></li>
      </ul>
    </li>
    <li>
    <a href="#">Browse database</a>
      <ul>
        <li><a href="./test.php">test</a></li>
        <li><a href="./test2.php">Test2</a></li>
        <li><a href="./search.php">Search</a></li>
      </ul>
    </li>
  </ul>
</div>

由于我无法确定的原因，它们没有下拉菜单效果。因此，如果我通过将 .navigation 替换为 #navigation 将导航更改为 id 而不是类，那么所有布局都不会影响 HTML。

Answer 1

如果您仍然遇到问题，您是否尝试过更改：

.navigation li li{
  list-style:none;
  display:block;
}

收件人：

.navigation li li{
  list-style:none;
  display:none;
}
.navigation li:hover li{
  display:block;
}