[CSS/JS] CSS Menu met drop down goed uitlijnen

[Millshot2]

Een goedeavond,

Al 2 dagen ben ik aan het kloten met een horizontaal menu opgebouwd in css, maar waar ik toch graag een dropdown in wil verwerken. Geheel in dezelfde stijl natuurlijk. Het lukt vrij aardig, maar de finishing touch lukt niet.

Een voorbeeld staat hier : http://www.millshot.nl/rpq/index.php
Als je over HOME gaat zie je een dropdown. Het moet alleen netjes onder elkaar komen te staan, ipv langs elkaar en niet netjes onder de button. Er zit ook verschil tussen FF en IE7. Om het nog wat makkelijker te maken.

Het menu heb ik van deze website : http://www.php-development.ru/javascripts/dropdown.php
Dat heb ik als volgt in de website gezet

HTML: index.html

<ul id="menubox">   
<div id="menu_parent"><li><a href="index.php">HOME</a></li></div>

<div id="menu_child">
    <ul class="dropdown">
    <li><a href="#">Item 1</a> </li>
    <li><a href="#">Item 2</a> </li>
    <li><a href="#">Item 3</a> </li>
    </ul>   
</div>

<li><a href="#">ACTUEEL</a></li>
<li><a href="#">FOTO-LAB</a></li>
<li><a href="#">KOPIËREN</a></li>
<li><a href="index.php?page=filmvideo">FILM/VIDEO</a></li>
<li><a href="#">PRODUCTEN</a></li>
<li><a href="#">SOFTWARE</a></li>
<li><a href="index.php?page=contact">CONTACT</a></li>
</ul><!-- menu -->

<script type="text/javascript">
at_attach("menu_parent", "menu_child", "hover", "xy", "pointer");
</script>

De css is als volgt

Cascading Stylesheet: index.html

ul#menubox {
margin: 0;
padding: 0;
width: 798px;
background: url(images/menu.jpg);
height: 24px;
margin-left: 41px;
list-style: none;
padding-top: 2px;
}

ul#menubox li{
font-size: 11px;
color: white;
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 16px;
width: 97px;
text-align: center;
border-right: 1px solid white;
padding-top: 4px;
}

ul#menubox li a{
font-size: 11px;
color: white;
height: 16px;
width: 97px;
display: block;
text-decoration: none;
}

ul#menubox li a:hover{
font-weight: bold;
}

ul.dropdown {
position: absolute;
margin-left: -250px;
}

ul.dropdown li a{
background: url(images/menu.jpg);
font-size: 11px;
color: white;
margin: 0;
padding: 0;
list-style: none;
height: 16px;
width: 97px;
text-align: center;
border-right: 1px solid white;
padding-top: 4px;
float: left;
}

Ik hoop dat ik zo voldoende informatie heb gegeven en alles duidelijk is.

[Tepel]

Ik heb dit laatst zelf ook gemaakt. Ben toen uitgekomen op een css-only oplossing. IE stribbelde wat tegen maar dat heb ik opgelost met "Whatever:hover"
Even al het onnodige eruit slopen en voila!

http://www.0x7f.nl/GoT/Millshot2/

moet genoeg wezen dacht ik zo

[Millshot2]

Tepel schreef op vrijdag 19 januari 2007 @ 23:46:
Ik heb dit laatst zelf ook gemaakt. Ben toen uitgekomen op een css-only oplossing. IE stribbelde wat tegen maar dat heb ik opgelost met "Whatever:hover"
Even al het onnodige eruit slopen en voila!

http://www.0x7f.nl/GoT/Millshot2/

moet genoeg wezen dacht ik zo

Bedankt voor je hulp ! Het css menu ziet er goed uit, en ook lekker zonder javascript.
1 puntje. Hier bij mij werkt die niet in IE7. FF werkt het menu wel.

Waar zou dat aan kunnen liggen ?

[Tepel]

zou het niet weten, heb zelf geen IE dus kan ook niks testen. Maar er zit wel degelijk JS in, dat zit allemaal in die htc file. Dus als ergens iets mis gaat dan is het daar.

[Verwijderd]

beetje het wiel opnieuw uitvinden...

htmldog heeft een goed css menu gemaakt op die van alistapart
http://www.htmldog.com/articles/suckerfish/dropdowns/

[XWB]

En hier de perfecte oplossing van crisp

http://therealcrisp.xs4all.nl/upload/menu.html
http://therealcrisp.xs4all.nl/upload/menu_hori.html

[Brakkie]

Hacku schreef op zondag 21 januari 2007 @ 13:28:
En hier de perfecte oplossing van crisp

http://therealcrisp.xs4all.nl/upload/menu.html
http://therealcrisp.xs4all.nl/upload/menu_hori.html

Mogen die vrij gebruikt worden

[crisp]

Brakkie schreef op zondag 21 januari 2007 @ 14:03:
[...]

Mogen die vrij gebruikt worden

ja

[Brakkie]

crisp schreef op zondag 21 januari 2007 @ 14:13:
[...]

ja

kewl thanx

_{Zitten trouwens wel wat onvolkomenheden in in IE7 bij mij. Er zit wat witruimte onder de listitems in de submenu's maar daar komen we wel uit.}

[ Voor 36% gewijzigd door Brakkie op 21-01-2007 14:20 ]