0

我想在按钮下方放置一个下拉菜单。这是我的代码，您可以看到程序下的子菜单不完全位于程序按钮下。

这是我的 HTML 代码：

 <!Doctype>
<html>
<head>
    <title>HelpHelp | Home</title>
    <link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
    <div id="banner">
        <a href="index.html" title="Go Home"><img src="logo.psd" alt="" height="70px" /></a>
        <h3>Debugging HTML Since 2012</h3>
    </div>
    <div id="nav">
        <ul>
            <li>  <a href="index.html">Home</a>  </li>
            <li>  <a href="about.html">About</a>  </li>
            <li>  <a href="http://www.htmlhelp.cu.cc">Forum</a>  </li>
            <li>  <a href="#">Code</a>  </li>
            <li>  <a href="#">Programs</a>
                <ul>
                    <li><a href="#">Windows</a></li>
                    <li><a href="#">Macintosh</a></li>
                </ul>
            </li>
            <li>  <a href="#">Tutorials</a>  </li>
        </ul>    
    </div> <!-- End Nav Div -->
</body>
</html>

这是我的 CSS 代码：

/* CSS Document */
body{
    margin:0px;
    background: -webkit-linear-gradient(#f1f0f0 0%, #dadada 100%);    
}
#banner{
    border-bottom:2px solid #000;
    background: -webkit-linear-gradient(#6e90e6 0%, #77a3f4 100%);
    height: 100px;
}
#banner img{
    position: relative;
    top:5px;
    left: -10px;
}
#banner h3{
    font-family: cursive;
    position:absolute;
    top: 0px;
    left: 250px;
    font-style: italic;
    font-weight: bold;
    font-size: 24px;
    text-shadow: 1px 1px 1px #fff;
}

#nav{
    border-bottom:1px solid #000;
    padding:0px;
    width:100%;
    background: #ff8c00;
}
#nav ul{
    list-style-type: none;
    margin:0px auto;
    text-align:center;
    padding-left:20px;
    position: relative;
}
#nav li{
    display:inline-block;
    padding:10px;
    width:100px;
    background:#ff8c00;
    border-right:1px solid #fff;
}
#nav a{
    padding:5px;
    text-align: center;
    background:#ff8c00;
    color: #000;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 15px;
}
#nav a:hover{
    border-radius: 5px;
    box-shadow: -1px -1px 1px #000;
    background:#e27c0;
    padding-left:10px;
    padding-right:10px;
}
#nav ul ul{
    visibility: hidden;
    position:absolute;
    left:64%;
    top: 37px;
    padding: 0px;
    border:1px solid #000;
    border-top: 1px solid transparent; 
}
#nav ul li ul li{
    background: transparent;
    float:none;
    display:block;
    border-right:none;
    border-bottom:1px solid #fff;
}
#nav ul li:hover ul{
    visibility: visible;
    background: #ff8c00;
}
#about_title{
    width:100%;
    height:45px;
    border-bottom:1px solid #bfbfbf;
}
#about_who{
    width:250px;
    padding:10px;
    border: 1px solid#000000; 
    margin-left:15%;
    position: relative;
    top: 10px;
}
#about_what{
    width:250px;
    padding:10px;
    border: 1px solid #000000; 
    margin-left:15%;
    position: relative;
    top: 10px;
}
4

1 回答 1

1

由于 li 宽度可能会发生变化，并且 ul 必须绝对定位，因此将 ul 置于 li 下方可能会很棘手。如果 li 元素总是相同的宽度，添加这个可以让你到达那里，无论如何：

#nav li {position: relative;}
#nav ul li:hover ul {position: absolute; left: -3px;}

http://jsfiddle.net/yhfYt

于 2013-01-13T05:39:11.440 回答