Having trouble with my submenu dropdown menu... I want to increase the width of my submenu without affecting the main menu, but they seem to be interconnected and I need them to function independently.
.fancyNav{
/* Styles for the UL element */
overflow: hidden;
display: inline-block;
z-index:999;
}
.fancyNav li{
/* Customizing the list items */
background: #CCC;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=10);
opacity:.7;
border-right: 1px solid rgba(0, 0, 0, 1);
position:relative;
float: left;
list-style: none;
}
/* More CSS styling for Fancy Nav */
...
The issue lies in the submenu code:
ul ul li{
float:none !important;
display: block;
padding: 2px;
}
ul ul{
display:none;
position:relative;
z-index:2;
}
ul li:hover ul{
display:block;
}
Here's a snippet of the HTML Code:
<nav><ul class="fancyNav">
<li id="quemsomos" class="menlog"><a href="index.php"><img src="imgs/Logo.png" width="37" height="45" /></a></li>
<li id="quemsomos"><a href="quemsomos.php?web=1"><font face="din" size="4">QUEM SOMOS</font></a>
<!--start of sub menu-->
<ul>
<li><a href="#">Test DropDown</a></li>
<li><a href="#">Test DropDown</a></li>
<li><a href="#">Test DropDown</a></li>
</ul>
<!--end of sub menu-->
</li>
Thank you!