css怎么修改下拉列表样式垂直高度,如何把导航栏二级下拉菜单原横着排列的改为垂直下来排列,原来css代码如下,要怎样更改?...

如何把导航栏二级下拉菜单原横着排列的改为垂直下来排列,原来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;}*/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值