摘要：<!--hover顯示display:none的屬性必須有個(gè)前提，必須有層級(jí)關(guān)系，沒有層級(jí)關(guān)系的話就沒有效果！ --><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>簡單CSS3下拉菜單效果實(shí)現(xiàn)-作業(yè)</title> <!
<!--
hover顯示display:none的屬性必須有個(gè)前提，必須有層級(jí)關(guān)系，沒有層級(jí)關(guān)系的話就沒有效果！
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>簡單CSS3下拉菜單效果實(shí)現(xiàn)-作業(yè)</title>
<!-- 引入外部的font-awesome4.7.0庫 -->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 內(nèi)部樣式 -->
<style type="text/css">
*{margin:0px;padding:0px;font-size:12px;}
a{color:#999999;text-decoration:none;}
li{list-style:none;}
.clear{clear:both;}
#header{width:100%;height:30px;background-color:#E3E4E5;}
#header_content{width:1300px;line-height:30px;margin:0px auto;}
#header_content_left{height:30px;float:left;text-align:center;}
#header_content_right{height:30px;width:720;float:right;text-align:center;}
#header_content_right>ul>li{width:75px;height:30px;/*line-height:30px;*/float:left;}
#header_content_right a:hover{color:#F10215;}
.show_content{display:none;}
.header_menu:hover{background-color:#fff;}
.header_menu:hover .show_content{display:block;}
.show_map,.show_myjd,.show_qycg,.show_khfw{border:1px solid #ccc;border-top:none;}
.show_map{width:302px;height:162px;}
.show_map ul li{width:40px;height:30px;line-height:30px;float:left;margin:5px 10px;}
.show_map ul li a{display:block;}
.show_map ul li a:hover{color:#F10215;background-color:#f4f4f4;}
.show_myjd{width:280px;height:90px;}
.show_myjd ul li{width:120px;height:20px;line-height:20px;float:left;margin:5px 10px;text-align:left;}
.show_qycg{width:140px;height:50px;}
.show_qycg ul li{width:80px;height:15px;line-height:15px;float:left;margin:5px 0px 5px 10px;text-align:left;}
.show_khfw{width:150px;height:150px;}
.show_khfw ul li{width:65px;height:15px;line-height:15px;float:left;margin:10px 0px 5px 10px;text-align:left;}
</style>
</head>
<body>
<div id='header'>
<div id='header_content'>
<!-- 左邊內(nèi)容 -->
<div id='header_content_left'>
<img style='float:left;' src="https://img14.360buyimg.com/da/jfs/t1/26383/31/5248/182032/5c39fe04Ee718a93e/e637a1ac10fe2bf4.gif?t=1547363990782">
<div class='header_menu' style='width:60px;margin-left:10px;float:left;'>
<!-- 使用的外部font-awesome4.7.0庫中的map-marker圖標(biāo) -->
<!-- 這個(gè)class的名稱寫成下劃線貌似就沒用了 -->
<span class='fa fa-map-marker' style='color:#F10215;font-size:14px;'></span> <a href="">福建</a>
<div class="show_content show_map">
<ul>
<li><a href="">北京</a></li><li><a href="">上海</a></li><li><a href="">天津</a></li><li><a href="">重慶</a></li>
<li><a href="">河北</a></li><li><a href="">山西</a></li><li><a href="">河南</a></li><li><a href="">遼寧</a></li>
<li><a href="">吉林</a></li><li><a href="">黑龍江</a></li><li><a href="">內(nèi)蒙古</a></li><li><a href="">江蘇</a></li>
<li><a href="">山東</a></li><li><a href="">安徽</a></li><li><a href="">浙江</a></li><li style='background-color:#F10215;'><a style='color:#fff;background-color:#F10215;' href="">福建</a></li>
<li><a href="">湖北</a></li><li><a href="">湖南</a></li><li><a href="">廣東</a></li><li><a href="">廣西</a></li>
</ul>
</div>
</div>
</div>
<!-- 右邊內(nèi)容 -->
<div id='header_content_right'>
<ul>
<li style='width:150px;'><a href="">你好,請登錄</a> <a style='color:#F10215' href="">免費(fèi)注冊</a></li>
<li><a href="">我的訂單</a></li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0庫中的map-marker圖標(biāo) -->
<a href="">我的京東</a> <i class='fa fa-angle-down'></i>
<div class="show_content show_myjd">
<ul>
<li><a href="">待處理訂單</a></li><li><a href="">消息</a></li>
<li><a href="">返修退換貨</a></li><li><a href="">我的問答</a></li>
<li><a href="">降價(jià)商品</a></li><li><a href="">我的關(guān)注</a></li>
</ul>
</div>
</li>
<li><a href="">京東會(huì)員</a></li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0庫中的map-marker圖標(biāo) -->
<a href="">企業(yè)采購</a> <i class='fa fa-angle-down'></i>
<div class="show_content show_qycg">
<ul>
<li style='width:40px;'><a href="">企業(yè)購</a></li><li><a href="">商用場景館</a></li>
<li style='width:40px;'><a href="">工業(yè)品</a></li><li><a href="">禮品卡</a></li>
</ul>
</div>
</li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0庫中的map-marker圖標(biāo) -->
<a href="">客戶服務(wù)</a> <i class='fa fa-angle-down'></i>
<div class="show_content show_khfw">
<ul>
<li style="width:100%;font-size:13px;font-weight:bold;font-family:'幼圓'；height:20pxline-height:20px">客戶</li>
<li><a href="">幫助中心</a></li><li><a href="">售后服務(wù)</a></li>
<li><a href="">在線客服</a></li><li><a href="">意見建議</a></li>
<li><a href="">電話客服</a></li><li><a href="">客服郵箱</a></li>
<li><a href="">金融咨詢</a></li><li><a href="">全球售客服</a></li>
</ul>
</div>
</li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0庫中的map-marker圖標(biāo) -->
<a href="">網(wǎng)站導(dǎo)航</a> <i class='fa fa-angle-down'></i>
<div class='show_content'><a href="">網(wǎng)站導(dǎo)航</a></div>
</li>
<li><a href="">手機(jī)京東</a></li>
</ul>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2019-01-14 11:49:27
老師總結(jié)：作業(yè)完成的不錯(cuò)，備注的也很清楚，繼續(xù)保持?。?
