CSS dropdown menu takes entire page width?

Question

I have a simple nav menu at the top of a page I'm working on. I want one of the links on the nav menu to have a dropdown menu pop up underneath it when you hover over it.

I have the drop down menu appearing just fine. The only problem is that the drop down menu items are the width of the entire page instead of the width of a nav menu item. I'm not sure what's causing it...

Here is the html and css for the nav menu and drop down menu:

 .dropdown { float: left; background-color: #FFF0F5; } .dropDiv { position: relative; display: inline-block; width: 100%; } .dropdownContent { display: none; background-color: #FFF0F5; z-index: 1; width: 300px; overflow-x: hidden; } .dropdownContent a { display: block; text-align: center; padding: 14px 16px; text-decoration: none; width: 300px; } .dropdownContent a:hover { background-color: #fff8dc; } .dropDiv:hover .dropdownContent { display: block; z-index: 1; height: 200px; width: 300px; overflow-x: hidden; } .dropDiv:hover .dropdown { background-color: #fff8dc; } 

 <nav> <ul> <li><a href="eiffel.shtml">Eiffel Tower</a></li> <li><a href="fashion.shtml">Fashion</a></li> <li><a href="food.shtml">Food</a></li> <li><a href="museums.shtml">Museums</a></li> <div class="dropDiv"> <li class="dropdown"><a href="history.shtml">History</a></li> <div class="dropdownContent"> <a href=leaders.shtml>Leaders of Paris</a> <a href=future.shtml>Future of Paris</a> </div> </div> <li><a href="language.shtml">Language</a></li> <li><a href="works.shtml">Works Cited</a></li> </ul> </nav> 

As you can see It's a bit of a mess since I've been adding lots of things trying to think of something to fix this width issue. Any help is greatly appreciated!

Answer 1

Your code worked fine for me. Looks like some other CSS in your code is making it full width. Have you tried fixing it with "!important" or "max-width"?

Answer 2

You should create dropDiv in the li tag and make it absolute position to get the parent widht

 nav ul { padding:0; margin:0; } nav ul li { list-style: none; float: left; position: relative; margin: 0 5px; } nav ul li a{ color: #000; text-decoration: none; } .dropdown { float: left; background-color: #FFF0F5; } nav ul li:hover .dropDiv { display: block; z-index: 1; height: 200px; width: 300px; overflow-x: hidden; } .dropDiv:hover .dropdown { background-color: #fff8dc; } .dropDiv { position: absolute; width: 100%; display: none; background-color: #FFF0F5; z-index: 1; width: 300px; overflow-x: hidden; } .dropDiv a { display: block; text-align: center; padding: 14px 16px; text-decoration: none; } .dropDiv a:hover { background-color: #fff8dc; } 

 <nav> <ul> <li><a href="eiffel.shtml">Eiffel Tower</a></li> <li><a href="fashion.shtml">Fashion</a></li> <li><a href="food.shtml">Food</a></li> <li><a href="museums.shtml">Museums</a></li> <li class="dropdown"><a href="history.shtml">History</a> <div class="dropDiv"> <a href=leaders.shtml>Leaders of Paris</a> <a href=future.shtml>Future of Paris</a> </div> </li> <li><a href="language.shtml">Language</a></li> <li><a href="works.shtml">Works Cited</a></li> </ul> </nav> 

Answer 3

Hello just define width for nav bar as you want I've defined 700px. and add some css . check this code

 .dropdown { float: left; background-color: #FFF0F5; } .dropDiv { position: relative; display: inline-block; list-style: none; padding: 9px; float: left; max-width: 100%; } .dropdownContent { display: none; background-color: #FFF0F5; z-index: 1; width: 300px; overflow-x: hidden; } .dropdownContent a { display: block; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdownContent a:hover {background-color: #fff8dc;} .dropDiv:hover .dropdownContent { display: block; z-index: 1; overflow-x: hidden; top: 30px; left: 10px; position: absolute; } .dropDiv:hover .dropdown { background-color: #fff8dc; } nav {width:700px;float: left;} nav > ul > li { float: left; padding: 9px;list-style: none} ul{float:left;} 

 <nav> <ul> <li><a href="eiffel.shtml">Eiffel Tower</a></li> <li><a href="fashion.shtml">Fashion</a></li> <li><a href="food.shtml">Food</a></li> <li><a href="museums.shtml">Museums</a></li> <div class="dropDiv"> <li class="dropdown"><a href="history.shtml">History</a></li> <div class="dropdownContent"> <a href=leaders.shtml>Leaders of Paris</a> <a href=future.shtml>Future of Paris</a> </div> </div> </li> <li><a href="language.shtml">Language</a></li> <li><a href="works.shtml">Works Cited</a></li> </ul> </nav> 

I think this is what you want.