PDA

View Full Version : drop down menu with css


desertdirk
04-21-2006, 01:38 AM
I am working on a page that uses css for a dropdown menu. Works in firefox but not in IE. Here is the css code:
* {
margin:0; padding:0;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */


body {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
margin: 0;
padding: 0;
behavior:url(csshover.htc);
}

td {
font-family: Arial, Helvetica, sans-serif;
}

th {
font-family: Arial, Helvetica, sans-serif;
}
div#banner {
text-transform: capitalize;
color: #0033FF;
background-color: #CCCCCC;
text-align: center;
}
div#horizontalnav {
background-color: #999999;
width: 100%;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
font-size: 0.8em;
float: left;
}
body div#horizontalnav ul li ul {display:none;}
div#horizontalnav ul li:hover ul, div#horizontalnav ul li ul:hover {display:block;}


div#horizontalnav ul {
margin: 0 0 0 180px;

}
div#horizontalnav li {
list-style-type: none;
float: left;
border-right-color: #000000;
border-right-style: solid;
border-right-width: 1px;
display: block;
position: relative;
background-color: #999999;
}
div#horizontalnav ul li ul {
margin: 0px;
width: 12em;
position: absolute;
left: -1px;
}
div#horizontalnav ul li ul li {
width: 100%;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
border-right-color: #000000;
border-right-style: solid;
border-right-width: 1px;
}
div#horizontalnav a {
text-decoration: none;
padding: 0 6px;
display: block;
}
div#horizontalnav a:hover {
background-color: #666666;
}
div#horizontalmenu li:first-child {
border-top-color: #000000;
border-right-color: #000000;
border-bottom-color: #000000;
border-left-color: #000000;
border-top-style: solid;
border-top-width: 1px;
}

* html div#horizontalnav ul {
float:left;
border-left:1px solid #000000;
margin-left:90px;
}

* html div#horizontalnav ul li ul {
border-top:1px solid #000000;
border-left:0px;
}
and here is the link to the page I am working on:

http://www.jicarillamining.info/index1.php

If somebody could look at this I would appreciate it
Thanks
DD

domedia
04-21-2006, 02:37 PM
ul:hover
IE only supports :hover on anchor elements
You won't be able to pull off a drop down menu in CSS only that is supported in IE.
Here's one that nice:
http://www.alistapart.com/articles/dropdowns

desertdirk
04-21-2006, 07:42 PM
this bit of code in the "body" section is suppose to be a hack for that:
behavior:url(csshover.htc);

the csshover.htc is a bit of script designed to overcome the IE hover limitations. More here:
http://www.xs4all.nl/~peterned/hovercraft.html and it does work, so I must have some thing else wrong somewhere.
DD

desertdirk
04-21-2006, 07:54 PM
OK
Dom check it out. It works now in IE. I had the path to the htc file wrong. It works pretty well, and it is all in CSS. The drawback is that being a script, IE needs to be script enabled, and to cover all the bases, there should be an alternative.

Do you know if the hove behavior has been addressed in IE 7?

DD