0

我已经尝试了一些方法来将我的导航解决方案转换为以准确和美观的方式包含下拉菜单，但我似乎无法让它 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;
}
4

1 回答 1

1

首先，您应该使用无序列表来标记导航块。在您的情况下，这可能如下所示：

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

这是一个可以用作导航基础的简单示例：http: //dabblet.com/gist/4291211

于 2013-01-13T04:39:17.250 回答