如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-21 09:28:441814검색
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE><style type="text/css"> .menu{ border=none; font-family:verdana,geneva,arial; font-size:14px; color:#8e8e83; } .menu ul{ background:url(img/menu-bg.gif) top left repeat-x; /*横向平铺*/ height:43px; list-style:none; } .menu li{ float:left; } .menu li a{ color:#666666; display:block; font-weight:bold; line-height:43px; padding:0 25px; text-align:center; text-decoration:none; } .menu li a:hover{ color:#000000; } /*定义二级菜单样式规则*/ .menu li ul{ background:#e0e0e0; /*设置二级菜单背景色*/ border-left:2px solid #007962; /*设置菜单左边框样式和颜色.*/ display:none; /*不再设置为块状显示效果*/ height:auto; position:absolute; width:130px; z-index:200; margin:0px; } .menu li:hover ul{ display:block; /*鼠标移动到上面的时候为块状显示。*/ } .menu li li{ display:block; width:130px; } .menu li ul a{ display:block; font-size:12px; text-align:left; } .menu li ul a:hover{ background:#949494; color:#000000; opacity:1.0; filter:alpha(opacity=100); }</style> </HEAD> <BODY> <!--设置一个div里面，加盒子ul--><div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">新闻</a> <ul> <li><a href="#">国际新闻</a></li> <li><a href="#">国内新闻</a></li> <li><a href="#">体育新闻</a></li> </ul> </li> <li><a href="#">财经</a> <ul> <li><a href="#">股票市场</a></li> <li><a href="#">证券行情</a></li> <li><a href="#">基金保险</a></li> </ul> </li> <li><a href="#">联系我们</a></li> </ul></div> </BODY></HTML>
回复讨论(解决方案)
.menu li ul a{
display:block;
font-size:12px;
text-align:left;
}
给这句话重设padding;
padding:0 0px;
哦，看错了，修改下面的width值。
.menu li li{
display:block;
width:130px;
}
还有这个的width值
.menu li ul{
background:#e0e0e0; /*设置二级菜单背景色*/
border-left:2px solid #007962; /*设置菜单左边框样式和颜色.*/
display:none; /*不再设置为块状显示效果*/
height:auto;
position:absolute;
width:130px;
z-index:200;
margin:0px;
}
我觉得可以这样来处理
CSS样式
.menu .ul 定义最外层UL的样式。
.menu .ul li
.menu .ul ul定义里面UL的样式，这样用的的确比较少，楼主可以试一下。
或者再定义一样样式直接附给里面的UL
.kuan {width:100px;}
先定位问题，看是那个样式改变的这个宽度值，，如果不知道，，使用火狐，chrome或者IE高版本浏览器，对于你要查看的导航栏右键查看元素，，浏览器就会出现新的显示框，对于指定的标签元素，采用的哪些有效样式都可以查看到，找到对应的宽度控制样式，改变即可