CSS Probleem [NIEUW PROBLEEM]

Hey,

Ik heb weer een nieuw probleem.
Het is voor mijn portfolio.

Ik wil namelijk, dat als er op Portfolio geklikt wordt, dat er een submenutje naar beneden komt.
Nu lukt dat allemaal d.m.v. jQuery.
Ook de knoppen in dat sub menu moeten anders, ook dat lukt, alleen de hover niet.

Links is wat het is, en rechts is wat het moet zijn.

HTML:

<div id="links">
                <div class="kop">
                    <p>Navigatie</p>
                </div>
                <div class="inhoud">
                    <ul id="menu">
                        <li><a href="#">Startpagina</a></li>
                        <li><a href="#">Over ons</a></li>
                        <li><a href="#">Diensten</a></li>
                        <li><a href="#" class="lijst">Portfolio</a></li>
                            <ul class="items" style="display:none;" id="dropdown">
                                <li><a href="#">Layouts</a></li>
                                <li><a href="#">Logos</a></li>
                                <li><a href="#">Overige</a></li>
                            </ul>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>

CSS

#links {
    width: 235px;
    float: left;
    margin-bottom: 10px;
}

#links .kop {
    background: url(images/menutop.png) no-repeat;
    height: 43px;
    color: #FFFFFF;
}
#links .kop p {
    padding: 12px 0 0 25px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu  li {
    margin-top: 2px;
    padding: 0;
}
#menu li a {
    background: url(images/menuknop.png) no-repeat;
    width: 231px;
    margin: 0 auto;
    height: 31px;
    display: block;
    padding-left: 25px;
    padding-top: 12px;
    text-decoration: none;
}

#dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#dropdown  li {
    margin-top: 2px;
    padding: 0;
}
#dropdown li a {
    background: url(images/item-knop.png) no-repeat;
    width: 231px;
    margin: 0 auto;
    height: 31px;
    display: block;
    padding-left: 40px;
    padding-top: 12px;
    text-decoration: none;
}



a:visited {
    color: #afaeae;
    text-decoration: none;
}

.item li a:hover {
    background: url(images/item-knop_hover.png) no-repeat;
}

#menu li a:hover {
    background: url(images/menuknop_hover.png) no-repeat;
}

#links li a {
    background: url(images/menuknop.png) no-repeat;
    width: 231px;
    margin: 0 auto;
    height: 43px;
    display: block;
    padding-left: 25px;
    padding-top: 2px;
}

Als je het zoals het resultaat dat jij gaf weel hebben moet de padding-top veel lager.
Probeer mijn code eens

Dit werkt, heb ik ook al geprobeerd, maar dan staat de tekst tegen de bovenkant aan.
Die dus in het midden moet staan.

Vond dit voor je:

<img class="valigner">//voor elke tekst in het menu


.valigner
{
height:100%;
width: 0px;
vertical-align: middle;
visibility: hidden;
}
// in css

Mitch schreef:

Vond dit voor je:

<img class="valigner">//voor elke tekst in het menu


.valigner
{
height:100%;
width: 0px;
vertical-align: middle;
visibility: hidden;
}
// in css

Werkt helaas ook niet.

Ja sorry, ik vond het op internet.

in je css staat #links en in je html staat id="inhoud"?
en wat is de exacte hoogte van de afbeelding menuknop.png?

als deze 43px is dan moet je 43 - de padding doen, dus 43-12 in dit geval.

Marjolein schreef:

in je css staat #links en in je html staat id="inhoud"?
en wat is de exacte hoogte van de afbeelding menuknop.png?

als deze 43px is dan moet je 43 - de padding doen, dus 43-12 in dit geval.

Bedankt, hij werkt!

Waarom gebruik je voor de tekst geen line-height:43px;?

Nieuw probleem.

in je html staat class="items" maar in je css is het .item?
En ik mis een #dropdown li a:hover want de gewone links zijn goed volgens mij?

#links .kop {
    background: url(images/menutop.png) no-repeat;
    height: 43px;
    color: #FFFFFF;
}
#links .kop p {
    padding: 12px 0 0 25px;
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#menu  li {
    margin-top: 2px;
    padding: 0;
}
#menu li a {
    background: url(images/menuknop.png) no-repeat;
    width: 231px;
    margin: 0 auto;
    height: 31px;
    display: block;
    padding-left: 25px;
    padding-top: 12px;
    text-decoration: none;
}

#dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#dropdown  li {
    margin-top: 2px;
    padding: 0;
}
#dropdown li a {
    background: url(images/item-knop.png) no-repeat;
    width: 231px;
    margin: 0 auto;
    height: 31px;
    display: block;
    padding-left: 40px;
    padding-top: 12px;
    text-decoration: none;
}



a:visited {
    color: #afaeae;
    text-decoration: none;
}

#dropdown li a:hover {
    background: url(images/item-knop_hover.png) no-repeat;
}

#menu li a:hover {
    background: url(images/menuknop_hover.png) no-repeat;
}

Dat is de hele CSS van de div "links".

Bump, iemand?