CSS dropdown menu takes entire page width? - html

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>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
<li>Language</li>
<li>Works Cited</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>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<li class="dropdown">History
<div class="dropDiv">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</li>
<li>Language</li>
<li>Works Cited</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>Eiffel Tower</li>
<li>Fashion</li>
<li>Food</li>
<li>Museums</li>
<div class="dropDiv">
<li class="dropdown">History</li>
<div class="dropdownContent">
<a href=leaders.shtml>Leaders of Paris</a>
<a href=future.shtml>Future of Paris</a>
</div>
</div>
</li>
<li>Language</li>
<li>Works Cited</li>
</ul>
</nav>
I think this is what you want.