如何将简单的导航转换为包括下拉菜单?(具体情况-试过转换)

Question

我已经尝试了一些事情来转换我的导航解决方案，以一种准确和美观的方式包括下拉菜单，但我似乎不能让它100%工作。以下是我的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