CSS Horizontal sub menu - IE 6,7 both dont working, tried with whatever hover.
- by SHAKTI
I'm not expert about css menus. But I know basic system to make css menu.
I used this system before and works, but this time it is not working.
The site is http://www.uniethos.com. Please check this site
This menu works with all other latest Browsers. But not with IE 6 & 7. I know IE6 don't support hover except anchor. So before I was using Whatever Hover. But this time it is not working and even with IE7. I don't know why its happening. May be there could be some problem with my css. Please check the css.
If you don't have IE 6 or 7 installed you can run one from http://spoon.net/browsers/. Require to install one plugin.
The CSS I'm using for the menu is
.glossymenu{
background: #B4B3B3;
height: 30px;
width: 100%;
padding: 0;
margin: 0;
display:inline-block;
position:relative;
}
.glossymenu ul
{
list-style: none;
padding: 0px;
margin: 0;
padding-left: 0px;
}
.glossymenu li ul
{
display:none;
position:absolute;
width: 80%;
top:30px;
left:0px;
background-color:#5B0C10;
border:0px;
z-index: 99;
}
.glossymenu li li a
{
padding: 0px 10px 0px 10px;
}
.glossymenu li li a:hover
{
background : #871016;
}
.glossymenu li{
float:left;
padding: 0;
}
.glossymenu li a{
float: left;
display:block;
position:relative;
color:#FFF;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 8px; /*Padding of menu items*/
}
.glossymenu li.current a, .glossymenu li a:hover{
color: #FFF;
background: #5B0C10;
background-position: left;
text-decoration: none;
}
.glossymenu li a:visited{
text-decoration: none;
}
.glossymenu ul li:hover ul
{
display: block;
}
