您的位置：首页 > Web前端 > HTML

HTML如何实现导航的二级菜单

2016-04-29 22:29 316 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML如何实现 导航的二级菜单

HTML如何实现导航的二级菜单