JCWEBHOST
asked on
asp css menu
hey guys i am using css friendly dll to style my menu
but when i hover over the third sub menu all the 4th and 5 th and 6 th sub menu open?
please help
here my code
.Menu
{
font-family: 'Open Sans' , sans-serif;
font-size: 12px;
}
.Menu
{
position: relative;
width: 200px;
background-color: #eee;
border-top: 1px solid white;
border-bottom: 1px solid white;
padding: 0;
margin: 0;
list-style: none;
}
.Menu ul
{
display: none;
position: absolute;
left: 0px;
top: -1px; /* accommodate the border */
margin: 0;
padding: 0;
}
.Menu ul li ul
{
display: none;
position: absolute;
left: 0px;
top: 25px; /* accommodate the border */
}
.Menu ul li ul li ul
{
display: none;
position: absolute;
left: 200px;
top: -1px; /* accommodate the border */
}
.Menu ul li ul li ul li ul
{
display: none;
position: absolute;
left: 200px;
top: -1px; /* accommodate the border */
}
.Menu ul li ul li ul li ul li ul
{
display: none;
position: absolute;
left: 200px;
top: -1px; /* accommodate the border */
}
.Menu li a
{
display: block;
padding: 5px;
margin: 3px;
}
.Menu li:hover
{
background-color: #ccc;
}
.Menu li:hover > ul
{
display: block;
}
but when i hover over the third sub menu all the 4th and 5 th and 6 th sub menu open?
please help
here my code
.Menu
{
font-family: 'Open Sans' , sans-serif;
font-size: 12px;
}
.Menu
{
position: relative;
width: 200px;
background-color: #eee;
border-top: 1px solid white;
border-bottom: 1px solid white;
padding: 0;
margin: 0;
list-style: none;
}
.Menu ul
{
display: none;
position: absolute;
left: 0px;
top: -1px; /* accommodate the border */
margin: 0;
padding: 0;
}
.Menu ul li ul
{
display: none;
position: absolute;
left: 0px;
top: 25px; /* accommodate the border */
}
.Menu ul li ul li ul
{
display: none;
position: absolute;
left: 200px;
top: -1px; /* accommodate the border */
}
.Menu ul li ul li ul li ul
{
display: none;
position: absolute;
left: 200px;
top: -1px; /* accommodate the border */
}
.Menu ul li ul li ul li ul li ul
{
display: none;
position: absolute;
left: 200px;
top: -1px; /* accommodate the border */
}
.Menu li a
{
display: block;
padding: 5px;
margin: 3px;
}
.Menu li:hover
{
background-color: #ccc;
}
.Menu li:hover > ul
{
display: block;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER