html css dropdown menu -
this first ever post stack overflow , i'm not familiar forum regulations posting. please let me know have done wrong. have researched issue in forums , nothing i've come across gives me clear answer.
i trying create dropdown menu "news" element, never visible result when running code. tried change .dropdown-content
's display
value block
see if make list visible, nothing showed. missing?
body{ background-image: url("images/seamless-panda-bear-pattern.jpg"); font-size: 100%; width: 80%; margin: auto; font-family: palatino,"palatino", arial; } #top{ background-color: black; color: white; padding-left: 10px; border: 2px solid white; font-family: copperplate,"copperplate gothic light",fantasy; opacity: 0.85; padding-left: 25px; } #menu{ list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; position: fixed; width: 80%; } li{ float: left; } #login{ float: right; padding-right: 20px; } li a{ display: block; color: white; text-decoration: none; text-align: center; padding: 14px 16px; } li a:hover{ background-color: white; color: black; } li.dropdown{ display: inline-block; } .dropdown-content{ display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2); padding: 12px 16px; z-index: 1; } .dropdown-content a{ display: block; text-decoration: none; padding: 12px 16px; color: black; } .dropdown:hover .dropdown-content{ display: block; } #bio{ } #bottom{ }
<div id="nav"> <ul style="list-style-type: none" id="menu"> <li><a href="home.html">home</a></li> <li class="dropdown"><a class="dropbtn" href="#">news</a> <div class="dropdown-content"> <a href="#">games</a> <a href="#">web design</a> <a href="#">travel</a> </div> </li> <!-- create link part of same page contact info --> <li><a href="#bottom">contact info</a></li> <li id="login"><a href="login.html">log in</a></li> </ul> </div>
to solve position fixed issue. can add position: fixed;
#nav
, change width on #menu
width: 80%;
width: 100%;
here's js fiddle.
hope helped!
Comments
Post a Comment