Добавить в выпадающем меню в существующее меню навигации

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

мне пришлось полностью удалить CSS, за исключением тех стилей, которые вы подали в #nav_bar и убирали структуру HTML, а также удаление всех &nbsp «с.

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

Вы можете укладывать его дальше в соответствии с вашими потребностями.