0
雖然我已經瞭解了更多關於CSS，我一直在尋找這post on creating a drop-down menu和code demo在這裏。職位：絕對在這個CSS下拉菜單
讀取如在CSS specification描述position: absolute;應該如何表現，它指出：
在絕對定位模型中，一個盒子被明確地相對於它的包含塊的偏移量。它完全從正常流程中移除（它對後來的兄弟姐妹沒有影響）。
和containing block確定這種方式：
如果元素「的位置是：絕對」，包含塊由具有比靜態以外的位置最近的祖先建立...如果有是不是這樣的祖先，包含塊是最初的包含塊。
在菜單上的鏈接文章中，它沒有解釋在這種情況下絕對定位的工作原理。首先，沒有偏移來定位元素。而且，除非我失去了一些東西，在我看來，好像沒有其他網頁元素除默認以外的任何position: static;
我的期望那麼是不是使用position:absolute;的下拉菜單將顯示爲下拉的一部分，但應該可以相對於頁面進行定位，因此可能出現在左上角，完全沒有流動性。
我的假設錯了。那麼，如何解釋父菜單項正下方的位置？
HTML：
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Tutorial #[email protected]@</a></li>
<li><a href="#">Tutorial #2</a></li>
<li><a href="#">Tutorial #3</a></li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news"><a href="#">Newsletter</a>
<ul>
<li><a href="#">News #1</a></li>
<li><a href="#">News #[email protected]@@</a></li>
<li><a href="#">News #3</a></li>
</ul>
</li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
</header>
</body>
CSS：
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
@media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}