我想用CSS3写个下拉的组件<nav>
<ul>
<li><a href="">主页</a></li>
<li><a href="">新闻</a></li>
<div class="dropdown">
<li><a href="">下拉菜单</a></li>
<div class="dropdown-content">
<ul>
<li><a href="">链接1</a></li>
<li><a href="">链接2</a></li>
<li><a href="">链接3</a></li>
</ul>
</div>
</div>
</ul>
</nav>body{
margin: 0px;
padding: 0px;
}
nav{
background: rgb(51, 51, 51);
height: 60px;
}
nav ul li{
list-style: none;
padding: 0px;
margin: 0px;
}
nav ul{
padding: 0px;
margin: 0px;
}
nav>ul>li>a, .dropdown>li>a{
color: white;
font-size: 20px;
text-decoration: none;
display: inline;
line-height: 60px;
float: left;
margin-left: 40px;
text-align: center;
width: 80px;
}
.dropdown{
position: relative;
}
.dropdown-content>ul>li>a{
color: black;
font-size: 20px;
text-decoration: none;
}
.dropdown-content{
position: absolute;
top: 60px;
right: 0px;
}为什么<a>有高度，<li><ul>都没有高度？DOM不会根据里层的元素确定外层元素的宽高吗？
添加回答
举报
0/150
提交
取消