如何把导航栏二级下拉菜单原横着排列的改为垂直下来排列,原来css代码如下,要怎样更改?0
横排的下拉二级菜单
改为如下的这种方式垂直下拉菜单,样式还是跟上面一样,只是变下方向。
原始代码如下#nav{ width:960px; height:43px; font-weight:bold; background:url(../images/nav_bg.jpg) repeat-x; position:relative; z-index:10;}.nav_lft{ width:5px; height:43px; background:url(../images/nav_lft.jpg); float:left;}#nav ul{ width:950px; height:43px; line-height:43px; float:left;}#nav a{ display:block !important;}#nav ul li{ float:left; list-style:none; position:relative; width:118px; background:url(../images/nav_line.jpg) no-repeat top left;}#nav ul li.nobg{ background:none;}#nav ul li a{ font-size:14px; text-align:center;}#nav ul li a:hover{ background:url(../images/nav_hover.jpg) no-repeat center; color:#fff;}#nav ul li a.selt{ width:118px; background:url(../images/nav_hover.jpg) no-repeat center; color:#fff;}#nav ul ul a:hover { color:#f60;}#nav ul ul{ visibility:hidden; position:absolute; left:0px; top:43px;height:30px;}#nav ul li:hover ul.second, #nav ul a:hover ul.second { visibility:visible; }#nav ul ul li{ text-align:left; border-right:none; float:left; width:85px; height:30px;}#nav ul ul li a{ font-weight:100; width:85px; height:30px; line-height:30px; font-size:12px; background:url(../images/nav_li_ul_bg.jpg) repeat-x;}#nav ul ul li a:hover{ color:#f60; background:#fff;}#nav .third{ top:0px; left:100px; width:115px;}#nav ul ul li:hover ul.third, #nav ul ul a:hover ul.third { visibility:visible; }#nav ul ul ul.third{visibility:hidden; position:absolute; left:0px; top:30px;height:30px;}#nav ul ul ul.third li{ text-align:left; border-right:none; float:left; width:85px; height:30px;}#nav ul ul ul.third li a{ font-weight:100; color:#333; height:30px; line-height:30px; font-size:12px; background:url(../images/nav_li_ul_bg.jpg) repeat-x;}#nav ul ul ul.third li a:hover{ color:#f60; background:#fff;}#nav ul ul ul li a{ width:110px;}#nav table{ border-collapse:collapse; }.nav_rgt{ width:5px; height:43px; background:url(../images/nav_rgt.jpg); float:right;}/*#nav ul{ width:950px; height:43px; line-height:43px; float:left;}#nav ul li{ width:118px; float:left; text-align:center; background:url(../images/nav_line.jpg) no-repeat top left;}#nav ul li.nobg{ background:none;}#nav ul li a{ display:block; font-size:14px;}#nav ul li a:hover{ background:url(../images/nav_hover.jpg) no-repeat center; color:#fff;}#nav ul li a.selt{ background:url(../images/nav_hover.jpg) no-repeat center; color:#fff;}*/