Lid |
|
Hallo,
Ik heb een drop down menu met een balk als achtergrond. Nu als ik met mijn muis over de button ga moet hij een vakje onder de button tonen zoals een normale dropdownmenu zou moeten doen, maar mijn vakje komt achter mijn balk te staan i.p.v onder de button "DJ Set", hier een screentje:
Hier
Hier mijn opmaak in HTML:
<div class="container_header">
<div class="menu_balk">
<div class="menu_spacer"></div>
<a href="/homepage"><img src="/images/menu_homepage.gif" id="menu_homepage" border="0" onMouseOver="this.src=homepage_over.src" onMouseOut="this.src=homepage.src" /></a>
<div class="menu_spacer"></div>
<a href="/bio"><img src="/images/menu_bio.gif" id="menu_bio" border="0" onMouseOver="this.src=bio_over.src" onMouseOut="this.src=bio.src" /></a>
<div class="menu_spacer"></div>
<a href="/photos"><img src="/images/menu_photos.gif" id="menu_photos" border="0" onMouseOver="this.src=photos_over.src" onMouseOut="this.src=photos.src" /></a>
<div class="menu_spacer"></div>
<a href="/set" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '100px')" onMouseout="delayhidemenu()"><img src="/images/menu_set.gif" id="menu_set" border="0" onMouseOver="this.src=set_over.src" onMouseOut="this.src=set.src" /></a>
<div class="menu_spacer"></div>
<a href="/contact"><img src="/images/menu_contact.gif" id="menu_contact" border="0" onMouseOver="this.src=contract_over.src" onMouseOut="this.src=contract.src" /></a>
<div class="menu_spacer"></div>
</div>
<div class="header"></div>
</div>
<div class="container_header"> <div class="menu_spacer"></div> <a href="/homepage"><img src="/images/menu_homepage.gif" id="menu_homepage" border="0" onMouseOver="this.src=homepage_over.src" onMouseOut="this.src=homepage.src" /></a> <div class="menu_spacer"></div> <a href="/bio"><img src="/images/menu_bio.gif" id="menu_bio" border="0" onMouseOver="this.src=bio_over.src" onMouseOut="this.src=bio.src" /></a> <div class="menu_spacer"></div> <a href="/photos"><img src="/images/menu_photos.gif" id="menu_photos" border="0" onMouseOver="this.src=photos_over.src" onMouseOut="this.src=photos.src" /></a> <div class="menu_spacer"></div> <a href="/set" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '100px')" onMouseout="delayhidemenu()"><img src="/images/menu_set.gif" id="menu_set" border="0" onMouseOver="this.src=set_over.src" onMouseOut="this.src=set.src" /></a> <div class="menu_spacer"></div> <a href="/contact"><img src="/images/menu_contact.gif" id="menu_contact" border="0" onMouseOver="this.src=contract_over.src" onMouseOut="this.src=contract.src" /></a> <div class="menu_spacer"></div>
Hier mijn stukje CSS:
div.menu_balk {
background-image: url(images/menu_balk.png);
background-repeat: repeat-x;
width: 100%;
max-width: 1024px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
div.menu_spacer {
width: 75px;
height: 50px;
float: left;
}
#menu_set, #menu_set a {
width: 100px;
height: 50px;
background-image: url(images/menu_set.gif);
float: left;
}
#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font-family:Verdana, Arial;
font-size: 10px;
text-decoration:none;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #444444;
}
div.menu_balk { background-image: url(images/menu_balk.png); background-repeat: repeat-x; width: 100%; max-width: 1024px; height: 50px; position: absolute; top: 0px; left: 0px; } div.menu_spacer { width: 75px; height: 50px; float: left; } #menu_set, #menu_set a { width: 100px; height: 50px; background-image: url(images/menu_set.gif); float: left; } #dropmenudiv{ position:absolute; border:1px solid black; border-bottom-width: 0; font-family:Verdana, Arial; font-size: 10px; text-decoration:none; line-height:18px; z-index:100; } #dropmenudiv a{ width: 100%; display: block; text-indent: 3px; border-bottom: 1px solid black; padding: 1px 0; text-decoration: none; font-weight: bold; } #dropmenudiv a:hover{ /*hover background color*/ background-color: #444444; }
En hier het javascript documentje:
Plaatscode: 141192
Hoe zou dit komen?
|