Hallo Leute,
ich möchte zur Übung gerne ein Menü erstellen und als Referenz soll das Hauptmenü auf folgender Seite dienen.
Das ganze sollte wenn möglich rein über css realisierbar sein.
Hier der bis jetzt vorhandene Code:
Code
#topnavi_wrap {
position: relative;
/* background: url(images/topnavi.png) repeat; */
width: 1000px;
left: 50%;
margin-left: -500px;
background-color: #ff6200;
background: -moz-linear-gradient(top, #ff3c00 0%, #ff8539 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3c00), color-stop(100%,#ff8539));
background: -webkit-linear-gradient(top, #ff3c00 0%, #ff8539 100%);
background: -o-linear-gradient(top, #ff3c00 0%, #ff8539 100%);
background: -ms-linear-gradient(top, #ff3c00 0%, #ff8539 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3c00', endColorstr='#ff8539',GradientType=2 );
-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3c00', endColorstr='#ff8539',GradientType=2 );
background: linear-gradient(top, #ff3c00 0%, #ff8539 100%);
-moz-box-shadow: 6px 0px 8px 0px #acacac, -6px 0px 8px 0px #acacac;
-webkit-box-shadow: 6px 0px 8px 0px #acacac, -6px 0px 8px 0px #acacac;
box-shadow: 6px 0px 8px 0px #acacac, -6px 0px 8px 0px #acacac;
}
#topnavi {
margin: 0 auto;
width: 1000px;
}
#topnav, #topnav ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
z-index: 2;
}
#topnav li{
float:left;
position:relative;
display:inline;
}
#topnav a{
display: block;
font-size: 12px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 20px;
padding-right: 20px;
}
#topnav a:hover{
color: #fff;
background-color: #605f5d;
}
#topnav ul {
position: absolute;
display: none;
/* background: #222; */
/* z-index: 99; */
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
border-left: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
border-right: 1px solid #d6d6d6;
background-color: #FFF;
margin-left: -1px;
}
#topnav ul a {
display: inline;
width: 12em;
padding: 5px 1em;
float: left;
text-transform: none;
color: #000;
border-bottom: 1px dotted #d6d6d6;
}
#topnav ul a:hover {
background-color: #605f5d;
color: #FFF;
}
#topnav ul ul{
top: 0;
}
#topnav li ul ul {
margin-left: 12em;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul{
display:none;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul{
display:block;
}
Alles anzeigen
Ich schaffe es einfach nicht das erste Untermenü "inline" anzuzeigen und darunter die folgendenden Links in "block".
Link zur Seite gibt es leider keinen, offline Versuch... Ich hoffe Ihr könnt mir trotzdem weiter helfen.
mfg kris9k