粗三级下拉菜单

Original 2018-11-19 20:21:44 195
abstract:<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css&quo

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript" src="jquery.min.js"></script>

<style type="text/css">

*{margin: 0px;padding: 0px;}

.menu{width: 505px;height: 35px;background:#000;color: red;border:1px solid #ccc;border-radius: 5px;margin:0 auto;margin-top:20px;}

ul{list-style: none;}

ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;float: left;border-right: 1px solid #ccc;cursor: pointer;}

.twobox li{width: 100px;height: 30px;line-height: 30px;background: #2d2d2d;color: #a9a9a9;font-size: 14px;position: relative;border:0px;}

.twobox li:hover{background: #000;color: #fff;}

.three{position: absolute;top: 0px;left: 100px;}

.three li{width: 99px;height: 30px;line-height: 30px;border:0;}

</style>

</head>

<body>

<!-- cursor:鼠标经过定义光标

border-radius:为元素添加圆角边框 -->

<div class="menu">

<ul class="one">

<li>首页</li>

<li>关于我们</li>

<li>产品中心

<ul class="twobox">

<li>产品1</li>

<li class="two">产品2

<ul class="three">

<li>产品2.1</li>

<li>产品2.2</li>

<li>产品2.3</li>

<li>产品2.4</li>

</ul>

</li>

<li class="two">产品3

<ul class="three">

<li>产品3.1</li>

<li>产品3.2</li>

<li>产品3.3</li>

<li>产品3.4</li>

</ul>

</li>

<li>产品4</li>

</ul>

</li>

<li>新闻动态

<ul class='twobox'>

<li>新闻中心</li>

<li class="two">新闻1

<ul class="three">

<li>新闻1.1</li>

<li>新闻1.2</li>

<li>新闻1.3</li>

</ul>

</li>

</ul>

</li>

<li>加入我们</li>

</ul>

</div>

<script type="text/javascript">

$(document).ready(function(){

$('.twobox').hide()

$('.three').hide()

$('.one>li').mouseover(function(){

$(this).find('.twobox').slideDown(500)

})

$('.one>li').mouseleave(function(){

$(this).find('.twobox').slideUp(500)

})

$('.two').mouseover(function(){

$(this).find('.three').slideDown(500)

})

$('.two').mouseleave(function(){

$(this).find('.three').slideUp(500)

})

})

</script>

</body>

</html>

有些粗心大意啊,写着写着就忘记结束标志或者符号上面的!然后就找啊找!!!

Correcting teacher:灭绝师太Correction time:2018-11-20 09:01:08
Teacher's summary:那下次写的时候就要小心,犯错误往往也是好事情,继续加油

Release Notes

Popular Entries