亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

粗三級(jí)下拉菜單

原創(chuàng) 2018-11-19 20:21:44 197
摘要:<!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:鼠標(biāo)經(jīng)過(guò)定義光標(biāo)

border-radius:為元素添加圓角邊框 -->

<div class="menu">

<ul class="one">

<li>首頁(yè)</li>

<li>關(guān)于我們</li>

<li>產(chǎn)品中心

<ul class="twobox">

<li>產(chǎn)品1</li>

<li class="two">產(chǎn)品2

<ul class="three">

<li>產(chǎn)品2.1</li>

<li>產(chǎn)品2.2</li>

<li>產(chǎn)品2.3</li>

<li>產(chǎn)品2.4</li>

</ul>

</li>

<li class="two">產(chǎn)品3

<ul class="three">

<li>產(chǎn)品3.1</li>

<li>產(chǎn)品3.2</li>

<li>產(chǎn)品3.3</li>

<li>產(chǎn)品3.4</li>

</ul>

</li>

<li>產(chǎn)品4</li>

</ul>

</li>

<li>新聞動(dòng)態(tài)

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

有些粗心大意啊,寫著寫著就忘記結(jié)束標(biāo)志或者符號(hào)上面的!然后就找啊找!?。?br/>

批改老師:滅絕師太批改時(shí)間:2018-11-20 09:01:08
老師總結(jié):那下次寫的時(shí)候就要小心,犯錯(cuò)誤往往也是好事情,繼續(xù)加油

發(fā)佈手記

熱門詞條