I found this awesome CSS menu on Fiddle that I'd like to share with you: http://jsfiddle.net/DenErello/pQhpu/
Here's the CSS code:
.Menu {
background-color: #3b69a2;
height: 30px;
}
.Menu, .Menu li {
list-style: none;
padding: 0;
margin: 0;
}
.Menu li {
float: left;
width: 100px;
display: block;
line-height: 30px;
}
.Menu ul {
opacity: 0;
}
.Menu ul li {
line-height: 20px;
background-color: #3b69a2;
}
.Menu li:hover > ul { opacity: 1; }
And here's the HTML code:
<ul class="Menu">
<li>Test 1
<ul>
<li>Test 1.1</li>
<li>Test 1.2</li>
</ul>
</li>
<li>Test 2
<ul>
<li>Test 2.1</li>
<li>Test 2.2</li>
<li>Test 2.3</li>
</ul>
</li>
</ul>
Although the menu works well, I'm looking to have both drop-down menus visible after clicking on one of the main menu items. I'm also trying to achieve a full 100% width background and full height for the dropdown menus, mirroring the height of the largest dropdown. I've attempted to apply background styles to the ul element, but it doesn't seem to be working. Can anyone provide some guidance on how to achieve this?