如何使下拉菜单垂直

Question

I have a horizontal menu at the top of the page and I want a vertical drop down menu to appear below one of the horizontal menu items. The menus are not connected ... the code that generates the horizontal menu at the top of the page is completely separate from the code for the vertical menu I want to appear below.

But, the menu is appearing horizontal. What do I have to do to make each menu item appear vertically.

I have a fiddle at js fiddle

Here is a bit of the code as I have to paste something here ..

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

If you look at the fiddle, run it and click on 'Link Two' - the sub-menu appears - but it is horizontal. What do I have to do to get it to appear vertically?

Answer 1

Remove the float: left from #dvMenu li .

Check your updated Fiddle .

Answer 2

If you add the clear property to your stylesheet, then the floating elements won't be able to float side by side anymore.

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

updated fiddle

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

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

Answer 3

更改position:从CSS中的relative position:更改为absolute position:

Answer 4

remove display: inline; from #navcontainer ul li