<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<style>
*{ margin: 0px; padding: 0px;}
ul,li{ list-style: none;}
nav{ width: 200px; background: green; position: fixed; top: 50px; left: 20px;}
nav li{ width: 100%; height: 35px; line-height: 35px; position: relative; padding-left: 10px; box-sizing: border-box;
border-bottom: 1px solid gray;}
nav li .newMenu{ display: none; width: 300px; height: 300px; position: absolute; left: 200px; top: 0px;
padding: 10px; box-sizing: border-box;}
nav li:nth-child(1) .newMenu{ background: yellowgreen;}
nav li:nth-child(2) .newMenu{ background: darkgoldenrod;}
nav li:nth-child(3) .newMenu{ background: blueviolet;}
nav li:nth-child(4) .newMenu{ background: bisque;}
</style>
</head>
<body>
<nav>
<li>
<p>第一块</p>
<div class="newMenu">第一块分类</div>
</li>
<li>
<p>第二块</p>
<div class="newMenu">第二块分类</div>
</li>
<li>
<p>第三块</p>
<div class="newMenu">第三块分类</div>
</li>
<li>
<p>第四块</p>
<div class="newMenu">第四块分类</div>
</li>
</nav>
<script>
var liHeight = $('nav li').eq(0).height();
$('nav li').on('mouseover',function(){
var index = $(this).index();
var coundHeight = liHeight * index+index;
$(this).find('.newMenu').css({'top':"-" +coundHeight+'px'}).show();
})
$('nav li').on("mouseout",function(){
$('nav .newMenu').hide();
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/jquery.js" ></script>
<style>
*{ margin: 0px; padding: 0px;}
ul,li{ list-style: none;}
nav{ width: 200px; background: green; position: fixed; top: 50px; left: 20px;}
nav li{ width: 100%; height: 35px; line-height: 35px; position: relative; padding-left: 10px; box-sizing: border-box;
border-bottom: 1px solid gray;}
nav li .newMenu{ display: none; width: 300px; height: 300px; position: absolute; left: 200px; top: 0px;
padding: 10px; box-sizing: border-box;}
nav li:nth-child(1) .newMenu{ background: yellowgreen;}
nav li:nth-child(2) .newMenu{ background: darkgoldenrod;}
nav li:nth-child(3) .newMenu{ background: blueviolet;}
nav li:nth-child(4) .newMenu{ background: bisque;}
</style>
</head>
<body>
<nav>
<li>
<p>第一块</p>
<div class="newMenu">第一块分类</div>
</li>
<li>
<p>第二块</p>
<div class="newMenu">第二块分类</div>
</li>
<li>
<p>第三块</p>
<div class="newMenu">第三块分类</div>
</li>
<li>
<p>第四块</p>
<div class="newMenu">第四块分类</div>
</li>
</nav>
<script>
var liHeight = $('nav li').eq(0).height();
$('nav li').on('mouseover',function(){
var index = $(this).index();
var coundHeight = liHeight * index+index;
$(this).find('.newMenu').css({'top':"-" +coundHeight+'px'}).show();
})
$('nav li').on("mouseout",function(){
$('nav .newMenu').hide();
})
</script>
</body>
</html>
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
