下拉菜单练习

最新推荐文章于 2022-09-12 01:08:12 发布

以梦为马|不负韶华

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量120

点赞数

分类专栏：前端技术文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45027619/article/details/117356748

版权

前端技术专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			li{
				/*//取消小黑点*/
				list-style-type: none;
			}
			
			a{
				/*//取消超链接的特殊显示*/
				text-decoration: none;
				font-size: 14px;
			}
			.nav{
				margin:100px;
			}
			/*//亲儿子*/
			.nav>li{
				position: relative;
				float: left;
				width:80px;
				height: 41px;
				text-align: center;
			}
			.nav li a{
				display: block;
				width:100%;
				height: 100%;
				line-height: 41px;
				color:#333;
			}
			.nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
		</style>
    <script src="js/jquery.min.js"></script>
		
	</head>
	<body>
			<ul class="nav">
				<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>
					<ul>
						<li><a href="">私信</a></li>
						<li><a href="">评论</a></li>
						<li><a href="">@我</a></li>
					</ul>
				</li>
			</ul>
			<script type="text/javascript">
				$(function(){
					//鼠标移入展开下拉框
					$('.nav>li').mouseover(function(){
						$(this).children("ul").show();
					})
					//鼠标移出隐藏下拉框
					$('.nav>li').mouseout(function(){
						$(this).children('ul').hide();
					})
				})
				
					
				
			</script>

	</body>
</html>

以梦为马|不负韶华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单练习

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></tit
复制链接

扫一扫