Jquery二级菜单的显示

最新推荐文章于 2022-11-16 13:30:56 发布

ljh_learn_from_base

最新推荐文章于 2022-11-16 13:30:56 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery CSS 二级菜单文章标签： jquery 二级菜单

本文链接：https://blog.youkuaiyun.com/ljh_learn_from_base/article/details/72816699

jquery 同时被 3 个专栏收录

6 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

二级菜单

1 篇文章

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<title>二级菜单练习</title>

<style>

* {

margin: 0;

padding: 0;

}

body {

font-family: Arial, Tahoma, sans-serif;

font-size: 11px;

color: #232323;

}

.wrap {

width: 800px;

margin: 0 auto;

}

#nav {

list-style: none;

border-left: 1px solid #d5dce8;

border-right: 1px solid #d5dce8;

border-bottom: 1px solid #d5dce8;

border-bottom-left-radius: 4px;

border-bottom-right-radius: 4px;

height: 50px;

padding-left: 15px;

padding-right: 15px;

background: #edf3f7;

-moz代表firefox浏览器私有属性

-ms代表IE浏览器私有属性

-webkit代表chrome、safari私有属性

}

#nav li {

float: left;

display: block;

position: relative;

z-index: 999;

margin: 0 1px;

}

#nav li a {

display: block;

padding: 0;

font-weight: 700;

line-height: 50px;

text-decoration: none;

color: #818ba3;

zoom: 1;/* 用css中的zoom属性可以让网页实现IE搜索7中的放大缩小功能。zoom：1就是和原来一样大小 */

border-left: 1px solid transparent;

border-right: 1px solid transparent;

padding: 0px 12px;

}

#nav li a:hover, #nav li a.hov {

background-color: #fff;

border-left: 1px solid #d5dce8;

border-right: 1px solid #d5dce8;

color: #576482;

}

#nav ul {

position: absolute;

left: 1px;

display: none;

margin: 0;

padding: 0;

list-style: none;

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);

padding-bottom: 3px;

}

#nav ul li {

width: 180px;

float: left;

border-top: 1px solid #fff;

text-align: left;

}

#nav ul li:hover {

border-left: 0px solid transparent;

border-right: 0px solid transparent;

}

#nav ul a {

display: block;

height: 20px;

line-height: 20px;

padding: 8px 5px;

color: #666;

border-bottom: 1px solid transparent;

text-transform: uppercase;

color: #797979;

font-weight: normal;

}

#nav ul a:hover {

text-decoration: none;

border-right-color: transparent;

border-left-color: transparent;

background: transparent;

color: #4e4e4e;

}

* html #nav ul {

margin: 0 0 0 -2px;

}

.clearfix:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

.clearfix {

display: inline-block;

}

html[xmlns] .clearfix {

display: block;

}

* html .clearfix {

height: 1%;

}

</style>

</head>

<body>

<div class="wrap">

<ul id="nav">

<ul>

<li><a href="#">Company</a></li>

<li><a href="#">Authors</a></li>

<li><a href="#">Advertising</a></li>

</ul></li>

<li><a href="#">RSS订阅</a>

<ul>

<li><a href="#">Patterns</a></li>

<li><a href="#">Icons</a></li>

</ul></li>

<ul>

<li><a href="#">jQuery</a></li>

<li><a href="#">MySQL</a></li>

</ul></li>

<li><a href="#">Web工具</a>

<ul>

<li><a href="#">Performance</a></li>

<li><a href="#">CMS Plugins</a></li>

<li><a href="#">Cheat Sheets</a></li>

</ul></li>

<li><a href="#">Originals</a>

<ul>

<li><a href="#">Website Design</a></li>

<li><a href="#">Mobile</a></li>

</ul></li>

</ul>

</div>

$(document).ready(function() {

$('#nav li').hover(function() {

$("ul",this) == $("this").clildren("ul")

$('ul', this).slideDown(200);

$(this).children('a:first').addClass("hov");

}, function() {

$('ul', this).slideUp(100);

$(this).children('a:first').removeClass("hov");

});

</script>

</body>

</html>


最精简的二级菜单
<div class="menu">
 <ul class="nav">
	
	<li>我叫林建辉5
		<ul class="subul">
			<li>dfdf</li>
			<li>dfdf</li>
		</ul>
	</li>
	
 </ul>
</div>
<style>
.menu ul,.menu .nav>li{position:relative;list-style:none;}
.menu ul ul{display:none;position:absolute;z-index:1;left:0; top:20px}
.menu .nav>li:hover ul{display:block;}
.subul{border:1px solid red;width:180px;}
.subul li{border-bottom:1px solid black;}
</style>