摘要：<!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">
社區(qū)問答
</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">
小程序開發(fā)
</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>
批改老師：韋小寶批改時間：2018-11-13 09:07:01
老師總結：和上篇作業(yè)一樣！缺少總結！下次記得帶上！不錯！課后記得多多練習哈！繼續(xù)加油吧！