abstract：<!DOCTYPE html> <html> <head> <title>
<!DOCTYPE html>
<html>
<head>
<title>
css3下拉菜单
</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
<style type="text/css">
*{margin:0px; padding: 0px; } #box{ width: 900px; height: 45px; border:
10px solid; border-radius: 10px; background-color: #000; position: relative;
left: 100px; } ul{ list-style: none; position: relative; } ul li{ width:
120px; height: 45px; float: left; line-height: 45px; position: relative;
background-color: #000; list-style: none; text-align: center; color: #fff;
} #box_s{ width: 240px; height: auto; position: absolute; left: 0px; }
.li_f:hover{ background-color: #33F6F1; } .li_s:hover{ color: #33F6F1;
}
</style>
</head>
<body>
<div id="box">
<ul class="ul_f">
<li class="li_f">
首页
</li>
<li class="li_f">
视频教程
</li>
<li class="li_f">
社区问答
</li>
<li class="li_f">
编程词典
<div id="box_s">
<ul class="ul_s">
<li class="li_s">
php词典
</li>
<li class="li_s">
jQuery词典
</li>
<li class="li_s">
html词典
</li>
<li class="li_s">
JavaScript词典
</li>
</ul>
<ul class="ul_s">
<li class="li_s">
技术文章
</li>
<li class="li_s">
PHP教程
</li>
<li class="li_s">
小程序开发
</li>
<li class="li_s">
html教程
</li>
</div>
</li>
<li class="li_f">
手册下载
</li>
<li class="li_f">
工具下载
</li>
<li class="li_f">
菜鸟学堂
</li>
</ul>
</div>
<script type="text/javascript">
$(function() {
$("#box_s").hide();
$(".ul_f>li").mouseover(function() {
$(this).find("#box_s").show();
}) $(".ul_f>li").mouseleave(function() {
$(this).find("#box_s").hide();
})
})
</script>
</body>
</html>
Correcting teacher：韦小宝Correction time：2018-11-13 09:07:01
Teacher's summary：和上篇作业一样！缺少总结！下次记得带上！不错！课后记得多多练习哈！继续加油吧！