我的目的是制作一个顶部导航栏,其中的列表项 PROJECTS
应该是一个下拉菜单。到目前为止,下拉菜单正在工作,但它需要与父元素一样多的宽度。我想在不更改格式属性的情况下将下拉内容与导航项分离,这样它就占据了其项目所需的空间,并且还位于 PROJECTS
的正下方。
我的代码:
body{
margin: 0;
padding: 0;
}
nav ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li{
float: left;
}
nav li a{
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active){
background-color: #444;
}
nav li a.active{
background-color: rgba(0, 150, 0, 1);
}
main{
padding-top: 30px;
}
.dropdown_content{
display: none;
width: auto;
}
.dropbtn:hover .dropdown_content{
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> <a href="#" class="active">Home</a> </li>
<li> <a href="#">About</a> </li>
<li class="dropbtn">
<a href="#">Projects</a>
<div class="dropdown_content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</div>
</li>
<li> <a href="#">Contact</a> </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
我想要的样子(图片已编辑)
提前致谢。
答案 0 :(得分:2)
你可以试试absolute positioning。
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
font-size: 0;
}
nav li {
display: inline-block;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
font-size: 16px;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
position: absolute;
display: none;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li> <a href="#" class="active">Home</a> </li>
<li> <a href="#">About</a> </li>
<li class="dropbtn">
<a href="#">Projects</a>
<div class="dropdown_content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</div>
</li>
<li> <a href="#">Contact</a> </li>
</ul>
</nav>
</header>
<main>
</main>
<footer>
</footer>
</body>
答案 1 :(得分:2)
只需为 position: fixed
添加 background-color: #666666
和 dropdown_content
。像这样:
.dropdown_content {
...
position: fixed;
background-color: #666666;
}
这不会破坏下拉菜单的定位,因为 ul
标签也有固定的定位。
body {
margin: 0;
padding: 0;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
background-color: #666666;
position: fixed;
top: 0px;
}
nav li {
float: left;
}
nav li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
padding: 15px;
display: block;
}
nav li a:hover:not(.active) {
background-color: #444;
}
nav li a.active {
background-color: rgba(0, 150, 0, 1);
}
main {
padding-top: 30px;
}
.dropdown_content {
display: none;
width: auto;
position: fixed;
background-color: #666666;
}
.dropbtn:hover .dropdown_content {
display: block;
}
<body>
<header>
<nav class="nav">
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropbtn">
<a href="#">Projects</a>
<div class="dropdown_content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
</div>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>