Question

css二级菜单样式如何设置

css代码如下，二级菜单显示效果如图。求指教应该如何修改能让二级菜单大小和一级菜单一样且更美观？heml代码（<ul id="lpl" > <li><a href="qExperiPlot.aspx?type=6">国际贸易实验室</a> <ul id="lp"><li><a href="#">shapan</a></li></ul>)css代码#lpl { margin: 0 auto; padding: 0; z-index: 1000; background-color:#F4F4F4; list-style: none;/* 隐藏默认列表符号*/ } #lpl li{ margin: 0; padding: 0; list-style: none; font-size:100px; background: #f00; text-align: center; border-bottom: 1px solid #999; position: relative; width: 150px; }#lpl li a{ display: block; margin: 0 1px 0 0; padding:10px 10px; width: 138px; height:56px; background: #5970B2; color: #FFF; text-align:center; text-decoration: none; font-family: 微软雅黑;}#lpl li ul{ display: none;/*默认隐藏*/ top:-40px; border: 1px solid #ccc; border-bottom: none; position: absolute; left: 125px; z-index:1200; }#lpl li a:hover{ background: #473C8B} #lpl li:hover ul{ display: block; } #lpl li:hover ul li a{ display: block; } #lpl div a:hover { background: #49A3FF; color: #FFF }

Answer 1

代码粘贴的太复杂；

先给你分析一下原理：二级菜单没有在没有hover属性的情况下是隐藏的所以需要display：none，当鼠标hover的时候二级菜单才会列出来，这是纯css可以实现的；

知道上面的原理之后，下面比较容易实现具体看例子：

HTML代码：

	<ul>
		<li><a href="">一级菜单</a></li>
		<li><a href="">一级菜单</a>
			<ul class="drop-ul">
			<li ><a href="">二级菜单</a></li>
			</ul>
		</li>
	</ul>

CSS代码：

ul li ul.drop-ul{ display: none;position:relative }/*正常情况下隐藏*/
ul li:hover ul.drop-ul li{display: block;} /*当鼠标放上去二级菜单li 显示出来*/
/*这个时候你会发现二级菜单显示的位置可能不对可以使用position属性*/
ul li:hover ul.drop-ul li{position:absolute;}
/*通过top right left 调整位置，根据实际情况调整背景颜色，字体颜色等，细节东西*/

此时可能会发现会二级菜单出现有那么一点点的生硬；没关系配合jquery实现缓慢展现效果

$(document).ready(function() {
		if($(window).width() > 768) {
		$('ul li').hover(
		function() {
$('ul', this).stop().slideDown(200);
 	},
function() {
    	$('ul', this).stop().slideUp(200);
  		}
		);
	}
				
});

注意不知道jquery的新手使用记住先加载Jquery.min.js文件，放在此段js前面；