Hallo!
Ich versuche gerade ein dropdown menü als navigation zu erstellen. Diese soll 1024 px breit sein. Wenn ich allerdings die Breite der Navigation einstelle, verändert sich auch die Breite der einzelnen Untermenüs au 1024px. Diese sollen aber nur so breit sein, wie auf dem ersten Bild, also an die Textbreite angepasst.
(Leider bin ich absoluter Anfänger in Html und Css, aber ich kann im Netz einfach nicht die passende Lösung finden.)
Code:
body{
width: 1024px;
margin: 0px auto;
background-color: lightblue;
}
header{
width: 1024px;
position: fixed;
}
nav {
margin: 0px auto;
margin-top: -100px;
position: fixed;
position: inherit;
margin: 0px auto;
background-color: white;
}
nav ul {
padding: 0px;
margin: 0px;
position: fixed;
position: inherit;
width: 1024px;
}
nav ul:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
nav ul li {
list-style: none;
float: left;
margin-left: 30px;
}
nav ul li a {
text-decoration: none;
display: block;
color: #333;
padding: 14px 34px 14px 34px;
}
nav ul,nav ul li{
background-color: #FAFAFA;
}
nav ul li:hover > ul {
visibility: visible;
}
nav ul li ul{
display: inline;
visibility: hidden;
position: absolute;
padding:0px;
}
nav ul li ul li{
float: none;
margin: 0px auto;
}
nav ul li ul li a:hover{
color: #333;
}