如何使下拉菜单垂直

Question

我在页面顶部有一个水平菜单，我想要一个垂直下拉菜单显示在其中一个水平菜单项下面。菜单未连接...在页面顶部生成水平菜单的代码与我想在下面显示的垂直菜单的代码完全分开。

但是，菜单显示为水平。我需要做什么才能使每个菜单项垂直显示。

我在js fiddle

有一个小提琴

这里有一些代码，因为我必须在这里粘贴一些东西..

#dvMenu ul 
{
padding:0;
margin:0;
list-style: none;
position: relative;
}

如果你看小提琴，请运行它并点击＆＃39; Link Two＆＃39; - 出现子菜单 - 但它是水平的。我需要做些什么才能让它垂直显示？

Answer 1

从float: left删除#dvMenu li。

检查updated Fiddle。

Answer 2

如果将clear属性添加到样式表中，则浮动元素将无法并排浮动。

http://www.w3schools.com/cssref/pr_class_clear.asp

更新小提琴

#dvMenu ul li 
{
  float: left;
  clear:both;
  display: block;
  width: 140px;
  text-align: center;
  line-height: 21px;
}

http://jsfiddle.net/mc7kLc8c/2/

Answer 3

从您的css中的position:将absolute更改为relative

Answer 4

从display: inline;

中删除#navcontainer ul li