html - Css Dropdown Button in a navbar -
okay i'm trying learn css , i'm trying insert dropdown button in navbar.
what's happening when hover button whole navbar expanding instead of content of button. doing wrong? thanks!
ul { list-style-type: none; margin-left:8%; margin-right: 8%; padding-left: 0; padding-right: 0; overflow: hidden; background-color: #f3f3f3; } .right{ float: right; } li { float: left; display: block; color: #6f6f6f; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #e0e0e0; } p { color: red; margin-left: 8%; margin-right: 8%; } body{ font-family:arial; background-color:#f9f9f9; } .dropbtn { background-color: #f3f3f3; color: #6f6f6f; padding: 14px 16px; font-size: 16px; border: none; cursor: pointer; } /* container <div> - needed position dropdown content */ .dropdown { position: relative; display: block; } /* dropdown content (hidden default) */ .dropdown-content { right: 0; display: none; position: relative; background-color: #f9f9f9; min-width: 10px; } /* links inside dropdown */ .dropdown-content { right: 0; color: black; padding: 12px 16px; text-decoration: none; display: block; } /* change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #e0e0e0} /* show dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; right:0; } /* change background color of dropdown button when dropdown content shown */ .dropdown:hover .dropbtn { background-color: #e0e0e0; }
<ul> <li><a href="/"><img src="../../static/image/logorect.png" width="25"> </a></li> <li><a href="/movies">movies</a></li> <li><a class="right" href="">search</a></li> <div class="right"> <div class="dropdown"> <button class="dropbtn">dropdown</button> <div class="dropdown-content"> <a href="#">links 1</a> <a href="#">link 2</a> <a href="#">link 3</a> </div> </div> </div> <li><a class="right" href="#about">explore</a></li> </ul>
you have specify height , remove overflow hidden.
ul { list-style-type: none; margin-left:8%; margin-right: 8%; padding-left: 0; padding-right: 0; // overflow: hidden; <---remove height: 48px; // <---add background-color: #f3f3f3; }
if don't, ul defaults if has:
height: auto;
relevant fiddle
Comments
Post a Comment