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