鼠标放到菜单自动弹出下拉菜单 2019－01－15
html代码如下：（html尽量做个简洁明了，不要用太多的class，尽量在css里用派生选择器）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
<title>鼠标放到菜单自动弹出下拉菜单</title>
</head>
<body>
<div class="header">
<div class="content">
<div class="content_left">
<a href="#">中国大陆 <span class="fa fa-angle-down"></span>
<ul>
<li>
全球
</li>
<li>
香港
</li>
</ul>
</a>
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>
/******************引出CSS代码部分********************(重要知识点：在要下拉菜单的地方元素做成inline-block行内块元素，在隐藏下拉的上级做position:relative相对定位，需要下拉的block元素做position:absolute定位)，做完记得清除浮动*/
*{margin:0;padding: 0;}
a{
text-decoration: none;color:#000;
}
.header{
width:100%;height:40px;background: #F5F5F5;
}
.content{
width:1200px;margin:0 auto;background: pink;
height: 40px;line-height: 40px;font-size: 13px
}
.content_left{
float:left;height:40px;
display: inline-block;
}
.content_left a{
margin-right: 5px;position: relative;display: inline-block;
}
.content_left a:hover ul{
display: block;position: absolute;
}
.content_left a ul {display: none;width:100px;}
.content_left a ul li{list-style:none;width:80px;background: red;text-align: left;}
.content_right{
width:600px;float:right;height:40px;background: red
}
