CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist

Sp33dy G0nz4l3s · #1 (**permalink**) 12.06.2010, 17:24

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&amp;Body</a>
                    	<ul>
                        	<li><a href="#">Sport&amp;Body #1</a></li>
                            <li><a href="#">Sport&amp;Body #2</a></li>
                            <li><a href="#">Sport&amp;Body #3</a></li>
                            <li><a href="#">Sport&amp;Body #4</a></li>
                            <li><a href="#">Sport&amp;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&ouml;ß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.

heiko_rs · #2 (**permalink**) 12.06.2010, 17:25

Zitat:

Zitat von Sp33dy G0nz4l3s

Leider ist :hover dann nicht mehr gültig.

Doch, li:hover.

Sp33dy G0nz4l3s · #3 (**permalink**) 12.06.2010, 17:38

heiko_rs du bist der Beste! ... und schnellste :P

Funktioniert!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Dropdown menu mit Hover-Images	pbs2h8	CSS	0	10.09.2009 14:46
dropdown menü einbauen	PatrickM	CSS	6	07.01.2008 16:13
CSS Menü zickt rum /IE6/IE7/FF	GizmotroniX	CSS	3	11.07.2007 08:14
css hover effekt fuer menubuttons	ismx	CSS	3	28.05.2007 17:28
Mysteriöses in CSS Dropdown Menü	ph!L	CSS	3	21.07.2006 12:31