サマリー：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!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>Document</title>
<link rel="stylesheet" href="css/php.css" type="text/css">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/php.js" type="text/javascript"></script>
<style>
*{margin: 0;padding: 0}
body{color: #000;font-family: 'Times New Roman', Times, serif;font-size: 16px;}
.clear{clear: both;}
.top{width: 100%;height: 100px;margin: 0 auto;overflow: hidden;}
a{text-decoration: none;}
ul,li{list-style: none;}
.menu{width: 905px;height:auto;margin: 0 auto;cursor: pointer;background:pink;}
.menu_ul{width: 100%;text-align: left;position: relative;}
.menu_ul li a{color: #000;}
.menu_ul>li{width: 150px;height: 40px;line-height: 40px;color: #000;float: left;text-align: center;cursor: pointer;background: pink;
border-right: 1px solid #fff;}
.menu_ul>li:nth-child(6n){border-right: 0px;}
/* menu two */
.menu_b{position: relative;width: 150px;font-size: 14px;color: #000;}
.menu_b>li{width:100%;height: 40px;line-height: 40px;text-align: center;background: brown;color: #000;border-bottom: 0.1px solid #fff;}
/* menu three */
.menu_c{width:150px;position: absolute;left: 150px;font-size: 14px;margin-top: -40px;}
.menu_c>li{ width: 100%;height: 40px;line-height: 40px;text-align: center;color: #000;background: #ea5404;border-bottom: 0.1px solid #fff;}
</style>
<script>
//php作業(yè)的js以后都寫(xiě)在這里
$(document).ready(function(){
//隱藏二級(jí)和三級(jí)下拉
$('.menu_b').hide();
$('.menu_c').hide();
//二級(jí)下拉
$('.menu_ul>li').mouseover(function () {
$(this).find('.menu_b').slideDown("slow");
});
$('.menu_ul>li').mouseleave(function(){
$(this).find('.menu_b').slideUp("slow");
})
//三級(jí)下拉
$('.menu_b>li').mouseover(function(){
$(this).find('.menu_c').slideDown("slow");
})
$('.menu_b>li').mouseleave(function(){
$(this).find('.menu_c').slideUp("slow");
})
})
</script>
</head>
<body>
<div class="top"></div>
<div class="menu">
<ul class="menu_ul">
<li><a href=""></a>首頁(yè)</a></li>
<li>公司產(chǎn)品
<ul class="menu_b">
<li>蘋(píng)果
<ul class="menu_c">
<li>iphone5</li>
<li>iphone6</li>
<li>iphone7</li>
<li>iphone8</li>
<li>iphone-xs-max</li>
<li>iphone-xs-max</li>
</ul>
</li>
<li>華為
<ul class="menu_c">
<li>huawei-meta10</li>
<li>huawei-meta10</li>
<li>huawei-meta10</li>
</ul>
</li>
<li>小米
<ul class="menu_c">
<li>小米1</li>
<li>小米2</li>
<li>小米3</li>
<li>小米4</li>
<li>小米5</li>
</ul>
</li>
<li>三星
<ul class="menu_c">
<li>Glaxy-s8</li>
<li>Glaxy-s8</li>
<li>Glaxy-s8</li>
<li>Glaxy-s8</li>
</ul>
</li>
</ul>
</li>
<li><a href="">品牌簡(jiǎn)介</a></li>
<li><a href="">公司環(huán)境</a></li>
<li><a href="">新聞媒體</a></li>
<li><a href="">創(chuàng)業(yè)中心</a></li>
</ul>
</div>
</body>
</html>
添削の先生：滅絕師太添削時(shí)間：2018-11-19 10:50:14
先生のまとめ：測(cè)試過(guò)了，直男，顏色搭配真難看，完成的不錯(cuò)！