Dropdown menu - One2xs Forum

Lid · Topicstarter

Berichten: 3.788
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 12 jun 2025

18 feb 2011, 20:29

Hallo,

Ik ben bezig met een dropdown menu, alleen gaat dit nog niet helemaal goed!
Het is momenteel zo:

Het linker stuk is de dropdown zoals hij is bij het eerste menu item, helemaal goed!
Alleen de rechter is bij het 2de menu item, niet helemaal goed...
Hoe zorg ik ervoor dat dit netjes onder het menu item komt te staan, ipv helemaal vooraan?
Is er een of andere manier waardoor je de positie van iets kan doorgeven?

Danderend

Lid

Berichten: 474
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 12 jun 2025

18 feb 2011, 20:49

plaats je css ff dan kunnen we je misschien beter helpen!

Eleky

Lid · Topicstarter

Berichten: 3.788
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 12 jun 2025

18 feb 2011, 20:53

HTML:

Spoiler tonen

<div class="menu">
    <div class="houder">
        <ul>
            <li onmouseover="ShowSub(home)" onmouseout="HidSub(home)">
                <a href="" id="a-home"><span id="span-home">Home</span></a>
                <div class="submenu" id="sub-home">

                    <div class="subtop"></div>
                    <div class="submid">
                        <br /><br /><br />
                    </div>
                    <div class="subbot"></div>
                </div>
            </li>
            <li onmouseover="ShowSub(about)" onmouseout="HidSub(about)">
                <a href="" id="a-about"><span id="span-about">About</span></a>

                <div class="submenu" id="sub-about">
                    <div class="subtop"></div>
                    <div class="submid">
                        <br /><br /><br />
                    </div>
                    <div class="subbot"></div>
                </div>
            </li>
       </ul>
       </div>
 </div>

CSS:

Spoiler tonen

.menu ul{ padding:0; margin:0; }
.menu ul li{ list-style:none; margin:0; padding:0; display:inline; }
.menu a{ display:inline-block; height:37px; margin-top:3px; color:#FFF; }
.menu a span{ display:inline-block; height:26px; margin-left:5px; font-size:13px; padding-left:9px; padding-top:10px; padding-right:18px; margin-top:1px; }
.menu a.act{ background-image:url(../images/layout/menuhoverbg.png); color:#30c1f1; }
.menu a span.act{ background-image:url(../images/layout/menuhoverbgr.png); background-position:right; background-repeat:no-repeat; }

.menu ul li .submenu{ position:absolute; margin-left:1px; display:none; }
.menu ul li .submenu .subtop{ background-image:url(../images/layout/submenutop.png); height:9px; width:247px; }
.menu ul li .submenu .submid{ background-image:url(../images/layout/submenum.png); width:247px; height:auto; }
.menu ul li .submenu .subbot{ background-image:url(../images/layout/submenubot.png); width:247px; height:8px; }

Javascript:

Spoiler tonen

function ShowSub(menu){
    document.getElementById(sub-+menu).style.display = inline-block;
    document.getElementById(a-+menu).className = act;
    document.getElementById(span-+menu).className = act;
}

function HidSub(menu){
    document.getElementById(sub-+menu).style.display = none;
    document.getElementById(a-+menu).className = ;
    document.getElementById(span-+menu).className = ;
}

Martijnn

Lid

Berichten: 160
Reputatie: 0
Punten: 0,00

Lid sinds: 2010
Laatst gezien: 12 jun 2025

19 feb 2011, 13:40

het kan ook zonder javascript
www.sceneone.nl/elements/layout_results.php?which_layout=drop_down4

Eleky

Lid · Topicstarter

Berichten: 3.788
Reputatie: 0
Punten: 0,00

Lid sinds: 2009
Laatst gezien: 12 jun 2025

19 feb 2011, 14:57

Maar als je iets verder had gekeken had je gezien dat er op die site bij staat dat zonder js niet werkt in IE!

Maar laat het nu doen, dus we zullen zien wat daar uitkomt!