After reading numerous tutorials and spending hours trying to create a submenu on hover, I still can't seem to get it to work. My goal is to display "Zimmer", "Reservierung", and "Preise" in a vertical menu when hovering over "Hotel," and so on. Here is my code:
a {
text-decoration: none;}
nav {
height: 50px;
clear: both;}
nav ul {
padding: 5px 0px;
text-align: center;}
nav li {
margin: 0px;
display: inline;
padding: 0px;}
nav li a {
font-size: 18px;
color: #775923;
padding: 0px 20px;
margin: 0px;}
nav li a:hover, nav li a.current {
color: #775923;
padding: 0px 20px 14px 20px;
-webkit-padding-after: 15px;
box-shadow: 0 4px #b1d130;}
nav ul ul{
display: none;}
nav ul li:hover ul {
display: block;}<nav>
<ul>
<li><a href="#" class="current">Willkommen</a></li>
<li><a href="#">Hotel</a></li>
<ul>
<li><a href="#">Zimmer</a></li>
<li><a href="#">Reservierung</a></li>
<li><a href="#">Preise</a></li>
</ul>
<li><a href="#">Restaurant</a></li>
<ul>
<li><a href="#">Speisekarte</a></li>
<li><a href="#">Anlässe</a></li>
</ul>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Kontakt</a></li>
<ul>
<li><a href="#">Team</a></li>
<li><a href="#">Über Uns</a></li>
</ul>
</ul>
</nav>Link: http://jsfiddle.net/AuJeF/445/
I am hopeful that someone can assist me with this issue. Thank you.