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