Dropdown Menue Problem

NeckCheck · 26.01.2014

Hallo liebe Gemeinde,

bin neu hier und habe gleich ein Problem. Ich bastele ein bisschen rum und bin an einem Dropdownmenü.

Soweit klappt alles ganz gut, nur das meine Menüpunkte ab dem Dropdown " Produkte" sich zerschießen und ich nicht weiß wieso.

Hier die Html:

HTML:

<div id="container">
        <h1>IT Dienstleistungen und Beratung</h1>
        <nav>
            <ul>
                <li><a class="first" href="#">Home</a></li>
                <li><a href="#">Produkte</a>
                    <ul>
                        <li><a href="#">Computer</a></li>
                        <li><a href="#">Smartphones</a></li>
                        <li><a href="#">Tablets</a></li>
                        <li><a href="#">Drucker</a></li>
                    </ul>
                </li>
                <li><a href="#">Referenzen</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Kontakt</a></li>
                <li><a href="#">Impressum</a></li>
            </ul>
        </nav>
    </div>

und hier die CSS:

Code:

html, body
{
    padding: 0px;
    margin: 0px;


}

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

#container{

    width: 980px;
    height: 750px;
    margin: auto;
    margin-top: 30px;
    box-shadow: 5px 5px 15px grey;
}

h1{
    font-family: 'Expletus Sans';
    font-size: 45px;
    text-align: center;
    text-shadow: 7px 7px 5px grey;
    padding-top: 15px;
}

nav{
    width: 100%;
    height: 35px;
    background: lightgrey;
    position:relative;
    top: 150px;
}

nav ul{

    list-style-type: none;
}

nav ul li a{

    text-decoration: none;
    font-family: 'Expletus Sans';
    font-size: 16px;
    display: inline-block;
    float: left;
    padding-right: 15px;
    width: 110px;
    height: 35px;
    border-right: 4px solid white;
    text-align: center;


}

nav ul ul li a{

    clear: both;
    display: block;


}

nav ul ul{

    position: relative;
    left: 93px;
    visibility: hidden;
}

nav ul li:hover ul{

    visibility: visible;
}

nav ul li a:hover{

    background-color: grey;
    border-right: 4px solid black;
    color: white;
}

nav ul li .first{

    border-left: 4px solid white;
}

Wo mache ich was falsch? Weiß jemand Rat?

afr0kalypse · 26.01.2014

Mit position:relative und left:xx kommst du glaub ich nicht weit. Versuch entweder position:absolute und left:xx oder position:relative und margin-left:xx.

Yetikisdorf · 26.01.2014

Geht sicher besser, aber es sollte funktionieren. Probier das mal:

Code:

html, body
{
    padding: 0px;
    margin: 0px;


}

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

#container{

    width: 980px;
    height: 750px;
    margin: auto;
    margin-top: 30px;
    box-shadow: 5px 5px 15px grey;
 

}

h1{
    font-family: 'Expletus Sans';
    font-size: 45px;
    text-align: center;
    text-shadow: 7px 7px 5px grey;
    padding-top: 13px;
}

nav{
    width: 100%;
    height: 35px;
    background: lightgrey;
    position:relative;
    top: 150px;
    }

nav ul{

    list-style-type: none;
 
}

nav ul li:first-child{

    border-left: 4px solid white;

 
}
nav ul li{

    text-decoration: none;
    font-family: 'Expletus Sans';
    font-size: 16px;
    display: inline-block;
    float: left;
    width: 110px;
    height: 35px;
    border-right: 4px solid white;
    text-align: center;


}

nav ul ul li{

    clear: both;
    display: block;
    background-color:lightgrey;
    width: 110px;
    height: 35px;
    position:relative;
    top:15px;
    left:-40px;
    border-top:#FFF solid 1px;
    border-left: none !important;

}

nav ul ul{

    position: relative;
    visibility: hidden;
}

nav ul li:hover ul{

    visibility: visible;
}

nav ul li:hover{

    background-color: grey;
    border-right: 4px solid black;
    color: white;
}

NeckCheck · 26.01.2014

afr0kalypse schrieb:
Mit position:relative und left:xx kommst du glaub ich nicht weit. Versuch entweder position:absolute und left:xx oder position:relative und margin-left:xx.

Vielen Dank, hat funktioniert!

NeckCheck · 26.01.2014

Yetikisdorf schrieb:

Geht sicher besser, aber es sollte funktionieren. Probier das mal:

Code:

html, body
{
    padding: 0px;
    margin: 0px;


}

@import url(http://fonts.googleapis.com/css?family=Expletus+Sans);

#container{

    width: 980px;
    height: 750px;
    margin: auto;
    margin-top: 30px;
    box-shadow: 5px 5px 15px grey;


}

h1{
    font-family: 'Expletus Sans';
    font-size: 45px;
    text-align: center;
    text-shadow: 7px 7px 5px grey;
    padding-top: 13px;
}

nav{
    width: 100%;
    height: 35px;
    background: lightgrey;
    position:relative;
    top: 150px;
    }

nav ul{

    list-style-type: none;

}

nav ul li:first-child{

    border-left: 4px solid white;


}
nav ul li{

    text-decoration: none;
    font-family: 'Expletus Sans';
    font-size: 16px;
    display: inline-block;
    float: left;
    width: 110px;
    height: 35px;
    border-right: 4px solid white;
    text-align: center;


}

nav ul ul li{

    clear: both;
    display: block;
    background-color:lightgrey;
    width: 110px;
    height: 35px;
    position:relative;
    top:15px;
    left:-40px;
    border-top:#FFF solid 1px;
    border-left: none !important;

}

nav ul ul{

    position: relative;
    visibility: hidden;
}

nav ul li:hover ul{

    visibility: visible;
}

nav ul li:hover{

    background-color: grey;
    border-right: 4px solid black;
    color: white;
}

Vielen Dank für die Mühe, hat auch funktioniert, jedoch ist es wirklich nicht so elegant, allein schon wegen der <li> anstatt von <a>