I have a horizontal menu as an unordered list:
<form id="MainForm" runat="server">
<h1>Main Form</h1>
<div>
<ul class="nav">
<li><a href="/WebForm1.aspx">Form 1</a></li>
<li><a href="/WebForm2.aspx">Form 2</a></li>
<li><a href="/WebForm3.aspx">Form 3</a></li>
</ul>
</div>
</form>
From my external .css:
ul.nav {
padding-left: 0px;
background-color: #3D99CE;
text-align: left;
}
ul.nav > li {
display: inline-block;
padding: 10px 10px;
height: 10px;
}
ul.nav > li:hover {
background-color: #2779BF;
}
ul.nav > li > a {
color: white;
text-decoration: none;
}
I would like another list item in the horizontal list that has a dropdown list that would serve as submenu items that do not show until I click the horizontal menu item. How can I achieve that?
I suspect the magic will be in the style sheet.
Thank you.
