Hi,
I try to implement multilevel menu using CSS and HTML. But I have the following problem.
When I selected "About" parent menu tab, it is working properly (see screenshot1)
But when I select submenu item "What is?", it is not working properly (see screenshot2)
Here is part of my css style sheet:
.sf-menu li {
float: left;
position: relative;
background: url("/portals/0/Images/righttab.png") no-repeat right top;
}
.sf-menu a {
display: block;
position: relative;
background: url("/portals/0/Images/lefttab.png") no-repeat left top;
}
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #FFFFFF;
}
.sf-menu li li {
background: #2B4870;
}
.sf-menu li li a{
background: #2B4870;
}
.sf-menu li li li {
/*background: #E600FF;*/
}
/* selected */
.sf-menu li:hover {
/*background: #626B8C;*/
float: left;
position: relative;
background: url("/portals/0/Images/selectedrighttab.png") no-repeat right top;
outline: 0;
}
.sf-menu li.sfHover {
/*background: #626B8C;*/
outline: 0;
}
.sf-menu a:focus {
display: block;
position: relative;
/* background: url("/portals/0/Images/selectedlefttab.png") no-repeat left top; */
/* background: #626B8C; */
outline: 0;
}
.sf-menu a:hover {
display: block;
position: relative;
background: url("/portals/0/Images/selectedlefttab.png") no-repeat left top;
outline: 0;
}
.sf-menu li li a:hover {
background: #626B8C;
outline: 0;
}
/*
.sf-menu a:active {
background: #626B8C;
outline: 0;
} */
Anyone know what is wrong with my stylesheet?
Thanks,
R