Ich habe ein Menü mit der Möglichkeit, dass einige Menüpunkte Unterpunkte haben. Eigentlich ganz einfach. Ich möchte erreichen, dass beim Überfahren des Untermenüs auch der entsprechende (übergeordnete) Menüpunkt hervorgehoben wird. Dies passiert nie, denn sobald die Maus das Menüelement verlässt und über das Untermenü gelangt, gestaltet der Browser es in seinem Standardstil. Jede Hilfe geschätzt! Danke vielmals!
Menü-HTML:
<div id="top_navigation">
<ul>
<li><a href="#">item1</a></li>
<li><a href="#">item2</a>
<ul class="submenu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li class="selected_menu_item"><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div>
CSS:
#top_navigation {
width: 1248px;
margin: 0 auto;
position: relative;
text-transform: uppercase;
font-family: "Rounded Font", sans-serif;
font-size: 23px;
}
#top_navigation ul ul {
display: none;
}
#top_navigation ul {
padding-left: 0;
}
#top_navigation ul li {
margin: 0;
padding: 0;
float: left;
width: 312px;
height: 64px;
line-height: 64px;
font-size: 20px;
list-style: none;
}
#top_navigation ul li a {
display: block;
text-align: center;
text-decoration: none;
color: #eb1f10;
background-color: #FFF;
}
#top_navigation ul li.selected_menu_item a {
background-color: #eb1f10;
color: #FFF;
}
#top_navigation ul li a:hover {
background-color: #eb1f10;
color: #FFF;
}
#top_navigation li li {
height: 42px;
line-height: 42px;
border-top: #eb1f10 1px solid;
}
JS/Jquery:
$(document).ready(function () {
var $nav = $('#top_navigation > ul > li');
$nav.hover(
function() {
$('ul', this).stop(true, true).slideDown('fast');
},
function() {
$('ul', this).slideUp('fast');
}
);
});
Beispiel finden Sie hier: http://jsfiddle.net/qguTz/