如何創建與使用CSS

Question

我想換一個清單是垂直的水平的子菜單，但改變了很多的CSS代碼內部列表應該去水平會垂直和我不能找到原因後一個嵌套的垂直菜單。

nav ul ul { display: none;} 

nav ul li:hover > ul { display: block; } 

nav ul { 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display:list-item; 
    } 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 
    nav ul li { 
    float: left; 
} 

nav ul li:hover { 
    background: #4b545f; 
    background: linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); 
    background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); 
} 

nav ul li:hover a { 
    color: #fff; 
} 

nav ul li a { 
    display: block; padding: 25px 40px; 
    color: #757575; text-decoration: none; 
} 

nav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 

nav ul ul li { 
    display:list-item; 
    float: right; 
    border-top: 1px solid #6b727c; 
    border-bottom: 1px solid #575f6a; 
    position: relative; 
} 

nav ul ul li a { 
    padding: 15px 40px; 
    color: #fff; 
} 

nav ul ul li a:hover { 
    background: #4b545f; 
} 

nav ul ul ul { 
    position: absolute; left: 100%; top:0; 
} 

這是HTML標記：

<nav> 
    <ul> 
     <li> 
      <a href="Documents.php">Products</a> 
      <ul> 
       <li><a href="Documents.php?cat=Political">Books</a></li> 
       <li><a href="Documents.php?cat=History">Magazines</a></li> 
       <li><a href="Documents.php?cat=Culture">MusicCd's</a></li> 
      </ul> 
     </li> 
     <li><a href="html/about.html">ABOUT</a></li> 
     <li><a href="html/contact.html">CONTACT</a></li> 
    </ul> 
</nav> 

Answer 1

所以，你要父菜單項來垂直放置（下井對方）和嵌套子菜單可以水平放置（以去彼此的左邊）。

想這是我們的HTML標記：

<nav> 
    <ul> 
     <li>Parent 1 
      <ul> 
       <li>Child 1</li> 
       <li>Child 2</li> 
       <li>Child 3</li> 
      </ul> 
     </li> 
     <li>Parent 2 
      <ul> 
       <li>Child 4</li> 
       <li>Child 5</li> 
       <li>Child 6</li> 
      </ul> 
     </li> 
    </ul> 
</nav>​ 

父菜單項，我們只是告訴他們定位到clear他們left。所以沒有元素可以浮動到他們的權利：。

nav > ul > li { 
    clear: left; 
} 

（也注意到，僅指定我們已經使用>的Child combinator父菜單項，以便這種風格不會影響內部li唯一父li小號弄該CSS屬性）

然後我們隱藏子菜單項，並讓他們只只出現在鼠標懸停：

nav > ul > li ul { 
    display: none; 
} 

nav > ul > li:hover ul { 
    display: block; 
} 

的最後一件事就是告訴子菜單項浮動到左並顯示爲內聯元素。這樣我們就可以得到所需的水平導向的子菜單項。

nav > ul > li ul li { 
    float: left; 
    display: inline-block; 
}​ 

這裏我們來定位子菜單相對於父母的棘手部分。這樣做，我們使用absolute定位爲兒童和設置position:relative他們的父母讓孩子得到相對定位到這個父不是全局父親是body元素

nav > ul > li { 
    position: relative; 
} 

nav > ul > li ul { 
    position: absolute; 
    left: 100px; 
    top: 0; 
} 

這裏是一個工作演示：http://jsfiddle.net/VCX7T/6/這是完整的CSS代碼：

nav > ul > li { 
    clear: left; 
    position: relative; 
} 

nav > ul > li ul { 
    display: none; 
} 

nav > ul > li:hover ul { 
    display: block; 
} 

nav > ul > li ul { 
    position: absolute; 
    left: 100px; 
    top: 0; 
} 


nav > ul > li ul li { 
    float: left; 
    display: inline-block; 
}​