How Do I Add A Horizontal Submenu? Can't Figure It Out, Added Html And Css
Hey I would like to have a dropdown sub- menu in the same style, I know it's simple but I'm still new to making websites and I can't figure it out by myself. here's my HTML
Solution 1:
You closed the li
that will hold the submenu ul
too early.
Try working with this:
<nav>
<ul>
<li><a href="./index.html"><span class ="s2">Startpagina</span></a></li>
<li><a href="./aanwinsten.html">Aanwinsten</a></li>
<li><a href="./catalogus.html">Catalogus</a>
<ul class="sub">
<li><a href="#">Pages</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">New Posts</a></li>
</ul>
</li> **<! - See the difference?-->**
<li><a href="./uitlening.html">Uitlening</a></li>
<li><a href="./reservatie.html">Reservatie</a></li>
<li><a href="./suggestie.html">Suggestie</a></li>
<li><a href="./contact.html">Contact</a></li>
</ul>
</nav>
Solution 2:
The problem lies here:
<li><a href="./catalogus.html">Catalogus</a></li>
<ul class="sub">
<li><a href="#">Pages</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">New Posts</a></li>
</ul>
<li><a href="./uitlening.html">Uitlening</a></li>
You need to keep the <ul>
inside the previous <li>
. So make it this way:
<li><a href="./catalogus.html">Catalogus</a>
<ul class="sub">
<li><a href="#">Pages</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">New Posts</a></li>
</ul></li>
<li><a href="./uitlening.html">Uitlening</a></li>
And now you can give the styling by positioning the <UL>
tag in such a way that when you hover your mouse over the LI
it shows up.
li.drop ul {display: none; position: absolute;}
li.drop {position: relative}
li.drop:hover ul {display: block; left: auto; top: auto;}
Post a Comment for "How Do I Add A Horizontal Submenu? Can't Figure It Out, Added Html And Css"