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

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.