如何將簡單導航轉換爲包含下拉菜單？ （具體情況 - 已嘗試轉換）

Question

我已經嘗試了幾件事情來將我的導航解決方案轉換爲包含下拉菜單，但我似乎無法使其正常工作。以下是我的CSS和HTML，我希望有人能夠向我解釋我自己無法實現的內容 - 如何在導航項目懸停時顯示下拉菜單，並且鏈接處於活動狀態。

請不要介意頁面名稱，因爲它們是僞代碼，因爲它們對於主題無關緊要。

<div id="page"> 
     <a class="topNavigationLink" href="http://1.com">1</a> 
     <a class="topNavigationLink" href="2.html">2</a> 
     <a class="topNavigationLink" href="3.html">3</a> 
     <a class="topNavigationLink" href="4.html">4</a> 
     <a class="topNavigationLink" href="5.html">5</a> 
     <a class="topNavigationLink" href="6.html">6</a> 
     <a class="topNavigationLink" href="7.html" >7</a> 
</div> 

#page 
{ 
    display: block; 
    height:auto; 
    position: relative; 
    overflow: hidden; 
    width: 938px; 
padding:8px 10px; 
box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
background: url(background.png) center 0px; 
} 

a.topNavigationLink 
{ 
text-align:center; 
font-weight:bold; 
margin-top:0px; 
font-size:20px; 
padding:18px 23.4px; /*modify this value to change link size*/ 
float:left; 
background-color:black; 
//clear:left; 
text-decoration:none; 
color:#FFFFFF; 
font-family: Copperplate/Copperplate Gothic Light, sans-serif; 
box-shadow: 0px 0px 10px rgba(0,0,0,0.8); 
} 

a.topNavigationLink:hover 
{ 
color:DodgerBlue; 
background-color:white; 
box-shadow: 0px 10px 10px #00CC66; 
} 

Answer 1

首先，您應該使用無序列表來標記導航塊。在你的情況，這可能是這樣的：

<div id="page"> 
    <nav> 
     <ul> 
      <li><a href="http://1.com">1</a></li> 
      … 
     </ul> 
    </nav> 
    … 
</div> 

這裏，你可以爲你導航的基礎上用一個簡單的例子：http://dabblet.com/gist/4291211