我有一个现有的HTML菜单,我需要添加进一步的导航。我添加了额外的<ul>
和<li>
标记,我认为这些标记位于正确的位置。我也有一些CSS,但似乎搞乱了导航栏上的链接。
以下是目前的图片:
http://gyazo.com/b45d1a07de57e617715b74ced91b942b
在添加下拉菜单的代码之前,这就是它的样子:
http://gyazo.com/d3dcd6b866187a650f83842beeb0be0d
HTML
<!--TOP NAV BAR SECTION-->
<div id="nav_bar">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="status.html">STATUS</a></li>
<li><a href="info.html">INFO</a></li>
<li><a href="#">GAMEMODES</a>
<ul>
<li><a href="#">GAMEMODE - SURVIVAL</a></li>
<li><a href="#">GAMEMODE - PURE-PVP</a></li> `enter code here`
<li><a href="#">GAMEMODE - GAMESWORLD</a></li>
</ul>
</li>
<li><a href="rules.html">RULES</a></li>
<li><a href="vote.html">VOTE</a></li>
</ul>
</div>
CSS
#nav_bar {
background-color:#a22b2f;
padding-top:10px;
height:35px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
margin:-15px;
margin-left:110px;
}
#nav_bar ul li {
display:inline;
}
#nav_bar ul li ul {
opacity:0;
}
#nav_bar ul li:hover ul {
opacity:1;
}
#nav_bar a:link {
text-decoration: none;
}
#nav_bar a:visited {
color:#ffffff;
}
#nav_bar a:hover {
background:#8c1b1f;
padding-bottom:12px;
padding-top:16px;
padding-left:10px;
padding-right:10px;
}
答案 0 :(得分:1)
除了您应用于#nav_bar
的样式之外,我必须完全删除您的CSS,并清除您的HTML结构,同时删除所有 
<。 / p>
#nav_bar {
background-color: #a22b2f;
padding: 10px;
box-shadow: 0px 2px 10px;
}
#nav_bar ul {
text-align: center;
padding-left: 0px;
}
#nav_bar ul li {
display: inline-block;
}
#nav_bar ul li a {
color: white;
font-family: Arial;
text-decoration: none;
font-weight: bold;
padding: 15px;
}
#nav_bar ul li ul {
display: none;
}
#nav_bar ul li:hover ul {
display: block;
position: absolute;
padding: 0px;
background: white;
padding: 10px;
border: 1px solid black;
}
#nav_bar ul li:hover ul li {
display: block;
}
#nav_bar ul li:hover ul li a {
color: black;
}
&#13;
<div id="nav_bar">
<ul>
<li><a href="index.html">HOME</a>
</li>
<li><a href="status.html">STATUS</a>
</li>
<li><a href="info.html">INFO</a>
</li>
<li><a href="#">GAMEMODES</a>
<ul>
<li><a href="#">GAMEMODE - SURVIVAL</a>
</li>
<li><a href="#">GAMEMODE - PURE-PVP</a>
</li>
<li><a href="#">GAMEMODE - GAMESWORLD</a>
</li>
</ul>
</li>
<li><a href="rules.html">RULES</a>
</li>
<li><a href="vote.html">VOTE</a>
</li>
</ul>
</div>
&#13;
您可以根据需要进一步设计。