简单CSS3下拉菜单效果实现-作业
<!--
hover显示display:none的属性必须有个前提，必须有层级关系，没有层级关系的话就没有效果！
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简单CSS3下拉菜单效果实现-作业</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">
<!-- 内部样式 -->
<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'>
<!-- 左边内容 -->
<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图标 -->
<!-- 这个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="">内蒙古</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>
<!-- 右边内容 -->
<div id='header_content_right'>
<ul>
<li style='width:150px;'><a href="">你好,请登录</a> <a style='color:#F10215' href="">免费注册</a></li>
<li><a href="">我的订单</a></li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0库中的map-marker图标 -->
<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="">降价商品</a></li><li><a href="">我的关注</a></li>
</ul>
</div>
</li>
<li><a href="">京东会员</a></li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0库中的map-marker图标 -->
<a href="">企业采购</a> <i class='fa fa-angle-down'></i>
<div class="show_content show_qycg">
<ul>
<li style='width:40px;'><a href="">企业购</a></li><li><a href="">商用场景馆</a></li>
<li style='width:40px;'><a href="">工业品</a></li><li><a href="">礼品卡</a></li>
</ul>
</div>
</li>
<li class='header_menu'>
<!-- 使用的外部font-awesome4.7.0库中的map-marker图标 -->
<a href="">客户服务</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="">售后服务</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图标 -->
<a href="">网站导航</a> <i class='fa fa-angle-down'></i>
<div class='show_content'><a href="">网站导航</a></div>
</li>
<li><a href="">手机京东</a></li>
</ul>
</div>
<div class='clear'></div>
</div>
</div>
</body>
</html>