I've been grappling with this issue for a few days now and thought I'd seek help from the online community. My goal is to create a sub-menu that pops up when hovering over a link. While I've managed to get it to work somewhat, the links in the menu appear on the webpage without any formatting. Any assistance or advice would be greatly appreciated.
Here's the Fiddle
Thank you in advance.
HTML code
<body>
<nav>
<ul><li><a href="index.html">home</a></li>
<li><a href="#">venue</a>
<ul class="hidden"> <li><a href="venue.html">address</a></li>
<li><a href="venue.html#background">venue background</a></li>
<li><a href="venue.html#instructors">instructors</a></li></ul> </li>
<li><a href="wakeboarding.html">wakeboarding</a>
<ul class="hidden"> <li><a href="wakeboarding.html">background</a></li>
<li><a href="wakeboarding.html">future</a></li></ul> </li>
<li><a href="events.html">up-coming events</a>
<ul class="hidden"> <li><a href="events.html">professional</a></li>
<li><a href="events.html">amateur</a></li> </ul></li>
<li><a href="prices.html">prices</a>
<ul class="hidden"> <li><a href="prices.html">prices</a></li>
<li><a href="events.html">special offers</a></li></ul> </li>
<li><a href="contact.html">contact us</a></li></ul>
</nav>
<img src = "logo.png"
alt = "Logo" />
<form>
<input type="email" required placeholder="sign up for newsletter" /> <input type="submit" value="submit">
</form>
</body>
<br />
CSS code
body nav > ul > li {
list-style-type: none;
position: intial;
top: 110px;
//right: -200px;
display: inline;
}
body nav > ul .hidden {
opacity: 1;
position: relative;
}
body nav > ul > li:hover >.hidden {
visibility: visible;
display:block;
position:absolute;
top:10x;
}
body nav ul li {
display: inline;
padding: 80px;
font-family: Geneva,Tahoma,Verdana,sans-serif;
font-size: 24px;
}