Sp33dy G0nz4l3s |
12.06.2010 17:24 |
CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist
Liste der Anhänge anzeigen (Anzahl: 1)
Hi,
ich habe ein Menü erstellt, das ausklappt, wenn man auf einen Hauptmenüpunkt fährt. Wenn man nun auf ein Untermenüpunkt fährt, dann soll das Hauptmenü aber trotzdem den :hover-Effekt haben. Sprich "Fasion" müsste blau seinn. Leider ist :hover dann nicht mehr gültig.
Hier mein Code:
Code:
/* reset */
* {margin:0;padding:0}
html,body {height:100%; width:100%;}
img { border:none; }
/* Horizontal & vertikal zentrieren */
#outer {display:table; height:100%; width:100%; min-width:1100px;}
#container {display:table-cell; height:476px; position:relative; vertical-align:middle;}
#inner { height: 476px; margin:0 auto 0 auto; width:1059px;}
/* Oberer Teil */
#top {border-bottom:1px #999 solid;height:45px;}
/* Menü */
ul#menu {list-style:none; padding-top:24px; position:relative;}
ul#menu li {float:left; padding-right:20px;}
/* --Menü-- */
/* Untermenü */
ul#menu li {padding-bottom:8px;position:relative;}
ul#menu li a, ul#menu ul li ul li a {display: block;}
/* dropdown */
#menu li:hover > ul {display:block;}
/* Level 2 */
ul#menu ul {background-color:#fff; border:1px #999 solid; display:none; padding-bottom:14px; position:absolute; top:21px; width:115px;}
ul#menu ul {left:-26px;}
ul#menu ul li {float:none; list-style:none;}
ul#menu ul li a {padding:14px 0 0 0;}
/* Level 2: inaktiv */
#menu:after {clear:both; content: "."; display:block; line-height:0; height:0; visibility:hidden;}
/* --Untermenü-- */
#name {position:relative;left:639px;top:-41px; width:426px;}
#name span {padding-left:50px;}
#content {margin-top:-28px;}
#content span {padding-right:21px;}
/* --Oberer Teil-- */
/* Schriftarten: Allgemein */
body {font-family:Arial, Helvetica, sans-serif inherit; font-size:1em;}
#name {color:#999; font-size:0.625em;}
#name span {color:#000066; font-size:3.2em;}
/* Schriftarten: Menü */
ul#menu li a {color:#999; font-size:0.688em; text-decoration:none;}
ul#menu li a:hover, ul#menu li a:active {color:#000066;}
ul#menu ul li a {text-align:center;}
Das hier steht in der HTML-Datei:
HTML-Code:
<!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" />
<link href="stylesheet.css" type="text/css" rel="stylesheet" />
<title>Menü</title>
<!--[if IE 7]>
<style type="text/css">
#outer{
position:relative;
overflow:hidden;
}
</style>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
#container{top:50%}
#inner{top:-50%;position:relative;}
</style>
<![endif]-->
</head>
<body>
<div id="outer">
<div id="container">
<div id="inner">
<div id="top">
<ul id="menu">
<li>
<a href="#">Fashion</a>
<ul>
<li><a href="#">Fashion #1</a></li>
<li><a href="#">Fashion #2</a></li>
<li><a href="#">Fashion #3</a></li>
<li><a href="#">Fashion #4</a></li>
<li><a href="#">Fashion #5</a></li>
</ul>
</li>
<li>
<a href="#">Advertising</a>
<ul>
<li><a href="#">Advertising #1</a></li>
<li><a href="#">Advertising #2</a></li>
<li><a href="#">Advertising #3</a></li>
<li><a href="#">Advertising #4</a></li>
<li><a href="#">Advertising #5</a></li>
</ul>
</li>
<li>
<a href="#">Portraits</a>
<ul>
<li><a href="#">Portraits #1</a></li>
<li><a href="#">Portraits #2</a></li>
<li><a href="#">Portraits #3</a></li>
<li><a href="#">Portraits #4</a></li>
<li><a href="#">Portraits #5</a></li>
</ul>
</li>
<li>
<a href="#">Business</a>
<ul>
<li><a href="#">Business #1</a></li>
<li><a href="#">Business #2</a></li>
<li><a href="#">Business #3</a></li>
<li><a href="#">Business #4</a></li>
<li><a href="#">Business #5</a></li>
</ul>
</li>
<li>
<a href="#">Lifestyle</a>
<ul>
<li><a href="#">Lifestyle #1</a></li>
<li><a href="#">Lifestyle #2</a></li>
<li><a href="#">Lifestyle #3</a></li>
<li><a href="#">Lifestyle #4</a></li>
<li><a href="#">Lifestyle #5</a></li>
</ul>
</li>
<li>
<a href="#">Sport&Body</a>
<ul>
<li><a href="#">Sport&Body #1</a></li>
<li><a href="#">Sport&Body #2</a></li>
<li><a href="#">Sport&Body #3</a></li>
<li><a href="#">Sport&Body #4</a></li>
<li><a href="#">Sport&Body #5</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="name">setcard <span>Max Mustermann</span></div>
<div id="content">
<div id="daten">
<span>Größe: 175</span>
<span>Taille: 55</span>
<span>Konfektion: 36</span>
<span>Schuhe: 36</span>
<span>Augen: braun</span>
<span>Haare: braun</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Ich weiß mir leider nicht zu helfen... hoffe jemand von euch hat eine Idee.
|