I am using css for display drop down menu. But the menu displays in Firefox browser. The same style not display in IE6.
What are some solutions?
What are some solutions?
#menu {
float: left;
height: 32px;
padding-top: 1px;
padding-bottom: 1px;
border-left: 1px solid #181818;
z-index: 20;
}
#menu li {
float: left;
display: block;
height: 32px;
border-right: 1px solid #181818;
}
#menu li ul li {
height: 24px;
border-right: 0;
border-bottom: 1px solid #181818;
width: 100%;
}
#menu li a {
display: block;
padding-left: 15px;
padding-right: 15px;
line-height: 32px;
font-size: 11px;
font-weight: bold;
color: #181818;
text-decoration: none;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: url(images/menu4.jpg) repeat-x;
}
#menu li a:hover {
background: url(images/menu4.jpg) repeat-x;
color: #5FB404;
}
#menu li.current_page_item a {
background: url(images/menu4.jpg) repeat-x;
color: #181818;
border-left: 1px solid #088A08;
}
#menu li.current_page_item a:hover {
background: url(images/menu4.jpg) repeat-x;
color: #D0F5A9;
}
#menu ul {
display: none;
z-index: 99;
position: absolute;
}
#menu ul li a {
display: block;
background: #5FB404;
}
#menu li ul a:hover {
display: block;
background:#5FB404;
}
#menu ul a {
display: block;
}
#menu ul ul {
margin-top: -27px;
display: none;
margin-left: 198px;
position: absolute;
border-left: 1px solid #181818;
border-right: 1px solid #181818;
}
#menu li:hover ul ul {
display: none;
}
#menu li:hover ul {
display: block;
}
#menu ul li:hover ul {
display: block;
}
#menu li ul li {
display: block;
width: 100%;
}
#menu li.page_item ul {
border-top: 2px solid #181818;
width: 200px;
}
#menu li.page_item a {
display: block;
}
#menu li.page_item a:hover {
display: block;
}
#menu li.page_item ul li a {
display: block;
text-align: left;
height: 24px;
line-height: 24px;
border-right: 1px solid #181818;
border-left: 1px solid #181818;
background: #fff;
padding-left: 15px;
padding-right: 15px;
text-transform: uppercase;
font-size: 10px;
font-weight: bold;
color: #333;
background: url(images/menu4.jpg) repeat-x;
text-decoration: none;
}
#menu li.page_item ul li a:hover {
display: block;
text-align: left;
height: 24px;
line-height: 24px;
border-right: 1px solid #181818;
border-left: 1px solid #181818;
background: #FFF;
padding-left: 15px;
padding-right: 15px;
text-transform: uppercase;
font-size: 11px;
font-weight: bold;
background: url(images/menu4.jpg) repeat-x;
color: #333;
}
Comment