Блок - стиль навигации без разрушения - PullRequest
0 голосов
/ 18 сентября 2018

там я хотел бы иметь навигацию, которая построена как блок, но его элементы не разрушают макет. enter image description here Проблема: Как вы можете видеть, зависание - Эффект очень большой. Как я могу сделать так, чтобы он выглядел как блочная навигация, без элементов, отображаемых как блок, или как мне все еще использовать 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>
...