ARTICLE AD BOX
I am relearning HTML and want to create a navigation bar with a dropdown menu which appears when the cursor hovers over the "Works" button. With my current code, only the top of the dropdown menu appears while the rest is cut off by the navigation bar. Is there a way to take the dropdown out of the navigation bar? I am using Bootstrap.
HTML:
<nav> <a href="home.html">Home</a> <a href="about.html">About</a> <div class="dropdown"> <button class="dropbtn">Works</button> <div class="content"> <a href="index.html">Index</a> <a href="gallery.html">Gallery</a> </div> </div> </nav>CSS:
/*navigation*/ nav { display: flex; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; background-color: rgb(58, 73, 69); padding: 0%; margin: 2% 0% 2% 26%; border-radius: 5px; width: 65%; } nav a, nav button { background-color: rgb(58, 73, 69); color: white; padding: 3%; } nav a:hover{ background-color:rgb(148, 247, 82); color: black; } /*hover dropdown menu*/ .dropdown { display: inline-block; } .dropbtn { border: none; padding: 57% 0% 0% 54%; cursor: pointer; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .dropdown a { background-color: hsl(0, 0%, 90%); color: black; display: block; padding: 20%; } .dropdown .content { display: none; position: absolute; background-color: hsl(0, 0%, 90%); min-width: 100px; text-align: center; box-shadow: 2px 2px 5px hsl(237, 65%, 70%); z-index: 1; } .dropdown:hover, .content { display: block; background-color:#5a5c75; color: rgb(255, 249, 249); }