纯CSS子垂直

我得到这个代码CSS3菜单：纯CSS子垂直

HTML：

<div id="navi"> 
    <ul> 
     <li><a href="#">First</a></li> 
     <li class="active"><a href="#">Second</a> 
      <ul class="child"> 
       <li><a href="#">First child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Third</a></li> 
    </ul> 
</div>

CSS：

#navi { 
    height: auto; 
    width: auto; 
} 
#navi ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 
#navi ul li { 
    float: left; 
    position: relative; 
} 
#navi ul li a { 
    line-height: 30px; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    width: 100px; 
    height: 30px; 
    border: thin solid #999; 
    color: #FFF; 
    background-color: #0CF; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
#navi ul li a:hover { 
    background-color: #0C3; 
} 
#navi ul li ul { 
    position: absolute; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
    height: 0px; 
    overflow:hidden; 
} 
#navi ul li:hover ul { 
    height: 100px; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
}

小提琴Here

现在我想的是，菜单不是水平的。它应该是垂直的。我试图删除float:left;，但是然后子菜单不显示。子菜单应该按下下面的所有菜单项。有什么建议么？会很好。

来源

2013-10-18 Tyler

你为什么不用这个手风琴与jquery – 2013-10-18 06:05:53

我不知道jQuery。但是，每个建议（即使使用jQuery）都是受欢迎的。我会看看每一个建议:) – Tyler

你想通过pussing其他主要的导航元素打开子菜单？或在其右侧 – 2013-10-18 06:14:35

如果你这样做，它会给它完美的外观和向下推，你nav三项。这个高度添加到您的特定类：

#navi ul li:hover ul { 
    height:32px; 
}

但是，如果你在其他主要nav项目与他们不同的项目，其他的子菜单项，那么你应该让类的所有具体要素，并根据他们给予他们高度。看看这个：

#navi ul li:hover .class { 
    height:64px; /*for two items in sub menu and like this for other*/ 
}

来源

2013-10-18 06:23:10

啊谢谢你:)作品！ – Tyler

它会工作，但可以通过更改子菜单的位置来完成:-) –

雅也可以这样做。 – 2013-10-18 06:41:03

你的CSS：

#navi { 
    height: auto; 
    width: auto; 
} 
#navi ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 
#navi ul li { 
    position: relative; 
} 
#navi ul li a { 
    line-height: 30px; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    width: 100px; 
    height: 30px; 
    border: thin solid #999; 
    color: #FFF; 
    background-color: #0CF; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
#navi ul li a:hover { 
    background-color: #0C3; 
} 
#navi ul li ul { 
    position:absolute; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
    height: 0px; 
    overflow:hidden; 
} 
#navi ul li:hover ul { 
    position:absolute; 
    left: 100px; 
    top: 0px; 
    height:50px; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
}

您的HTML：

<div id="navi"> 
    <ul> 
     <li><a href="#">First</a></li> 
     <li class="active"><a href="#">Second</a> 
      <ul class="child"> 
       <li><a href="#">First child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Third</a></li> 
    </ul> 
</div>

复制粘贴此编码。它的工作。我想你想要这个垂直菜单栏？

来源

2013-10-18 06:17:22 Karuppiah

没有子菜单不应该显示在菜单项的右侧。但感谢您的帮助:) – Tyler

<!DOCTYPE html> 
<html> 
<head> 
<style> 
#navi { 
    height: auto; 
    width: auto; 
} 
#navi ul { 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
} 
#navi ul li { 

} 

#navi ul li a { 
    line-height: 30px; 
    text-decoration: none; 
    text-align: center; 
    display: block; 
    width: 100px; 
    height: 30px; 
    border: thin solid #999; 
    color: #FFF; 
    background-color: #0CF; 
    -webkit-transition: all 1s; 
    -moz-transition: all 1s; 
    -ms-transition: all 1s; 
    -o-transition: all 1s; 
    transition: all 1s; 
} 
#navi ul li a:hover { 
    background-color: #0C3; 
} 
#navi ul li ul { 
    position: relative; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
    height: 0px; 
    overflow:hidden; 
} 
#navi ul li:hover ul { 
    height: 100px; 
    -webkit-transition: height 1s linear 0s; 
    -moz-transition: height 1s linear 0s; 
    -ms-transition: height 1s linear 0s; 
    -o-transition: height 1s linear 0s; 
    transition: height 1s linear 0s; 
} 
</style> 
</head> 
<body> 
<div id="navi"> 
    <ul> 
     <li><a href="#">First</a></li> 
     <li class="active"><a href="#">Second</a> 
      <ul class="child"> 
       <li><a href="#">First child</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Third</a></li> 
    </ul> 
</div> 

</body> 
</html>

入住这

来源

2013-10-18 06:19:09

是的，但为什么整个菜单变得如此之大？ ** [小提琴]（http://jsfiddle.net/FhFya/）** – Tyler

我已经更新了小提琴。请立即检查。 –

回答

相关问题