<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/index/navheader.css">
</head>
<body>
<ul id="header">
<li><a>一級菜單1</a></li>
<li><a>一級菜單2</a></li>
<li><a>一級菜單3</a></li>
<li><a>一級菜單4</a>
<ul>
<li><a>二級菜單1</a></li>
<li><a>二級菜單2</a>
<ul>
<li><a>三級菜單1</a></li>
<li><a>三級菜單2</a></li>
<li><a>三級菜單3</a></li>
<li><a>三級菜單4</a></li>
</ul>
</li>
<li><a>二級菜單3</a></li>
<li><a>二級菜單4</a>
<ul>
<li><a>三級菜單1</a></li>
<li><a>三級菜單2</a></li>
<li><a>三級菜單3</a></li>
<li><a>三級菜單4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>css:
body{
box-sizing:border-box;
}
#header,#header li{
text-decoration: none;
list-style-type:none;
}
#header>li{
float:left;
}
#header li a{
text-align:center;
display:block;
width:80px;
height:30px;
line-height:30px;
background:ghostwhite;
color:black;
}
//第一個ul下的除了第一個li +表示除了自己的其餘同級元素
#header>li + li{
margin-left:10px;
border-left:2px solid black;
padding-left:10px;
}
#header li ul{
display:none;
position: relative;
left:30px;
}
#header li ul li{
margin-top:5px;
}
#header li a:hover {
cursor: help;
}
// >ul是子元素，如果不加就所有的ul都顯示，不符合
#header li:hover >ul{
display:inline-block;
}
#header li:active >ul{
display:inline-block;
}
//懸浮在a的時候子元素a改變背景
#header li:hover>a{
background:rgba(0,0,0,0.4);
}