html lists - Trying to make a footer sitemap with css (the footer is made out of ul li) -
i want similar this:
http://i.stack.imgur.com/eo1dz.gif
i've been trying out few different things nothing seems make neat horizontal list picture. can me out?
<!-- footer informatie --> <footer> <section id="sitemap"> <h2>sitemap</h2> <ul> <li> <a href="#">opleiding</a> <ul> <li><a href="#">visie & beleid</a></li> <li><a href="#">opbouw studieprogramma</a></li> <li><a href="#">competenties</a></li> <li><a href="#">diploma</a></li> <li><a href="#">beroepen</a></li> </ul> </li> <li> <a href="#">onderwijsprogramma</a> <ul> <li><a href="#">mededelingen</a></li> <li><a href="#">uitagenda</a></li> <li><a href="#">propedeuse</a></li> <li><a href="#">verdieping 1</a></li> <li><a href="#">verdieping 2</a></li> <li><a href="#">afstuderen</a></li> </ul> </li> <li> <a href="#">organisatie</a> <ul> <li><a href="#">contact</a></li> <li><a href="#">blog</a></li> <li><a href="#">docenten</a></li> <li><a href="#">onderwijsbureau</a></li> <li><a href="#">stagebureau</a></li> <li><a href="#">buitenlandbureau</a></li> <li><a href="#">examencommissie</a></li> <li><a href="#">decaan</a></li> </ul> </li> <li> <a href="#">stages en projecten</a> <ul> <li><a href="#">stages</a></li> <li><a href="#">projecten</a></li> </ul> </li> </ul> </section> and css far:
#sitemap li { list-style-type:none; display: inline-block; border: 2px solid; } the inline block should make horizonal doesnt... doing wrong?
x
by using #sitemap li target every li inside #sitemap element, while in fact want target containing li's.
you might want use instead:
#sitemap > ul > li { display: inline-block; list-style-type:none; border: 2px solid; }
Comments
Post a Comment