Question

I am developing a HTML static site. I done everything almost. Finally, I need to have dropdown menu. I tried to add some extra code to have dropdown menu. But, it is affecting my existing style. Please, someone help to modify my piece of code to have a dropmenu.

Code:
http://www.jsfiddle.net/mohamedsaligh/mkYrt/

Help indeed.

Thanks 🙂

Answer 1

here is your code edited. It is a start and not a 100% but have up to 4 tiers. http://www.jsfiddle.net/JaLnp/1/

the javascript is for the Internet Explorers that can not handle the css :hover command outside a link.

---

CSS

/* menu setup */
#menu, #menu ul {
    padding: 0px;
    margin: 0px;
    list-style: none;
}

#menu a {
    display: block;
    text-decoration:none;
    width: auto;
    color:#ffffff;
    background-color: #790808;
}

#menu li {
    margin-right: 2.5px;
    margin-left: 2.5px;
    padding:5px;
    float: left;
    width: auto;
    color:#ffffff;
    background-color: #790808;
}

/* first level of menu drop down */
#menu li ul {
    position: absolute;
    width: 150px;
    left: -999em;
}

#menu li:hover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

#menu li ul ul {
    margin: -1em 0 0 85px;
    color:#ffffff;
    background-color: #790808;
}

#menu, #menu ul {
    padding: 0;
    margin: 0;
    list-style: none; 
    line-height: 1;
    color:#ffffff;
    background-color: #790808;
}

/* second level of menu drop down */
#menu li:hover ul ul, #menu li.sfhover ul ul {
    left: -999em;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

/* third level of menu drop down */
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul {
    left: -999em;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

/* forth level of menu drop down */
#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li:hover ul ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul, #menu li.sfhover ul ul ul ul {
    left: -999em;
    color:#ffffff;
    background-color: #790808;
}

#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li li li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul, #menu li li li li.sfhover ul {
    left: auto;
    color:#ffffff;
    background-color: #790808;
}

---

Javascript

// drop down list functionality for Internet Explore
// IE does not support the :hover in anything but links
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);