CSS Snippets

Horizontales Menü vertikales Submenü

<div id="menu">
	<ul>
		<li><a href="">Link1</a>
			<ul>
				<li>Unterlink 1</li>
				<li>Unterlink 2</li>
				<li>Unterlink 3</li>
			</ul>
		</li>
		<li><a href="">Link2</a>
			<ul>
				<li>Unterlink 1</li>
				<li>Unterlink 2</li>
				<li>Unterlink 3</li>
			</ul>
		</li>
	</ul>
</div>

#menu a 
    color: white;
    text-decoration: none;
}
 
#menu li {
    display: inline-block;
    list-style-type: none;
    background-color: blue;
    color: white;
    padding: 5px 10px;
    margin-right: 5px;
}
 
#menu > ul > li {
    position: relative;
}
 
#menu > ul > li > ul {
    position: absolute;
    top: 100%;
    padding-left: 0;
    width: 15rem;
    display: none;
}
 
#menu > ul > li > ul > li {
    display: block;
}
 
#menu > ul > li:hover > ul {
    display: block;
}

Vertikales Menü vertikaes Submenü

<div id="menu">
	<h1>Spieler 1</h1>
	<ul>
		<li><a href="">Link1</a>
			<ul>
				<li>Unterlink 1</li>
				<li>Unterlink 2</li>
				<li>Unterlink 3</li>
			</ul>
		</li>
		<li><a href="">Link2</a>
			<ul>
				<li>Unterlink 1</li>
				<li>Unterlink 2</li>
				<li>Unterlink 3</li>
			</ul>
		</li>
	</ul>
</div>

#menu a {
    color: white;
    text-decoration: none;
}
 
#menu li {
    display: inline-block;
    list-style-type: none;
    background-color: blue;
    color: white;
    padding: 5px 10px;
    margin-right: 5px;
}
 
#menu > ul > li{
    position: relative;
} 
 
#menu > ul > li > ul{
    position: absolute;
    top: 0;
    width: 15rem;
    display: none;
}
 
/*Für Submenü rechts*/
#menu > ul > li > ul {
    left: 100%;
}
 
/*Für Submenü links*/
#menu > ul > li > ul {
    right: 100%;
}
 
#menu > ul > li:hover > ul{
    display: block
}