Hi,
I need help with horizontal dropdown css menu. It works fine with IE8, FF and Chrome.
My client is using IE 6. Here's link http://bluedataesl.com/ie.png
I am using this css menu http://sperling.com/examples/menuh/.
Menu at http://bluedataesl.com
I follow step by step instructions. but nothing seem to work for me.
Below is my CSS code which I am using for the menu.
#menuh-container
{
height: auto;
margin-left: 18px;
float: left;
}
#menuh
{
font-size: small;
font-family: arial, helvetica, sans-serif;
width:100%;
float:left;
}
#menuh img
{
border: 0px;
}
#menuh a
{
display:block;
/* border: 1px solid #555;
text-align: center;*/
white-space:nowrap;
margin:0;
/* padding: 0.3em; */
}
/*
#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest
{
color: white;
background-color: royalblue;
text-decoration:none;
}
#menuh a:hover /* menu on mouse-over
{
color: white;
background-color: cornflowerblue;
text-decoration:none;
}
*/
#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}
/* about us */
#menuh a.dpur /* attaches side-arrow to all parents */
{
padding: 10px;
background: #6c3883;
color: white;
text-decoration: none;
font-weight: bold;
}
#menuh a.dpur:hover
{
background:#520a70;
}
/* Admission */
#menuh a.pur /* attaches side-arrow to all parents */
{
padding: 10px;
background: #993ee3;
color: white;
text-decoration: none;
font-weight: bold;
}
#menuh a.pur:hover
{
background:#8a11ec;
}
/* Courses */
#menuh a.grn /* attaches side-arrow to all parents */
{
padding: 10px;
background-color: #81c443;
color: white;
text-decoration: none;
font-weight: bold;
}
#menuh a.grn:hover
{
background:#6ebb17;
}
#menuh a.grnsub /* attaches side-arrow to all parents */
{
padding: 10px;
background-color: #6ebb17;
color: white;
text-decoration: none;
font-weight: bold;
}
#menuh a.grnsub:hover
{
background:#81c443;
}
#menuh a.arrow, #menuh a.arrow:hover {
background-image: url("http://bluedataesl.com/images/rarrow.gif");
background-position: right center;
background-repeat: no-repeat;
}
/* Faqs */
#menuh a.red /* attaches side-arrow to all parents */
{
padding: 10px;
background: #cd5d5c;
color: white;
text-decoration: none;
font-weight: bold;
}
#menuh a.red:hover
{
background:#c23c3b;
}
#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width: auto; /* width of all menu boxes */
/* NOTE: For adjustable menu boxes you can comment out the above width rule.
However, you will have to add padding in the "#menh a" rule so that the menu boxes
will have space on either side of the text -- try it */
}
#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}
#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1.2em 0 0 -1em;
}
#menuh ul ul ul
{
top:0.2em;
left:100%;
}
div#menuh li:hover
{
cursor:pointer;
z-index:100;
}
div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}
div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}
/* End CSS Drop Down Menu */Anything will help. Thanks.
