html - 将下拉菜单添加到现有导航菜单

Question

我有一个现有的 HTML 菜单，我需要向其添加更多导航。我添加了额外的 <ul>和 <li>我认为在正确位置的标签。我也有一些 CSS，但 ti 似乎弄乱了导航栏上的链接。

这是它目前的样子:

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>&nbsp;&nbsp;
<li><a href="status.html">STATUS</a></li>&nbsp;&nbsp;
<li><a href="info.html">INFO</a></li>&nbsp;&nbsp;
<li><a href="#">GAMEMODES</a>&nbsp;&nbsp;

<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>&nbsp;&nbsp;
<li><a href="vote.html">VOTE</a></li>&nbsp;&nbsp; 

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

Answer 1

除了你应用于#nav_bar 的样式外，我必须完全删除你的 CSS，并通过删除所有   清理你的 HTML 结构的。

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

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

您可以根据需要进一步设置样式。