Problem with display:none and display:block on hover

Get Started
1

Hello everyone.
I am a new starter in web design/development, trying to master html/css now.
I came across one problem that I dont know how to solve, I am sure I’ve done mistake somewhere, but have no idea where.
Trying to make nested list on hover, done few times before, everything worked fine, now not sure where I’ve done mistake, I’m sure it is a simple fix, just please show me where guys :slight_smile:

Here is the code:
HTML

<div id="navigation">
		<ul>
			<li><a href="">Pirmasis</a></li>
				
				<ul class="sublist">
					<li>Vienetas</li>
					<li>Dvejetas</li>
					<li>Trejetas</li>
					<li>Ketvertas</li>
					<li>Penketas</li>
				</ul>
				
				<ul class="sublist">
					<li>Vienuolika</li>
					<li>Dvylika</li>
					<li>Trylika</li>
					<li>Keturiolika</li>
				</ul>
				
				<div id="subdiv">
					<h4>SKAICIUS</h4>
				</div>
			<li><a href="">Antrasis</a></li>
                        ...few other <li> ...
              </ul>

CSS

body { font-family: sans-serif; width: 800px; }

#header {
	background-color: grey;
	width: 100%;
	height: 100px;
	}
	
#navigation {
	background-color: grey;
	width: 100%;
	height: 100px;
	}
	
#navigation > ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}
	
#navigation > ul > li {
	display: inline;
	}
	
#navigation li a {	
	text-decoration: none;
	padding: 5px 15px;
	margin-left: 10px;
	margin-top: 20px;
	border: 1px solid blue;
	color: black;
	background-color: white;
	float: left;
	}
.sublist, #subdiv {
	display: none;
	}
#navigation li a:hover { 
	background-color: blue; 
	color: white;
	}


	
#navigation li a:hover  .sublist { 
	background-color: red;
	display: block; }
2

Hi MrPaulius. Welcome to the forums. :slight_smile:

Yeah, your code is a bit of a mess. Give this a try:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">

.wrapper {width: 800px; margin: 0 auto;}

#navigation {
	background-color: grey;
	padding: 0;
	margin: 0;
	list-style: none;
}

#navigation:after {
	content:"";
	display:table;
	clear:both;
}

#navigation > li {
	float: left;
	position: relative;
	margin-left: 10px;
	margin-top: 20px;
}

#navigation li a {	
	text-decoration: none;
	padding: 5px 15px;
	border: 1px solid blue;
	color: black;
	background-color: white;
	display: block;
}

#navigation li a:hover { 
	background-color: blue; 
	color: white;
}

#navigation li ul {
	position: absolute;
	left: -9999px;
	background: red;
	list-style: none;
	margin: 0;
	padding: 0;
}

#navigation li:hover ul {
	left: 0;
}
</style>
	
</head>
<body>
<div class="wrapper">
	<ul id="navigation">
		<li><a href="">Pirmasis</a>
			<ul>
				<li><a href="#">Vienetas</a></li>
				<li><a href="#">Dvejetas</a></li>
				<li><a href="#">Trejetas</a></li>
				<li><a href="#">Ketvertas</a></li>
				<li><a href="#">Penketas</a></li>
			</ul>
		</li>
		<li><a href="">Pirmasis</a>
			<ul>
				<li><a href="#">Vienuolika</a></li>
				<li><a href="#">Dvylika</a></li>
				<li><a href="#">Trylika</a></li>
				<li><a href="#">Keturiolika</a></li>
			</ul>
		</li>
	</ul>
</div>
</body>
</html>