如何在菜单页面

我做的菜单图标的行创建的图标两排，我想知道是否有可能在一个行创建的图标在同一行的下面。如何在菜单页面

这是HTML我已经有图标顶行：

<body> 

<div id="demo"</div> 
<nav> 
<ul> 
<li><a href="#"><span>Home</span></a></li> 
<li><a href="#"><span>About</span></a></li> 
<li><a href="#"><span>Portfolio</span></a></li> 
<li><a href="#"><span>Contact</span></a></li> 
</ul> 
</nav> 
</div> 

</body>

这是CSS：

nav ul {list-style: none; overflow: hidden; position: relative;} 
nav ul li {float: left; margin: 0 20px 0 0;} 
nav ul li a {display: block; width: 120px; height: 120px;background-image:   url(icons.png); background-repeat: no-repeat;} 
nav ul li:nth-child(1) a {background-color: #5bb2fc;background-position: 28px 28px;} 
nav ul li:nth-child(2) a {background-color: #58ebd3;background-position: 28px -96px;} 
nav ul li:nth-child(3) a {background-color: #ffa659;background-position: 28px -222px;} 
nav ul li:nth-child(4) a {background-color: #ff7a85;background-position: 28px -342px;} 
nav ul li:nth-child(5) a {background-color: #3FC;background-position: 28px -342px;} 
nav ul li a span {font: 50px "Dosis", sans-serif; text-transform: uppercase;position: absolute; left: 600px; top: 29px;display: none;} 
nav ul li a:hover span {display: block;} 
nav ul li:nth-child(1) a span {color: #5bb2fc;} 
nav ul li:nth-child(2) a span {color: #58ebd3;} 
nav ul li:nth-child(3) a span {color: #ffa659;} 
nav ul li:nth-child(4) a span {color: #ff7a85;} 
nav ul li:nth-child(5) a span {color: #ff7a85;}

来源

2014-04-12 user3508694

只需要添加另外NAV） – mdesdev

当然，再添UL你已经有

的一个下

<body> 

<div id="demo"</div> 
    <nav> 
    <ul> 
     <li><a href="#"><span>Home</span></a></li> 
     <li><a href="#"><span>About</span></a></li> 
     <li><a href="#"><span>Portfolio</span></a></li> 
     <li><a href="#"><span>Contact</span></a></li> 
    </ul> 
    <ul> 
     <li><a href="#"><span>Home</span></a></li> 
     <li><a href="#"><span>About</span></a></li> 
     <li><a href="#"><span>Portfolio</span></a></li> 
     <li><a href="#"><span>Contact</span></a></li> 
    </ul> 
    </nav> 
</div> 

</body>

这里有一个的jsfiddle：http://jsfiddle.net/z7PLT/

来源

2014-04-12 20:04:50 hugmungus

谢谢你，伟大的工作！ – user3508694

很高兴能帮到你！如果您接受我的答案，如果它对您有用，我将不胜感激。 – hugmungus

如何在菜单页面

回答

相关问题