jagguy
asked on
sub list behind menu
Hi,
My sub menu doesnt display properly as it appears partly above and behind the the current link I am hovering on.
How do I fix this?
My sub menu doesnt display properly as it appears partly above and behind the the current link I am hovering on.
How do I fix this?
*{
margin:0;
padding:0;
list-style-type: none;
}
/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
#nav-status {
display: none;
}
ul#mynav {
width: 100%;
min-height: 25px;
color:#fff;
background:#CCC;
overflow: visible;
}
ul#mynav li {
color:#000;
border-right: 1px solid #333;
height: 21px;
padding:2px;
position: relative;
list-style-type: none;
}
ul#mynav li:last-child {
border-right: none;
}
ul#mynav li:hover ul {
display: block;
}
ul#mynav a {
display:block;
width: 100%;
color:#fff;
background:#666;
}
ul#mynav li ul {
display: none;
color:#fff;
background:#666;
position: absolute;
top: 0px;
left: 50px;
overflow: hidden;
}
.more{
display:none;
}
}
<ul id="mynav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li>
<a href="#">Item 5 <span class="more">></span></a>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
</ul>
</li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.