使用CSS制作三级下拉菜单(先水平再垂直)
在用:hover弹出菜单时,要对两个下拉菜单的ul做区分(例如用 class=" "将两个ul区分),除此之外也要对触发下拉事件的两个li做区分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS制作三级下拉菜单</title>
</head>
<!--CSS-->
<style>
*{
padding: 0px;
margin: 0px;
}
header{
background-color: #ff9900;
width: 100%;
height: 100px;
margin-bottom: 5px;
position: relative;
}
nav{
left:160px;
background-color: yellowgreen;
font-weight: bold;
bottom: 5px;
position: absolute;
}
ul{
list-style: none;
}
ul li{
float: left;
position: relative;
}
a{