如何创建与使用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; 
}​