如何在某物下定位並將其固定在另一個元素下

我想將下拉菜單正好放在按鈕下方。這是我的代碼，你可以看到程序下的子菜單並不完全在程序按鈕下。如何在某物下定位並將其固定在另一個元素下

這是我的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; 
}

來源

2013-01-13 Col1107

可能是棘手的UL的李下爲中心，因爲潛在的變化李寬度和一定絕對的ul的定位。添加該讓你那裏，如果li元素總是相同的寬度，反正：

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

http://jsfiddle.net/yhfYt

來源

2013-01-13 05:39:11 isherwood

謝謝！這工作：D – Col1107

如何在某物下定位並將其固定在另一個元素下

回答

相關問題