我自己写的案例

Original 2019-03-21 23:02:02 220
abstract:<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title></title>    <script type=&q

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

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

<style type="text/css">

* {

margin: 0px;

padding: 0px;

}

.menu {

width: 800px;

height: 35px;

margin: 0px auto;

background: #000;

margin-top: 20px;

color: #fff;

border: 1px solid #ccc;

border-radius: 5px;

}

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>

       <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>

</head>

<body>

<div class="menu">

<ul class="one">

<li>首 页</li>

<li>产 品

<ul class="twobox">

<li>产品1</li>

<li class="two">产品2

<ul class="three">

<li>产品1.1</li>

<li>产品1.2</li>

<li>产品1.3</li>

<li>产品1.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>公司新闻1</li>

<li class="two">公司新闻2

<ul class="three">

<li>公司新闻1.1</li>

<li>公司新闻1.2</li>

<li>公司新闻1.3</li>

</ul>

</li>

<li>公司新闻3</li>

<li>公司新闻4</li>

</ul>

</li>

<li>行业新闻</li>

<li>联系我们</li>

</ul>

</div>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-03-22 09:16:28
Teacher's summary:作业完成的相当快啊,课程看的也比较迅速,需要掌握好知识点哦!

Release Notes

Popular Entries