下拉菜单
2018-06-24 01:58:41来源:未知 阅读 ()
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
li a,.dropbtn{
text-decoration:none;
font-size:20px;
font-weight:bolder;
padding:14px 16px;
color:white;
display:inline-block;
}
li a:hover,.dropdown:hover{
background-color:black;
}
.dropdown{
display:inline-block;
}
.dropdown-menu{
display:none;
position:absolute;
min-width:150px;
background-color:#b9def0;
}
.dropdown-menu a{
padding:12px 14px;
text-decoration:none;
display:block;
color:black;
}
.dropdown-menu a{
background-color:gainsboro;
}
.dropdown:hover .dropdown-menu{
display:block;
}
</style>
</head>
<body>
<ul>
<li>< a href="#">主页</a></li>
<li>
<div class=dropdown>
<a href="#" class="dropbtn">技术分享</a>
<div class="dropdown-menu">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">Javascript</a>
</div>
</ul>
</body>
</html>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash