HTML如何实现 导航的二级菜单
<html>
<head>
<title>HTML如何实现 二级菜单 </title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{background-color:#fff;}
header{background:#ee6;
height:80px;
position:fixed;
top:0;
width:100%;
margin-bottom:15px;
}
footer{background-color:rgba(0,0,0,0.5);
text-align:center;
width:100%;
color:#fff;
position:fixed;
bottom :0%;
}
.circle{
display:inline-block;
width:100px;
height:100px;
border-radius:100%;
background-color:rgba(155,121,200,0.6);
position:fixed:
top:80px;
right:0;
z-index:1;
}
nav{
margin-top:130;
padding:30px;
}
.dropdown{
position:relative;
display:inline-block;
}
.dropdown-content a{
border-bottom:1px solid yellow;
display:block;
color:#eee;
background-color:#666;
padding:8px;
}
.dropdown-content {
display:none;
width:100%;
box-shadow:0 8px 16px 0 ragb(0,0,0,0.5);
}
.dropdown:hover .dropdown-content{
display:block;
}
button{
padding:16px 32px;
background-color:#4a4;
color:fff;
border:0;
}
form{
display:block;
margin:30px 0;
}
input:active{
background-color:#ee9;
}
input{
width:70%;
padding:1em;
}
input:hover{
background-color:yellow;
}
input[type=submit],input[type=reset]{
width:100px;
height:50px;
background-color:#4a4;
}
</style>
</head>
<body>
<header>
<h1>LJHeee's Blog ----</h1>
</header>
<nav>
<!--整体-->
<div class="dropdown">
<button type="button" name="button" > Home </button>
<!--子元素-->
<div class="dropdown-content">
<a href="my.csdn.net/ljheee" target="_blank">Item1 </a>
<a href="#">Item2 </a>
<a href="#">Item3</a>
<a href="#">Item4 </a>
</div>
<br />
<form>
</div >
<label>XXXX</label>
<input type="text" name="XX" />
<div>
</div >
<label>XXXX</label>
<input type="text" name="XX" />
<div>
</div >
<label>XXXX</label>
<input type="text" name="XX" />
<div>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</div>
</nav>
<footer>
Copyright (c)2016
</footer>
</body>
</html>