css 导航栏
下拉需要注意ul里的溢出.
也可以用按钮来做下拉.
<!doctype html>
<html>
<head>
<style>
ul{
list-style-type:none;
margin-top:0;
margin-left:20%;
padding:0;
overflow:visible;
background-color:#f3f3f3;
position:fixed;
top:0;
width:60%;
}
li{
float:left;
}
li a{
display:block;
color:#666;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover:not(.active){
background-color:#ddd;
}
li a.active{
color:white;
background-color:#4caf50;
}
li a.red{
color:white;
background-color:red;
}
li.dropbtn {
display: inline-block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#home">home</a></li>
<li><a href="#new">new</a></li>
<li class="dropdown">
<a href="javascript:void(0)"
class="dropbtn">更多</a>
<div class="dropdown-content">
<a href="#1">link 1</a>
<a href="#2">link 2</a>
<a class="red" href="#3">link 3</a>
</div>
</li>
<li style="float:right"><a href="#about">about</a></li>
</ul>
</body>
</html>系列：notes
该系列自动来自分类： notes
- Debian创建新用户和设置防火墙
- mac在Debian安装wireguard和使用
- 再也不买不能解bl的手机了
- Firefox设置
- debian安装FFmpeg来合并youtube音频
- css 扩散列表
- 两个练习
- css RWD
- css 图片
- css 提示
- css 下拉
- css 表单
- css 导航栏 (当前)
- css 单词
- HTML SVG
- HTML Canvas
- HTML input
- HTML 结构
- 电气施工图说明
- china uses dropbox
- Nginx installs SSL certificates
- debian install shadowsocks
- Visual studio code set the python environment
- install hexo