After creating my first CSS drop-down menu, I encountered an issue that I need help with. When the submenu expands, it affects the main ul element by pulling it down, which is not the desired behavior. I want the main ul element to maintain its specified height so that the purple div below remains in the same position even when the submenu expands. Thank you for your assistance.
You can view the code on jsFiddle here.
Below is the code snippet:
<ul class="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Gallery</a>
</li>
<li>
<a href="#">Other</a>
</li>
<li>Our Dogs
<ul class="submenu">
<li>
<a href="#">Puppies</a>
</li>
<li>
<a href="#">Males</a>
</li>
<li>
<a href="#">Females</a>
</li>
</ul>
</li>
</ul>
<div style="float:left; width:100%; background:#FF00FF;"> </div>
And here is the corresponding CSS:
ul.menu{
text-align:center;
display: table;
width: 100%;
height:48px;
line-height:48px;
border: 1px solid red;
}
ul.menu li {
background:yellow;
display: table-cell;
border: 0px solid yellow;
}
ul.menu li a {
display:block;
background:blue;
}
ul.menu li a:hover {
display:block;
background:purple;
}
.submenu {
display: none;
}
.menu li:hover .submenu {
display: block;
}
ul.submenu {
text-align:center;
}
ul.submenu li {
display:block;
text-align:center;
background:green;
border:0px;
}
ul.submenu li a {
color:red;
text-align:center;
background:pink;
}
ul.submenu li a:hover {
color:red;
text-align:center;
background:orange;
}