我想拥有一个像块一样构建的Navigation,但是其Elements不会分解布局。
问题:如您所见,悬停-效果为ul宽。
我如何才能使它看起来像一个块导航,而没有将元素显示为块,还是如何仍可以使用display:block
使悬停效果合理?
nav{
width:100%;
height:60px;
font-family: 'Quicksand', sans-serif;
background-color:#7b2e1e;
position:fixed;
top:0;
z-index: 999;
}
/* #7b2e1e*/
#wrapper{
width:80%;
height:100%;
margin:0px auto;
position: relative;
}
ul{
width:55%;
display:block;
list-style: none;
position:absolute;
top:50%;
right:10%;
transform: translateY(-50%);
text-align: right;
}
li{
display:inline-block;
margin:9px;
position:relative;
margin-left: 25px;
}
a{
text-decoration: none;
color:black;
transition: all ease-in-out 0.2s;
text-transform: uppercase;
}
a:hover{
color:red;
}
#place{
width:100%;
height:20vh;
position: relative;
float: left;
left:0px;
top:0;
border:1px solid black;
border-top:2px solid black;
}
#resize{
position: absolute;
left:0;
width:auto;
text-align: left;
}
#resize li{
display:block;
}
<nav>
<div id ="wrapper">
<div class="logo" >
<h2> Navbar </h2>
</div>
<ul>
<li><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Pricings </a></li>
<li><a href="#"> Blog </a></li>
<li><a href="#" class="exclusive"> Contact </a></li>
</ul>
<div id="toggle">
<div id="one" class="line"> </div>
<div id="two" class="line"> </div>
<div id="three" class="line"> </div>
</div>
</div>
<div id="place">
<ul id="resize">
<li><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Pricings </a></li>
<li><a href="#"> Blog </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</div>
</nav>