如何使用CSS控制二级导航菜单宽度？_html/css

如何使用CSS控制二级导航菜单宽度？_html/css_WEB-ITnose

WBOY

Release： 2016-06-21 09:28:44

Original

1849 people have browsed it

<!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>

Copy after login

回复讨论(解决方案)

    .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;}