JSFiddle - React, Tailwind, and code Playground

HTML

<div id="namenu">
				<ul id="menu">
					<li> 	
						<a href="#">Muzyka</a>
						<ul>
							<li>
								<a href="#">Korn</a>
							</li>
							<li>
								<a href="#">Kazik</a>
							</li>
						</ul>
					</li>
					<li>
						<a href="#">Książki</a>
						<ul>
							<li>
								<a href="#">Shadows of the Apt</a>
							</li>
							<li>
								<a href="#">Wiedźmin</a>
							</li>
						</ul>
					</li>
					<li> 
						<a href ="#">Szkoła</a>
						<ul>
							<li>
								<a href="#">C++</a>
							</li>
							<li>
								<a href="#">Html&amp;CSS</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>

CSS

/* MENU START  
---------------------------------------------------------------*/

#namenu { /* div w którym jest menu */
	position: absolute;  /*pozycjonowanie */
	/*top:152px;			/*pozycjonowanie */
}

#menu { /* unordered list z menu */
	list-style: none; /*Nie ma badziewnych kropek */
	
	height: 40px;
	position:relative;
	font-size: 16px;
    margin: 0px;
	padding: 0px;
}

#menu li {
	display: inline; /* brak badziewnych kropek? */
	position: relative; /* Brak automatycznych enterów (są w jednej linii) */
	float: left; /* Nie ma przerwy pomiędzy kolejnymi rzeczami */
	
	background-color: #000;
	color: white;
}

#menu>li a {
	display: block;

	text-decoration: none;
	color: white;
	width: 120px;
	text-align: center;
	padding-top: 10px;
	padding-bottom:10px;
}

#menu ul {
	display: none;
	position: absolute; /* Magiczne polecenie, nie przesuwa divów poniżej (pod) subitemami */
    margin: 0px;
	padding: 0px;
}

#menu li:hover ul{
	display: inline;
}

#menu>li>a ul{

	text-decoration: none;
	color: white;
	width: 120px;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* MENU KONIEC 
---------------------------------------------------------------*/