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;
}

css样式没有正确呈现，可能div问题？

1 个答案: