Currently, I am in the process of designing a flyout menu and my goal is to ensure that the height of the sub-menu matches that of the main menu.
Below is the html code for the menu that I am currently developing:
<ul id="nav">
<li class="button"><a>Sub menu title 1</a>
<ul>
<li><a>Link1</a></li>
<li><a>Submenu2</a></li>
</ul>
</li>
<li class="button"><a>Sub menu title 2</a>
<ul>
<li><a>Link4</a></li>
<li><a>Submenu5</a></li>
</ul>
</li>
<li class="button"><a>Sub menu title 3</a>
<ul>
<li><a>Link</a></li>
<li><a>Submenu</a></li>
</ul>
</li>
</ul>
Additionally, here is the accompanying css:
#nav {
top: 50%;
left: 0;
width: 200px;
border: 1px solid #000;
}
#nav ul {
width: 200px;
background: #f9f9f9;
position: absolute;
left: -9999em;
}
#nav a {
display: block;
padding: 5px 10px;
}
#nav ul li {
position: relative;
}
#nav li:hover ul {
left: 200px;
top: 0;
}
#nav li:hover > a {
cursor: pointer;
}
.button a {
display: block;
padding: 5px 10px;
}
If you want to view the live demo, you can access it through this link.
My question is, what would be the best approach to ensuring that the flyout menu's height matches that of the main menu?