I'm having trouble creating a dropdown menu using only CSS. Specifically, I am struggling to ensure that the dropdown menu is the same size (width and height) as its parent element.
Here is a link to a working example: HERE
This is the snippet of HTML containing the <nav> section:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu With Menus</a>
<ul>
<li><a href="#">opt 1</a></li>
<li><a href="#">opt 2</a></li>
<li><a href="#">opt 3</a></li>
</ul>
</li>
<li><a href="#">Whatnot</a></li>
</ul>
</nav>
Here is the corresponding CSS:
nav ul {
position: relative;
display: inline-table;
list-style: none;
}
nav ul li {
float:left;
list-style-type: none;
}
nav ul li a {
background-color: #dae8ec;
color: rgb(233,78,31);
display: block;
font-weight: bold;
margin: 0 auto;
padding: 9px 18px 9px;
text-decoration: none;
border: 1px solid black;
border-radius: 2px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 7px 30px;
color: rgb(233,78,31);
}
nav ul li a:hover {
background: rgb(138, 92, 132);
color:#dae8ec;
}
If you have any suggestions or tips on how to achieve equal sizing for the dropdown menu, it would be greatly appreciated. Thank you!