zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Dropdown Menü: Hover-Effekt auch wenn Maus im Untermenü ist

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 12.06.2010, 18:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.05.2006
Beiträge: 107
Sp33dy G0nz4l3s befindet sich auf einem aufstrebenden Ast
Standard 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.
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2010-06-12 um 17.17.07.png (6,3 KB, 6x aufgerufen)
__________________
www.daspinkewort.de
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.06.2010, 18:25
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Sp33dy G0nz4l3s Beitrag anzeigen
Leider ist :hover dann nicht mehr gültig.
Doch, li:hover.
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten.
Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.06.2010, 18:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 27.05.2006
Beiträge: 107
Sp33dy G0nz4l3s befindet sich auf einem aufstrebenden Ast
Standard

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

Funktioniert!
__________________
www.daspinkewort.de
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


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


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:33 Uhr.