Hallo Freunde der guten Unterhaltung,
ich möchte mir eine Hovernavi mit CSS in den Header bauen, eigentlich weiss ich auch wie das geht, aber in CSS bin ich ein Vollspackn.
Also, Bis jetzt funzt alles soweit, aber die wenn ich mit der Maus über die Navi gehe, verschwinden die Unterseiten unter dem Content.
hier mal die CSS
PHP
body {
position: relative;
background: url(images/bg.jpg) repeat-x;
height: 100%;
font-family: 'lucida grande', verdana, arial, sans-serif;
text-align:left;
color:#000;
font-size: 10pt;
margin: 0px;
padding: 0;
text-align: center;
}
#wrapper {
position: relative;
height: 450px;
width: 850px;
margin: 0px auto;
background-color: #000;
}
#insideWrapper {
position: relative;
top: 0px;
height: 100%;
width: 850px;
margin: 0px;
background-color: #fff;
text-align: left;
}
#insideWrapper:after{
content: "."; display: block; line-height: 1px; font-size: 1px; clear: both;}
.post {
position: relative;
top: 0px;
width: 590px;
height: 400px;
overflow:auto;
left: 0px;
margin: 0px;
background-color: #fff;
text-align: left;
}
#content {
width: 590px;
margin-left: 200px;
background-color: #fff;
text-align: left;
}
#sidebar {
position: relative;
float: left;
width: 150px;
height: 250px;
left: 20px;
padding: 0px;
background-color: #fff;
text-align: left;
color: #000;
line-height: 11pt;
margin-top: -3px;
}
.left {
float: left;
margin: 0px 10px 0px 10px;
}
.right {
float: right;
margin: 0px 10px 0px 10px;
}
#masthead {
position: relative;
top: 0px;
background: url('images/header.jpg');
width: 850px;
height: 100px;
margin: 0px;
margin-top: 10px;
}
.centeredImage {
text-align:center;
margin-top:10px;
margin-bottom:0px;
padding:0px;
}
#footer {
font-size: 8pt;
position: relative;
color: #fff;
height:50px;
width: 850px;
margin: 0px;
margin-bottom: 0px;
text-align: right;
background:url(images/footer.jpg) no-repeat;
}
#footer a {
color: #fff;
}
#footer a:visited {
color: #fff;
}
#footer a:hover {
color: #ff3333;
border: 0px;
}
.sep {
background: url('images/sep.jpg');
background-repeat: no-repeat;
background-position: center 50%;
position: relative;
width: 162px;
height: 50px;
margin: 0px;
padding: 0px;
left: 160px;
text-align: center;
}
.commentBox {
position: relative;
margin: 0 auto;
width: 100%;
overflow:hidden;
background-color: #f5f5f5;
text-align: left;
border: 1px solid #999;
padding: 5px;
}
.cite {
font-size: 7pt;
color:#666;
}
code {
font-family: Courier New, Verdana;
text-align:left;
color:#666;
font-size: 8pt;
}
input {
border: 1px solid #666;
background-color: #FFFFFF;
color: #000000;
padding: 2px;
}
h2 {
color: #666;
font-size: 14px;
text-align: left;
}
ul {
margin-top: 0px;
margin-left: 0px;
margin-bottom: 0px;
padding-left: 0px;
}
li {
list-style-type: none;
margin-left: 0px;
}
#sidebar li {
padding:2px !important;
padding-left:0px !important;
padding:0px;
border-bottom: 1px solid #ccc !important;
border-bottom: 0px;
}
blockquote, blockquote p {
text-indent: 0px;
margin-bottom: 7px;
color: #666;
}
.footerLink {
color: #666;
text-decoration: underline;
}
a.footerLink {
color: #666;
text-decoration: underline;
}
a.footerLink:visited {
color: #666;
text-decoration: underline;
}
a.footerLink:hover {
color: #999;
text-decoration: underline;
}
.title {
color: #fff;
font-size: 12pt;
background-color: #ca4205;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
font-weight: bold;
font-size: 12px;
padding: 5px 5px;
}
#sidebar .title {
margin-bottom:15px;
}
a.title {
color: #fff;
background-color: #ca4205;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
font-weight: bold;
font-size: 12px;
}
a.title:visited {
color: #333;
}
a.title:hover {
color: #999;
border: 0px;
}
#blogTitle {
position: relative;
top: 10px;
left: 20px;
color: #333;
font-size: 12pt;
text-align: left;
}
.commentPos {
position: relative;
margin: 0px;
padding: 0px;
text-align: center;
font-size:9pt;
text-transform:uppercase;
}
a {
color: #0066cc;
text-decoration: none;
}
a:visited {
color: #0066cc;
text-decoration: none;
}
a:hover {
color: #394651;
text-decoration: none;
}
/* Hover Navigationsmenu */
#navigation {
clear: both;
height: 20px;
margin-top: 24px;
margin-right: 4px;
float: right;
}
#navigation ul {
margin: 0;
padding: 0;
}
#navigation li {
margin: 0px;
height: 20px;
padding: 0px 5px;
float: left;
list-style: none;
}
#navigation li a {
font-family:"trebuchet ms",arial,sans-serif;
display: block;
padding: 5px 8px;
color: #fff;
font-weight: bold;
font-size: 12pt;
font-weight:bold;
text-decoration: none;
background-color: #ca4205;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#navigation li a:hover {
color: #fff;
text-decoration: none;
background-color: #8c2f05;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
}
#nav li ul {
position: absolute;
left: -999em;
height: auto;
width: 14.4em;
w\idth: 12.9em;
font-weight: normal;
border: 1px solid #fff;
margin: 0;
}
#nav li li {
padding-right: 1em;
width: 13.4em;
border: 0px;
}
#nav li ul a {
width: 12em;
w\idth: 9em;
background: url(images/bg_head_bottom_nav.jpg) no-repeat top left;
height: 40px;
}
#nav li ul ul {
margin: -1.75em 0 0 14em;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
background: url(images/bg_head_bottom_nav.jpg) no-repeat top left;
height: 40px;
}
.sufu {
float: right;
margin-right: 9px;ich bin dankbar für jede Antwort