带有水平子菜单的CSS Jquery垂直导航菜单
我想创建一个这样的导航菜单：
|main-item1| |main-item2| |sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4| 我现在看到的是：
|main-item1| |main-item2| |sub-item1| |sub-item2| |sub-item3| |main-item3| |main-item4|
我在stackoverflow上找到了这样的另一个问题，但我无法适应代码。
我有的HTML代码是这样的：
这是css：
#mainmenu { position: fixed; left: 20px; top: 50%; z-index: 999999; margin-top:-200px; } #mainmenu li { height: 40px; margin: 5px; position: relative; } #mainmenu a { background: none repeat scroll 0 0 #333; color: #fff; display: block; font-family: Folio; font-size: 30px; padding: 2px 15px; text-decoration: none; text-transform: uppercase; width: 160px; height: 40px; /*background: url(Images/dotnav.png) 0 100% no-repeat;*/ /*text-indent: -10000px;*/ overflow: hidden; } #mainmenu a:hover, #mainmenu li.active a { background-position: 0 0; } .submenu { list-style-type: none; position:relative; float:left; } .submenu li { display: inline; float:left; position:relative }
可以使用一些jquery插件，也因为我想在hover上添加一些效果，但我认为最好先用css对齐所有内容。
谢谢
试试这个：
#mainmenu>li { height: 40px; margin: 5px; position: relative; clear:both
}
并浮动到链接：
#mainmenu a { float:left; background: none repeat scroll 0 0 #333; color: #fff; display: block; font-family: Folio; font-size: 30px; padding: 2px 15px; text-decoration: none; text-transform: uppercase; width: 160px; height: 40px; overflow: hidden; }
这是你可能想要的：
css：
#mainmenu { position: fixed; left: 20px; top: 50%; z-index: 999999; margin-top:-200px; } #mainmenu li { height: 40px; margin: 5px; position: relative; } #mainmenu a { background: none repeat scroll 0 0 #333; color: #fff; display: block; font-family: Folio; font-size: 30px; padding: 2px 15px; text-decoration: none; text-transform: uppercase; width: 160px; height: 40px; /*background: url(Images/dotnav.png) 0 100% no-repeat;*/ /*text-indent: -10000px;*/ overflow: hidden; } #mainmenu a:hover, #mainmenu li.active a { background-position: 0 0; } .submenu { list-style-type: none; position:relative; float:left; } .submenu li { display: inline; float:left; position:relative; } #mainmenu .submenu li{ margin:0px; }
和HTML
在html中我添加了“https://stackoverflow.com/questions/6775452/css-jquery-vertical-navigation-menu-with-horizontal-submenus/servizi”浮动左侧和css我添加：
#mainmenu .submenu li{ margin:0px; }
所以他们现在处于同一水平。