Question

我已设法创建此导航菜单，但菜单项上的间距已关闭。同样在次要名单上，由于其中一项，我不得不将它们放宽。有没有办法让宽度根据最长项目的长度而变化。

<!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>

Answer 1

这解决了它。虽然没有测试过跨浏览器。使用此方法还会删除ul

上添加的width属性

http://jsfiddle.net/uNNKd/

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

修改

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

那也行。

Answer 2

试试这样：

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

:: EDIT ::

这是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;
}

#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;
}

CSS下拉菜单间距

2 个答案: