Hallo Community ( Hallo Maik 
,
ich habe ein Problem mit einem vertikalen DropDown Menü (http://www.alistapart.com/articles/hybrid)
Folgendes:
Anbei sind 2 Bilder.
- Das erste zeigt wie der Rollover aussehen soll wenn man auf den Hyperlink geht.
- Das zweite zeigt wie es momentan der Fall ist.
Warum wird beim Rollover nun der Hintergrund des "mainnav" genommen?
So nun hier der HTML-Code:
Nun der CSS-Code:
Ich hoffe ihr könnt mir helfen. DANK
Gruß Julian
,ich habe ein Problem mit einem vertikalen DropDown Menü (http://www.alistapart.com/articles/hybrid)
Folgendes:
Anbei sind 2 Bilder.
- Das erste zeigt wie der Rollover aussehen soll wenn man auf den Hyperlink geht.
- Das zweite zeigt wie es momentan der Fall ist.
Warum wird beim Rollover nun der Hintergrund des "mainnav" genommen?
So nun hier der HTML-Code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="hwrapper">
<div id="hgradient">
<h1><img src="images/layout/reinald-mattes-interieurtechnik-logo.gif" width="285" height="133" title="Reinald Mattes Interieurtechnik" id="logo"/></h1>
</div>
<img src="images/layout/interieur_images.jpg" width="830" height="149" title="" id="hinterieur" />
</div>
<div id="cwrapper">
<ul id="nav">
<li class="off mainnav" style="width: 149px;"><a href="#">Aktuelles</a></li>
<li class="off mainnav"><a href="#">Interieur</a>
<ul class="subnav">
<li><a href="#">Mercedes</a></li>
<li><a href="#">Porsche</a></li>
<li><a href="#">Lamborghini</a></li>
<li><a href="#">Bentley</a></li>
<li><a href="#">Aston Martin</a></li>
<li><a href="#">Range Rover</a></li>
<li><a href="#">Pagani Zonda</a></li>
<li><a href="#">Mini</a></li>
</ul></li>
<li class="off mainnav" style="width: 230px;"><a href="#">Sonderanfertigungen</a>
<ul class="subnav">
<li><a href="#">Sullivan</a></li>
<li><a href="#">Le Corbusier</a></li>
<li><a href="#">Mies</a></li>
<li><a href="#">Gropius</a></li>
<li><a href="#">Yamasaki</a></li>
</ul></li>
<li class="off mainnav"><a href="#">Über uns</a></li>
<li class="off mainnav" style="width: 149px;"><a href="#">Kontakt</a></li>
</ul>
</div>
</body>
</html>Nun der CSS-Code:
Code:
@charset "utf-8";
/* -===!===!===!===!==!===!===!===!===!===-
Reinald Mattes
Interieurtechnik
-===!===!===!===!==!===!===!===!===!===-
*/
/* ======================
Allgemeine Styles
======================= */
* { padding: 0; margin: 0; }
html { height: 101%; }
body {
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: white;
background-image: url(images/layout/bg_gradient.gif);
background-repeat: repeat-x;
margin: 0px;
}
h1 { font-size: 150%; }
h2 { font-size: 120%; margin-bottom: 10px; }
h3 { color: #353535; font-variant: small-caps; font-weight: bold; font-size: 100%; letter-spacing: 0; margin-top: 2em; margin-bottom: 0.5em; }
h4 { margin-bottom: 0.5em;}
p { font-size: 89%; margin: 0px 0px 0.5em; }
.show { display: block; }
.hide { display: none; }
/* Hyperlinks */
a img { border: none; }
a { text-decoration: none; outline: none; }
a:link { color: #666666; }
a:visited { color: #5F3E36; }
a:hover, a:focus { text-decoration: underline; }
a:active { color: #5F3E36; text-decoration: none; }
/* Hyperlinks END*/
/** HEADER **/
#hwrapper {
width: 830px;
height: 286px;
background: url(images/layout/header_shadow.gif) no-repeat;
margin: 0px auto 0 auto;
padding: 0 22px;
}
#hgradient {
width: 830px;
height: 133px;
background: url(images/layout/header_gradient.gif) repeat-x;
margin-bottom: 3px;
}
#logo {
margin-left: 25px;
}
/** NAVIGATION **/
#nav {
position: relative;
}
#nav li {
margin: 0;
float: left;
display: block;
text-align: center;
}
/** Hauptnavigation **/
#nav .mainnav {
font-size: 13px;
font-weight: bold;
width: 150px;
height: 35px;
background: url(images/layout/navi-bg.gif) repeat-x;
}
#nav .mainnav a {
display: block;
height: 23px;
padding: 6px 0;
}
#nav li.on ul {
/*display the current topic*/
display: block;
}
#nav li.on a {
/*change border color for active topic area*/
color: white;
background: url(images/layout/navi-bg-hover.gif) repeat-x;
}
#nav li.off a:hover, #nav li.off:hover a {
background: url(images/layout/navi-bg-hover.gif) repeat-x;
color: white;
}
#nav li.off:hover ul {
/* display the other topics when
their parent is hovered */
display: block;
/*z-index: 6000;*/
}
/** Subnavigation **/
#nav li.off ul, #nav li.on ul {
/*put the subnavs below and hide them all*/
font-size: 11px;
font-weight: bold;
display: none;
position: absolute;
width: 828px;
top: 27px;
left: 0px;
height: 24px;
background: transparent url(images/layout/subnav-bg.gif) repeat-x scroll 0%;
}
#nav li.on ul {
/*display active subnav list*/
display: block;
}
#nav .subnav li {
width: 103.4px;
}
#nav .subnav li a {
padding: 6px 0 0;
color: #666666;
background: none;
height: 18px;
background: transparent url(images/layout/subnav-bg.gif) repeat-x scroll 0%;
}
/** CONTENT **/
#cwrapper {
width: 828px;
border-right: 1px solid #d8d6c7;
border-left: 1px solid #d8d6c7;
margin: 0px auto;
height: 500px;
padding-top: 5px;
}
#wrapper {
width: 830px;
margin: 0px auto 10px auto;
}
address { text-align: center; font-size: 80%; font-style: normal; }Ich hoffe ihr könnt mir helfen. DANK
Gruß Julian
