CODEWITHSUNDEEP
htmlcss
Ged
Ged

Reputation: 1

CSS Dropdown Menu Spacing

I have managed to create this navigation menu however the spacing on the menu items is off. Also on the secondary lists I've had to make them wide because of one of the items. Is there a way to get the width to vary depending on the length of the longest item.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Menu</title> 
<style type="text/css"> 

body {
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
}

#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

#nav a {
    display: block;
    width: 10em;
}

#nav li { /* all list items */
/* The sum of the next two lines creates the nav bar height*/
    padding-top:12px;
    height: 28px;
    float: left;
    background: #f15a22;
    width: 7em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
    position: absolute;
    background: #f15a22;
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
    top: 45px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/
}

/*--- from Storm3y's code ---*/
#nav li a {
    color: #f9f7ee;
    background-image:url(images/bullet2.gif);
    background-position:0% 50%; 
    background-repeat:no-repeat;
    padding-left: 16px;
    text-decoration: none;
}

#nav li a:hover {
    background-image:url(images/bulletsolid2.gif);
    background-position:0% 50%; 
    background-repeat:no-repeat;
    padding-left: 16px;
    color: #f9f7ee;
}


</style> 

<script type="text/javascript"><!--//--><![CDATA[//><!--

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);

//--><!]]></script> 

</head> 
<body> 



<ul id="nav"> 
    <li><a href="#">About</a> 
    </li> 
    <li><a href="#">Teaching</a> 
        <ul> 
            <li><a href="#">Philosophy</a></li> 
            <li><a href="#">Piano</a></li> 
            <li><a href="#">Guitar</a></li> 
            <li><a href="#">Drums</a></li> 
            <li><a href="#">Theory</a></li> 
        </ul> 
    </li> 
    <li><a href="#">Performing</a> 
        <ul> 
            <li><a href="#">Classical Piano</a></li> 
            <li><a href="#">Jazz Piano</a></li> 
            <li><a href="#">The Ginger Nuts</a></li> 
            <li><a href="#">The Legion Of Doom</a></li> 
        </ul>    
    </li>    
    <li><a href="#">Media</a> 
        <ul> 
            <li><a href="#">Photos</a></li> 
            <li><a href="#">Audio</a></li> 
            <li><a href="#">Video</a></li> 
            <li><a href="#">Articles</a></li> 
        </ul>   
    </li> 
    <li><a href="#">Blog</a> 
    </li> 
    <li><a href="#">Links</a> 
    </li>        
    <li><a href="#">Contact</a> 
    </li> 

    <!-- etc. --> 

</ul> 


</body> 
</html>

Upvotes: 0

Views: 5954

Answers (2)

Andres I Perez
Andres I Perez

Reputation: 75379

Try it like this:

http://jsfiddle.net/andresilich/TMrpA/2/

::EDIT::

Here is the CSS Code:

body {
    font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
}

#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

#nav a {
    display: block;
}

#nav li { /* all list items */
/* The sum of the next two lines creates the nav bar height*/
    padding:0 20px;
    height: 40px;
    line-height:40px;
    float: left;
    background: #f15a22;
    position:relative;
}

#nav li li {
    float:none;
}

#nav li ul { /* second-level lists */
    position: absolute;
    background: #f15a22;
    width: 10em; /* controls width of background colour of second-level list - currently set to width of longest entry */
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: 0;
    top: 40px; /* drops the second list below the nav bar so it doesn't cut off the bottom of any text from the main nav*/
}

/*--- from Storm3y's code ---*/
#nav li a {
    color: #f9f7ee;
    background-image:url(images/bullet2.gif);
    background-position:0% 50%;
    background-repeat:no-repeat;
    text-decoration: none;
}

#nav li a:hover {
    background-image:url(images/bulletsolid2.gif);
    background-position:0% 50%;
    background-repeat:no-repeat;
    color: #f9f7ee;
}

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78520

This fixes it. Haven't tested cross-browser though. With this method also remove your added width attribute on the ul

http://jsfiddle.net/uNNKd/

#nav li li {
    clear: both;
    width: auto;
}

EDIT

#nav li li {
    float: none;
    width: auto;
}

That will also work.

Upvotes: 2

Related Questions