The appearance of the block with hover (only CSS+HTML ).

When a link to a hover is needed (which in UL>LI is a reference to TRAVELS ), a second block appears (second nav ). I do not know how to do it anymore.

 @import url(http://fonts.googleapis.com/css?family=Economica:400,700); * { margin: 0px; padding: 0px; font-family: "Economica"; } .li { display: inline-block; padding: 5px; list-style: none; } .a1 { color: white; text-decoration: none; font-size: 20px; font-weight: bold; padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; } .a1:hover { color: #A3A3A0; background-color: #E3E3DF; } #navigation { background-color: #33CDD4; } #ul { width: 900px; position: relative; left: 30px; } #more { padding-left: 160px; } .li1 { display: inline; position: relative; top: 5px; padding-left: 20px; } .a2 { text-decoration: none; color: #A3A3A0; font-size: 18px; top: 38px; } #nav { background-color: #E3E3DF; height: 33px; text-align: center; width: 100%; } #ul1 { position: absolute; left: 30px; } .a2:hover { color: #33CDD4; } #nav { display: none; } #navigation #ul:hover ~ #nav { display: inline; } 
 <nav id="navigation"> <ul id="ul"> <li class="li"><a class="a1" href="#">HOME</a></li> <li class="li"><a class="a1" href="#">NEWS</a></li> <li class="li"><a class="a1" href="#">ECONOMICS</a></li> <li class="li"><a class="a1" href="#">LOCAL</a></li> <li class="li"><a class="a1" href="#">SPORT</a></li> <li class="li"><a class="a1" href="#">CULTURE</a></li> <li class="li"><a class="a1" href="#">TRAVELS</a></li> <li class="li" id="more"><a class="a1" href="#">MORE</a></li> </ul> </nav> <nav id="nav" class="navigation"> <ul id="ul1"> <li class="li1"><a class="a2" href="#">Amsterdam</a></li> <li class="li1"><a class="a2" href="#">Bahamas</a></li> <li class="li1"><a class="a2" href="#">Jamaica</a></li> <li class="li1"><a class="a2" href="#">Las Vegas</a></li> <li class="li1"><a class="a2" href="#">London</a></li> <li class="li1"><a class="a2" href="#">Los Angeles</a></li> <li class="li1"><a class="a2" href="#">Miami</a></li> <li class="li1"><a class="a2" href="#">Montreal</a></li> <li class="li1"><a class="a2" href="#">Paris</a></li> <li class="li1"><a class="a2" href="#">Rome</a></li> </ul> </nav>

  • In my opinion, in this form, only js - Alexey Shimansky
  • And how can it be otherwise? Just that, outwardly, it remained the same and worked - Nobody
  • ul needs to be nested in li. Then we write a rule of this type .a1: hover + ul - Russian Bear
  • Like how ..... put all the navigation that <nav id="nav" into that very necessary li right under the link <a class="a1" href="#">TRAVELS</a> .... .and write to display .a1:hover + #nav { display: block; } .a1:hover + #nav { display: block; } ........ and just rewrite styles for this situation - Alexey Shimansky

1 answer 1

 @import url(http://fonts.googleapis.com/css?family=Economica:400,700); * { margin: 0px; padding: 0px; font-family: "Economica"; } .li { display: inline-block; padding: 5px; list-style: none;} .a1 { color: white; text-decoration: none; font-size: 20px; font-weight: bold; padding-left: 15px; padding-right: 15px; padding-top: 5px; padding-bottom: 5px; } .a1:hover { color: #A3A3A0; background-color: #E3E3DF; } #navigation { background-color: #33CDD4; } #ul { width: 900px; position: relative; left: 30px; } li ul {display:none;} li:hover ul {display:block;} #more { padding-left: 160px; } .li1 { display: inline; position: relative; top: 5px; padding-left: 20px; } .a2 { text-decoration: none; color: #A3A3A0; font-size: 18px; top: 38px; } #nav { background-color: #E3E3DF; height: 33px; text-align: center; width: 100%; } #ul1 { position: absolute; left: 30px; } .a2:hover { color: #33CDD4; } #nav { display: none; } #navigation #ul:hover ~ #nav { display: inline; } 
 <nav id="navigation"> <ul id="ul"> <li class="li"><a class="a1" href="#">SPORT</a></li> <li class="li"><a class="a1" href="#">CULTURE</a></li> <li class="li"><a class="a1" href="#">TRAVELS</a> <ul id="ul1"> <li class="li1"><a class="a2" href="#">Amsterdam</a></li> <li class="li1"><a class="a2" href="#">Bahamas</a></li> <li class="li1"><a class="a2" href="#">Jamaica</a></li> <li class="li1"><a class="a2" href="#">Las Vegas</a></li> <li class="li1"><a class="a2" href="#">London</a></li> <li class="li1"><a class="a2" href="#">Los Angeles</a></li> <li class="li1"><a class="a2" href="#">Miami</a></li> <li class="li1"><a class="a2" href="#">Montreal</a></li> <li class="li1"><a class="a2" href="#">Paris</a></li> <li class="li1"><a class="a2" href="#">Rome</a></li> </ul> </li> </ul> </nav>