Hulp met dropdown menu?

[Lukkiey]

Hoi allemaal,

Ik ben bezig met het maken van een template voor een website op basis van Joomla!.

Alleen loop ik tegen twee problemen aan met het maken het menu:

• Ik krijg de "tweede dropdown" niet aan de rechterkant van de "eerste dropdown". Dus bij Portfolio>huizen>'dit moet dan aan de rechterkant uitschuiven'.
• Als je over de tekst in het menu hovert, lijkt het of de andere links soms een schaduw krijgen. Ik heb al gekeken in de css, maar kon niks vinden.

Ik hoop dat iemand mij kan helpen?

HTML: index.php

<ul class="nav menu" id="nav">
    <li class="item-101 current active"><a href="/joomla3/">Home</a>

    </li>
    <li class="item-112 deeper parent"><a href="#">Over ons</a>

        <ul class="nav-child unstyled small">
            <li class="item-114"><a href="#">Nieuws</a>

            </li>
            <li class="item-116"><a href="#">Klanten</a>

            </li>
            <li class="item-117"><a href="#">Foto's</a>

            </li>
        </ul>
    </li>
    <li class="item-108 deeper parent"><a href="#">Portfolio</a>

        <ul class="nav-child unstyled small">
            <li class="item-110 deeper parent"><a href="#">Huizen</a>

                <ul class="nav-child unstyled small">
                    <li class="item-109"><a href="#">Villa's</a>

                    </li>
                    <li class="item-111"><a href="#">Appartementen</a>

                    </li>
                </ul>
            </li>
            <li class="item-122"><a href="#">Kantoren</a>

            </li>
            <li class="item-123"><a href="#">Schoolgebouwen</a>

            </li>
            <li class="item-124"><a href="#">Overheidsgebouwen</a>

            </li>
            <li class="item-125"><a href="#">Winkels</a>

            </li>
            <li class="item-127"><a href="#">Sportgebouwen</a>

            </li>
        </ul>
    </li>
    <li class="item-129"><a href="#">Contact</a>

    </li>
</ul>

Cascading Stylesheet: style.css

/*######
Navigatie
######*/
 #nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    height: 40px;
    float: left;
    margin-left: 58px;
    margin-top: 33px;
    width: 800px;
    background: #111;
    background: -moz-linear-gradient(top, #333, #111);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333), to(#111));
    border-radius: 5px 5px 5px 5px;
}
#nav ul {
    background-color: red;
    border:1px solid red;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    left: -999em;
    overflow: hidden;
    padding: 20px 0 10px;
    position: absolute;
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.2s linear;
    -ms-transition: -ms-transform 0.2s linear;
    -o-transition: -o-transform 0.2s linear;
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: transform 0.2s linear;
}
#nav li {
    margin-top: 5px;
    margin-left: 5px;
    float: left;
    position: relative;
}
#nav li a {
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    padding: 7px 20px;
    text-decoration: none;
}
#nav li:hover > a {
    background: #e73534;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
}
#nav li.parent:hover > a {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
}
#nav li:hover > a.hsubs {
    border-radius: 5px 5px 0 0;
}
#nav li:hover ul.nav-child {
    left: 0;
    top: 30px;
    min-width: 180px;
    width: auto;
    background: #e01b1a;
    background: -moz-linear-gradient(top, #e73534, #e01b1a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e73534), to(#e01b1a));
    margin: 0;
    padding: 5px 0;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
}
#nav ul li {
    margin-right: 5px;
    padding: 0;
    width: 100%;
}
#nav ul a {
    padding: 5px;
}
#nav ul li:hover > a {
    background-color: #222222 !important;
    border-radius: 5px 5px 5px 5px;
}
#nav ul ul li {
    margin: 0px;
    padding: 0px;
}
#nav ul a {
    font-size: 13px;
}
#nav ul ul {
    display: none;
}
#nav ul li:hover ul {
    display: block;
    position: relative;
    left: 100px;
}
#nav ul ul li:hover a {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

LINK OP JSFIDDLE (voor live preview):
http://jsfiddle.net/Lukkiey/wZKRJ/

[ Voor 95% gewijzigd door Lukkiey op 28-12-2013 19:38 . Reden: Duidelijker gemaakt ]

[Verwijderd]

Als een <li> tag de class parent heeft zou ik deze een relative position geven en de ul daarin genest een absolute position.

Ik hoop dat dit advies een beetje helpt.

[DJMaze]

Verwijderd schreef op maandag 30 december 2013 @ 16:50:
Als een <li> tag de class parent heeft zou ik deze een relative position geven en de ul daarin genest een absolute position.

Ik hoop dat dit advies een beetje helpt.

en een left:100% niet vergeten