二級導航條---豎直
阿新 • • 發佈：2018-12-22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>製作二級導航選單</title>
<!-- <link rel="stylesheet" href="C:\Users\zhaodada\Desktop\js\style1.css"> -->
<style type="text/css">
#menu{
width: 100px;
border: 1px solid #999;
#menu ul{
margin:0px;
padding: 0px;
list-style:none;
}
#menu ul li{
background:#06c;
height:26px;
line-height:26px;
text-align:center;
border-bottom:1px solid #999;
position: relative;
}
a{
display:block;
font-size:13px;
color: #fff;
text-decoration:none;
a:hover{
color:#f00;
font-size:14px;
}
/*建立二級選單*/
#menu ul li ul{
display: none;
top: 0px;
width: 130px;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
left: 100px;
}
#menu ul li:hover ul{
display: block;
}
#menu ul li :hover ul li a{
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a>
<ul>
<li><a href="">Selector</a></li>
<li><a href="">Use CSS File in HTML</a></li>
<li><a href="">Formatting Document</a></li>
<li><a href="">Layout</a></li>
</ul>
</li>
<li><a href="">JavaScript</a></li>
<li><a href="">XML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Ajax</a></li>
</ul>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>製作二級導航選單</title>
<!-- <link rel="stylesheet" href="C:\Users\zhaodada\Desktop\js\style1.css"> -->
<style type="text/css">
#menu{
width: 100px;
border: 1px solid #999;
#menu ul{
margin:0px;
padding: 0px;
list-style:none;
}
#menu ul li{
background:#06c;
height:26px;
line-height:26px;
text-align:center;
border-bottom:1px solid #999;
position: relative;
}
a{
display:block;
font-size:13px;
color: #fff;
text-decoration:none;
a:hover{
color:#f00;
font-size:14px;
}
/*建立二級選單*/
#menu ul li ul{
display: none;
top: 0px;
width: 130px;
border: 1px solid #ccc;
border-bottom: none;
position: absolute;
left: 100px;
}
#menu ul li:hover ul{
display: block;
}
#menu ul li :hover ul li a{
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="">HTML</a></li>
<li><a href="">CSS</a>
<ul>
<li><a href="">Selector</a></li>
<li><a href="">Use CSS File in HTML</a></li>
<li><a href="">Formatting Document</a></li>
<li><a href="">Layout</a></li>
</ul>
</li>
<li><a href="">JavaScript</a></li>
<li><a href="">XML</a></li>
<li><a href="">PHP</a></li>
<li><a href="">Ajax</a></li>
</ul>
</div>
</body>
</html>