Simple Horizontal Menu

Only CSS

by Ovi Stof

HTML

<div  id="navbar">
			<ul>
				<li><a href="#">Level</a>
					<ul>
						<li><a href="#">SubLevel</a>
							<ul>
								<li><a href="#">Paragraph</a></li>
								<li><a href="#">Paragraph</a>
									<ul>
										<li><a href="#">SubParagraph</a></li>
										<li><a href="#">SubParagraph</a></li>								
									</ul>
								</li>
							</ul>
						</li>
						<li><a href="#">SubLevel</a>
							<ul>
								<li><a href="#">Paragraph</a></li>
								<li><a href="#">Paragraph</a></li>
							</ul>            
						</li>
					</ul>
				</li>
				<li><a href="#">Level</a>
					<ul>
						<li><a href="#">SubLevel</a></li>
						<li><a href="#">SubLevel</a></li>	
					</ul>
				</li>
			</ul>
		</div>

CSS

#navbar ul {list-style-type: none;margin:0;padding:0;}
#navbar ul li {float:left; border-top:1px solid red;width:200px;}
#navbar ul li ul {display:none}
#navbar ul li:hover > ul {display: block;}
#navbar ul li:hover > ul li {float:none;width:180px;margin-left:5px;}
#navbar ul li:hover > ul li:before {content:"- ";}
#navbar ul li:hover > ul li:hover > ul li:before {content:"* ";}
#navbar ul li:hover > ul li:hover > ul li:hover > ul li:before {content:"> ";}
#navbar li {background:lightyellow; border-bottom:0px solid gray;padding:12px 6px;}