Flex DropDown Menü fast geschafft, leider nicht ganz

iago111 · 01.03.2020

Hallo,

Ich hab ein responsives Menü mit Flex gestaltet. Mobil first Ansatz, unter 576px soll auch alles so bleiben wie es ist

Leider schaffe ich es nicht ganz aus einem horizontalen Menü (>576px) ein Dropdown Menü zu machen. Prinzipiell läuft es. Die Listeneinträge des Hauptmenüs vergrössern sich bei hover jedoch.

Ich wollte fragen, ob mit jemand eine Tip hat, (also wie gesagt für kleine Bildschirme ist alles ok)

Hier ist der Code:

HTML:

<head>
    
	<style type="text/css">
			
			
	* {
		font-family:Verdana;
		margin:0px;
						
		}
		
	.wrapper {
		
		width:100%;
		max-width:960px;
		margin: 0 auto;
		
		}	
		
	nav {
		
		background:#333;
		
		}		
			
	nav ul {
		
		list-style-type:none;
		padding:0;	
		
		}		
		
	nav a {
		
		text-decoration:none;
		
		text-align:center;
		color:#fff;
		padding:10px;
		display:block;
		background:#777;
		
		}	
		
	nav a:hover {
		
		background-color:#555;
		
		}
		
	/* social media base styles */
	
	a.tw {
		
		background:url(img/twitter.png) no-repeat center;	
		background-size:80%;
			
		}
		
	a.fb {
		
		background:url(img/facebook.png) no-repeat center;	
		background-size:80%;
			
		}	
		
	.social a {
		text-indent: -10000px;  
		
		}			
		
	.social {
		max-width:80px;  /* shrink icons again */
		margin:0 auto;   /* centralize icons */
		
		}	
		
		
	/***************  sub menue  **************/
	
	nav ul li > ul {
			
			display: none;	
			flex-direction: column;	
			
			}
			
	nav ul li > ul li {
			
			width:100%;
			
			}			
			
	
	nav ul li:hover > ul {			
		
			display:flex;
			
			}	
			
					
	/***********************************************/				
			
		
		
	/* Flex styles */
	
	
	nav ul.social {	
		flex:1 1 0;   /* flex property to let the icons grow */
		display:flex;  /*  align icons horizontally */
		
		}
		
	nav ul.social li {
		
		flex:1 1 0;   /*grow icons again */
		
		}	
	
	
	@media screen and (min-width:576px)  {
		
		
		nav ul {
			
			display:flex;	
			width:600px;
			background:#bb1919;
			
		}
		
		nav li {
			
			
			flex:1 0 0;
			
			}
			
		
		nav {
				
				display:flex;
				justify-content:space-between;
				
			}
			
			.social {

	                       margin:0;   
		} 	
	
	}
			
		
		</style>
		
	
	</head>
	
	
<body>

	<div class="wrapper">
		
	  <nav>
		
		<ul>
		
		 <li><a href="#">Home</a></li>
		 <li><a href="#">About</a></li>
		 <li><a href="#">Store</a>
		 
			<ul class="dropdown">
				<li><a href="#">Item One</a></li>
				<li><a href="#">Item Two</a></li>
				<li><a href="#">Item Three</a></li>
				
			
			
			
			</ul>
		 
		 </li>
		 <li><a href="#">Contact</a></li>
		
		</ul>
		
		<ul class="social">
			<li><a href="" class="fb">Facebook</a></li>
			<li><a href="" class="tw">Twitter</a></li>
		
		</ul>
		
	  </nav>	
	
	</div>

	</body>
	
	</html>