Hallo,
nachdem ich in der style.css meiner Fotohomepage (Theme "Shuttershot") bereits einige Design-Feinheiten meinen Vorstellungen nach anpassen konnte, komme ich nun bei folgender Anpassung nicht weiter:
Ich würde gerne den ausklappenden Teil des Dropdown-Menüs (also das Submenü) insgesamt um ein paar Pixel nach unten verschieben, sodass es sich nicht mehr mit dem unteren Rand der oberen schwarz-transparenten Navigationsleiste überlagert/berührt.
Hier ein Auszug aus der style.css:
Code
#botmenu{
height:100px;
margin:14px 55px 0px 0px;
font-family:BebasNeueRegular,Arial,verdana,Century gothic,sans-serif;
float:right;
}
#submenu {
margin:0px 0px;
width:600px;
padding:0px 0px;
}
#submenu ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding:0px 0px;
}
#submenu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
color: #ccc;
text-shadow:1px 1px 0px #000;
font-size: 24px;
}
#submenu li a {
color: #aaa;
display: block;
margin: 0;
padding: 12px 15px 15px 15px;
text-decoration: none;
position: relative;
text-shadow:1px 1px 0px #000;
}
#submenu li a:hover, #submenu li a:active, #submenu .current_page_item a {
color: #fff;
text-shadow:1px 1px 0px #000;
}
#submenu li a.sf-with-ul {
padding-right: 9px;
}
#submenu li li a, #submenu li li a:link, #submenu li li a:visited {
font-size: 21px;
color: #aaa;
text-shadow:none;
width: 138px;
margin: 0;
padding: 4px 10px;
line-height:24px;
border-bottom:1px solid #222;
border-top:1px solid #111;
border-left:1px solid #111;
border-right:1px solid #222;
text-transform: none;
position: relative;
background:#151515;
}
#submenu ul ul li:first-child{
border-top:none;
}
#submenu ul ul li:last-child{
border-bottom:none;
}
#submenu li li:last-child{
border-bottom:none;
}
#submenu li li a:hover, #submenu li li a:active {
background:#070707;
color: #fff;
}
#submenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 1px 0px;
padding: 1px 1px;
background:#000;
border-radius: 1px;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
opacity:0.94;
-moz-opacity:0.94;
}
#submenu li ul a {
width: 150px;
}
#submenu li ul a:hover, #submenu li ul a:active {
}
#submenu li ul ul {
margin: -35px 0 0 161px;
}
#submenu li:hover ul ul, #submenu li:hover ul ul ul, #submenu li.sfHover ul ul, #submenu li.sfHover ul ul ul {
left: -999em;
}
#submenu li:hover ul, #submenu li li:hover ul, #submenu li li li:hover ul, #submenu li.sfHover ul, #submenu li li.sfHover ul, #submenu li li li.sfHover ul {
left: auto;
}
#submenu li:hover, #submenu li.sfHover {
position: static;
}
Alles anzeigen
An welcher Stelle im Code kann ich die Position des Submenüs nach unten verschieben?
Vorab danke für euren Rat!
Gruß
Lukas