块式导航,不会分解

时间:2018-09-18 10:43:35

标签: html css navigation block

我想拥有一个像块一样构建的Navigation,但是其Elements不会分解布局。 enter image description here 问题:如您所见,悬停-效果为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>

0 个答案:

没有答案