Amrinder wrote:
> Hi
>
> I am stuck with dropdown menus. They are working fine in IE-7, and firefox
> and the evil IE6 doesn't render it.
> Should I use javascript or CSS for this.
>
> Here is my code:
>
> ** XHTML code **
> <div id="main_nav">
> <ul id="menu">
> <li id="nav_home" class="menu_active" ><a>Home</a></li>
> <li><a href="about.html">About Us</a></li>
> <li><a href="products.html">Retail Products</a>
> <ul>
> <li><a href="#">Milk Powders</a></li>
> <li><a href="#">UHT Milk</a></li>
> <li><a href="#">Butter</a></li>
> <li><a href="#">Cheese</a></li>
> <li><a href="#">Liquid Products</a></li>
> <li><a href="#">Juices</a></li>
> </ul>
> </li>
> <li><a href="ingredients.html">Dairy Ingredients</a>
> <ul>
> <li><a href="#">Milk Powder</a></li>
> <li><a href="#">Whey Powder</a></li>
> <li><a href="#">Milk Proteins</a></li>
> <li><a href="#">Butter Fat Products</a></li>
> <li><a href="#">Cheese</a></li>
> </ul>
> </li>
> <li><a href="importexport.html">Exports/Imports</a></li>
> <li id="nav_contact"><a href="contact.html">Contact Us</a></li>
> </ul>
>
> <div class="clear"></div>
> </div>
> <!--End main_nav-->
>
>
> ** CSS Code **
>
> #main_nav {
> clear: both;
> position: relative;
> margin-top: 3px;
> border: 1px solid red;
> }
>
> #menu li {
> float: left;
> position: relative;
> }
> #menu li ul {
> position: absolute;
> left: 0px;
> top: 31px;
> display: none;
> background-color: #309DCF;
> }
>
> #menu a {
> background: #309DCF url(../images/menubck_18.gif) scroll repeat-x left top;
> }
>
> li ul li {
> background: url(../images/menubck_18.gif) repeat-x left top;
> border:1px solid #fff;
> }
> ul li a {
> display: block;
> text-decoration: none;
> padding: 6px 40px;
> border-left-width: 1px;
> border-left-style: solid;
> border-left-color: #FFF;
> }
> li li a {
> padding:4px 5px 4px 37px;
> width:120px;
> border-left:none;
> }
> ul #nav_home a {
> width: 30px;
> border-left: none;
> }
>
> * html li a {
> width:auto;
> }
>
> /* Fix IE. Hide from IE Mac \*/
> * html ul li { float: left;}
> * html ul li a {height:1%;}
> /* End */
>
> #menu li:hover ul, #menu li.over ul {
> display:block;
> }
>
> #menu a:hover {
> background-attachment: scroll;
> background-image: url(../images/menuhoverbck_18.gif);
> background-repeat: repeat-x;
> background-position: left top;
> background-color: #de5a03;
> }
>
> ** javascript code **
>
> startList = function() {
> if (document.all&&document.getElementById) {
> navRoot = document.getElementById("nav");
> for (i=0; i<navRoot.childNodes.length; i++) {
> node = navRoot.childNodes[i];
> if (node.nodeName=="LI") {
> node.onmouseover=function() {
> this.className+=" over";
> }
> node.onmouseout=function() {
> this.className=this.className.replace(" over", "");
> }
> }
> }
> }
> }
> window.onload=startList;
>
>
You need to change you main <ul> id to "nav" or change the JS navroot
variable declaration line to read:
navRoot = document.getElementById("menu");
This will allow the JavaScript to work properly. As it stands, the
script can't target the proper DOM node.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
