CSS を使用してセカンダリナビゲーションメニューの幅を制御するにはどうすればよいですか? _html/css

CSS を使用してセカンダリナビゲーションメニューの幅を制御するにはどうすればよいですか? _html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:28:44

オリジナル

1814 人が閲覧しました

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

まず問題を見つけて、スタイルによってどの幅の値が変更されるかを確認し、Firefox、Chrome、または IE 以降のバージョンのブラウザを使用して、表示したいナビゲーションバーを右クリックしてください。要素、ブラウザ新しい表示ボックスが表示され、指定したラベル要素に使用されている有効なスタイルを確認して変更できます。