login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Dropdown menu, probleem met hover AND uitlijnen

Offline Baratheon - 18/12/2013 18:46
Avatar van BaratheonNieuw lid Ik ben op dit moment een eigen site voor school aan het bouwen, ik heb tot nu toe alles in elkaar gezet dmv div tags.

Tot zover ben ik tevreden met mijn site, maar ik wil graag een dropdown menu. Hier loop ik echter vast.

Het probleem waar ik tegen aan loop is dat ik mijn dropdown menu niet goed uitgelijnd krijg. Ik heb gewerkt met UL en LI's. Mijn menu word verticaal en ik wil dat mijn list items links tevoorschijn komen. Op dit moment staan ze er schuin onder en ik weet niet hoe ik ze links moet uitlijnen..

Verder gedragen mijn tekst items zich als knoppen.

Ik heb al duizenden tutorials bekeken, verschillende codes bekeken en aangepast maar ik kom er gewoon niet uit.

Ik hoop dat er iemand is die mij op zeer korte termijn kan helpen, dit is een belangrijk school project wat aankomende vrijdag ingeleverd moet worden. (en ja, ik ben zeer op tijd begonnen alleen dit menu heeft me ontzettend veel tijd gekost en uiteindelijk werkt het nog niet..)


Dit zijn de codes die ik heb:
HTML:

<ul id="navmenu">
<li><a href="#">biografie</a></li>
<li><a href="#">reportages</a>
<ul class="sub1">
<li><a href="#">mundial 2013</a>
<li><a href="#">ria franc</a>
<li><a href="#">spoorzone</a>
</ul>
<li><a href="#">producten</a></li>
<ul class="sub2">
<li><a href="#">food</a>
<li><a href="#">sfeer</a>
</ul>
<li><a href="#">diverse</a></li>
<ul class="sub3">
<li><a href="#">paarden</a>
<li><a href="#">random</a>
</ul>
</li>
</ul>

CSS:

* {
margin: 0 px;
padding: 0 px;
}
ul#navmenu, ul.sub1, ul.sub2, ul.sub3 {
list-style-type: none;
}
ul#navmenu li {
outline: 1px solid red;
width: 80px;
position: relative;
text-align:right;
margin-top: 3px;

}
ul#navmenu a {
text-decoration: none;
display: block;
}
ul#navmenu li:hover > a {
background-color: #0F0;
}
ul#navmenu li:hover a {
}
ul#navmenu ul.sub1, ul.sub2, ul.sub3 {
display: block;
position: abosulute;
}


Zo ziet het er op dit moment uit:
[IMG]http://i39.tinypic.com/2aeyxcz.png[/IMG]

Wat me ook op valt, is dat het kopje "Reportages", doorloopt tot aan "Spoorzone", dit is bij de andere kopjes niet..



Ik zit hier nu al zo lang mee te stoeien dat ik door de bomen het bos niet meer zie.. Wie o wie kan mij hierin helpen? Ik heb nu een index pagina vast online gezet met wat ik zelf heb geknutseld, maar het werkt niet bij iedereen (hover ruimte is te lang, maar ik krijg dit niet aangepast)

http://www.kimvanderveeke.nl/

4 antwoorden

Gesponsorde links
Offline Thomas - 18/12/2013 19:01
Avatar van Thomas Moderator Ik denk dat je al een heel eind komt als je je list-items (<li>) op de goede plekken afsluit, dat voorkomt onvoorspelbaar gedrag tussen verschillende browsers.

Zoiets dus:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <ul id="navmenu">
  2.     <li><a href="#">biografie</a></li>
  3.     <li><a href="#">reportages</a>
  4.         <ul class="sub1">
  5.             <li><a href="#">mundial 2013</a></li>
  6.             <li><a href="#">ria franc</a></li>
  7.             <li><a href="#">spoorzone</a></li>
  8.         </ul>
  9.     </li>
  10.     <li><a href="#">producten</a>
  11.         <ul class="sub2">
  12.             <li><a href="#">food</a></li>
  13.             <li><a href="#">sfeer</a></li>
  14.         </ul>
  15.     </li>
  16.     <li><a href="#">diverse</a>
  17.         <ul class="sub3">
  18.             <li><a href="#">paarden</a></li>
  19.             <li><a href="#">random</a></li>
  20.         </ul>
  21.     </li>
  22. </ul>


Ook het "inspringen" in de code kan je hierbij helpen qua leesbaarheid en of het op HTML-gebied "in de haak" is.
Offline UpLink - 18/12/2013 19:02
Avatar van UpLink ... FangorN was me voor  
Offline Baratheon - 18/12/2013 19:25
Avatar van Baratheon Nieuw lid Ja, die zag ik al! Had ze al aangepast maar heb het niet meer aangepast hier Maar toch bedankt! Heb er verder nog wat andere kleine foutjes tussen uit gehaald. Zo zijn m'n codes op het moment:

HTML:
<ul id="navmenu">
<li><a href="#">biografie</a></li>
<li><a href="#">reportages</a>
<ul class="sub1">
<li><a href="#">mundial 2013</a>
<li><a href="#">ria franc</a>
<li><a href="#">spoorzone</a>
</ul>
<li><a href="#">producten</a>
<ul class="sub2">
<li><a href="#">food</a>
<li><a href="#">sfeer</a>
</ul>
<li><a href="#">diverse</a>
<ul class="sub3">
<li><a href="#">paarden</a>
<li><a href="#">random</a>
</ul>
</li>
</ul>


CSS:
* {
margin: 0px;
padding: 0px;
}
ul#navmenu, ul.sub1, ul.sub2, ul.sub3 {
list-style-type: none;
}
ul#navmenu li {
outline: 1px solid red;
width: 80px;
position: relative;
text-align:right;
margin-top: 3px;

}
ul#navmenu a {
text-decoration: none;
display: block;
}
ul#navmenu li:hover > a {
background-color: #0F0;
}
ul#navmenu li:hover a {
}
ul#navmenu ul.sub1, ul.sub2, ul.sub3 {
display: block;
}



Alles in mijn menu staat nu onder elkaar.
Offline Thomas - 20/12/2013 14:32
Avatar van Thomas Moderator Is daarmee je probleem opgelost? Zoja, markeer het topic als opgelost.
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.178s