Super simple menu

Only CSS: With a little effort you can make a multilevel side menu

by Ovi Stof

HTML

<div  id="simpleMenu">
			<ol>
				<li><a href="#">Level</a>
					<ol>
						<li><a href="#">SubLevel</a>
							<ol>
								<li><a href="#">Paragraph</a></li>
								<li><a href="#">Paragraph</a>
									<ol>
										<li><a href="#">SubParagraph</a></li>
										<li><a href="#">SubParagraph</a></li>								
									</ol>
								</li>
							</ol>
						</li>
						<li><a href="#">SubLevel</a>
							<ol>
								<li><a href="#">Paragraph</a></li>
								<li><a href="#">Paragraph</a></li>
							</ol>            
						</li>
					</ol>
				</li>
				<li><a href="#">Level</a>
					<ol>
						<li><a href="#">SubLevel</a></li>
						<li><a href="#">SubLevel</a></li>	
					</ol>
				</li>
			</ol>
		</div>

CSS

#simpleMenu ol li ol {display:none}
#simpleMenu ol li:hover > ol {display: block}
#simpleMenu ol {
	counter-reset: numer;
	list-style-type: none;
	}
#simpleMenu ol li::before {
	counter-increment: numer;
	content: counters(numer,".") " - ";
	}
#simpleMenu li {background:lightyellow; border-bottom:1px solid gray;padding:12px 6px;}  
#simpleMenu ol li:hover {border:none;}
#simpleMenu a {text-decoration:none;}