Hallo,
Eigentlich sollte man meinen, es sei ein Klacks....eigentlich. Aber ich sitze hier schon den ganzen Nachmittag und Abend.
Es geht um ein vertikales CSS-Menu. Alles funtioniert so weit. War eigentlich mal ein horizontales Menü. Ich habe float: left ausgeschaltet um es vertikal zu machen. Nur sollen die einzelnen Menüfelder etwas separiert voneinander sein. Ich habe sie mintgrün eingefärbt und über ein Bild gelegt. Nun soll das Bild zwischen den einzelnen Menüpunkten durchblitzen.
Meiner Ansicht nach geht es einfach so, dass ich ein margin-top oder Margin-bottom setze. Aber leider funjtioniert das nicht. Egal was ich auch mache....das Menü erscheint immer als ein ganzer mintgrüner Block.
Hier die CSS Anweisungen:
Code
#cssmenu,
#cssmenu ul,
#cssmenu li,
#cssmenu a {
border: none;
margin: 0;
padding: 0;
line-height: 0.7;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #55f5d1;
margin-top: 5px;
text-align: left;
}
#cssmenu {
height: 0px;
display: block;
padding: 0;
margin-top: 10px;
border: none;
border-radius: 0px;
width: 250px;
border-color: #000;
text-align: left;
top: 50px;
}
#cssmenu,
#cssmenu > ul > li > ul > li a:hover {
#background: #55f5d1;
background: #55f5d1;
background: -moz-linear-gradient(top, #55f5d1 0%, #55f5d1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #55f5d1), color-stop(100%, #55f5d1));
background: -webkit-linear-gradient(top, #55f5d1 0%, #55f5d1 100%);
background: -o-linear-gradient(top, #55f5d1 0%, #55f5d1 100%);
background: -ms-linear-gradient(top, #55f5d1 0%, #55f5d1 100%);
background: linear-gradient(top, #55f5d1 0%, #55f5d1 100%);
}
#cssmenu > ul {
list-style: inside none;
padding: 0;
margin: 30;
}
#cssmenu > ul > li {
list-style: inside none;
padding: 0;
margin-top: 10px;
#float: left;
display: block;
position: relative;
}
#cssmenu > ul > li > a {
outline: none;
display: block;
position: relative;
padding: 19px 19px;
text-align: left;
text-decoration: none;
#text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
font-weight: bold;
font-size: 18px;
font-family: Arial, Helvetica, sans-serif;
#border-right: 1px solid #080808;
color: #000;
margin-top: 10px;
}
/*neue Regel */
#cssmenu ul li > ul ul {
position: absolute;
left: 190px;
top: 0;
}
#cssmenu > ul > li > a:hover {
#background: #1c71a2;
background: #55f5d1;
color: #fff;
}
#cssmenu > ul > li:first-child > a {
border-radius: 0px 0 0 0px;
}
#cssmenu > ul > li > a:after {
content: '';
position: absolute;
border-right: 1px solid;
top: 0px;
bottom: 3px;
right: -2px;
z-index: 99;
border-color: #000;
}
#cssmenu ul li.has-sub:hover > a:after {
top: 0;
bottom: 0;
}
#cssmenu > ul > li.has-sub > a:before {
content: '';
position: absolute;
top: 18px;
right: 6px;
border: 5px solid transparent;
border-top: 5px solid #000; # hier
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 19px;
}
#cssmenu ul li.has-sub:hover > a {
#background: #1c71a2;
background: #55f5d1;
border-color: #3f3f3f;
padding-bottom: 13px;
padding-top: 13px;
top: -1px;
z-index: 999;
}
#cssmenu ul li.has-sub:hover > ul,
#cssmenu ul li.has-sub:hover > div {
display: block;
}
#cssmenu ul li.has-sub > a:hover {
#background: #1c71a2;
background: #55f5d1;
border-color: #fff;
}
#cssmenu ul li > ul,
#cssmenu ul li > div {
display: none;
width: auto;
position: absolute;
top: 38px;
padding: 10px 0;
#background: #1c71a2;
background: #55f5d1;
border-radius: 0 0 5px 5px;
z-index: 999;
}
#cssmenu ul li > ul {
width: 200px;
}
#cssmenu ul li > ul li {
display: block;
list-style: inside none;
padding: 0;
margin: 0;
position: relative;
}
#cssmenu ul li > ul li a {
outline: none;
display: block;
position: relative;
margin: 0;
padding: 8px 20px;
font: 10pt Arial, Helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}
#cssmenu ul ul a:hover {
#color: #1c71a2;
color: #55f5d1;
}
#cssmenu > ul > li.has-sub > a:hover:before {
border-top: 5px solid #ffffff;
}Wäre echt toll wenn jemand den Fehler finden würde.
Grüße
Holger