suckerfish - Элемент верхнего уровня не остается выделенным, когда вложенные элементы находятся - PullRequest
Новая
       20

suckerfish - Элемент верхнего уровня не остается выделенным, когда вложенные элементы находятся

0 голосов
/ 17 ноября 2011

Привет, у меня проблема с меню suckerfish, я не могу понять, как сохранить выделенный пункт меню верхнего уровня, когда мышь наводит курсор на выпадающие и всплывающие меню ...

Вот CSS: 

#mainnav, #mainnav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 1;
}

div#mainnav ul {display:block;float:left;margin:0;padding:0;width:640px;margin-top:70px;}


div#mainnav ul li.level1 a {
    display:block;
    height:40px;
    padding:0 12px;
    width:auto;
    font: 16px ChunkFiveRegular, serif;
    line-height:43px;
}
.level1.active a, .level1 a:hover  {color:#fcba2b !important;background-color:#4777ba;}
#mainnav li.level1 a:visited {color:#1b4a7e;}

div#mainnav ul li.level2 a {
    display:block;
    height:auto;
    padding:3px 12px;
    width:176px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    color:#ffffff !important;
}
.level1.active a, .level2 a:hover  {color:#fcba2b !important;background-color:#4777ba;}
#mainnav li.level2 a:visited {color:#1b4a7e;}

#mainnav li { /* all list items */
    float: left;
}

li.level2 a:hover {background-color:#1b4a7e;color:#ffffff !important;}


#mainnav li ul { /* second-level lists */
    margin-top:auto;
    position: absolute;
    background:#4777ba;
    width: 200px;
    left: -9999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#mainnav li ul ul { /* third-and-above-level lists */
    margin: -22px 0 0 200px;
}

#mainnav li:hover ul ul, #mainnav li:hover ul ul ul, #mainnav li.sfhover ul ul, #mainnav li.sfhover ul ul ul {
    left: -9999em;
}

#mainnav li:hover ul, #mainnav li li:hover ul, #mainnav li li li:hover ul, #mainnav li.sfhover ul, #mainnav li li.sfhover ul, #mainnav li li li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}

, а вот HTML: 

<div id="mainnav">
    <ul >
        <li class="first level1"><a href="http://edukids.bigblock.ca/" title="Home" ><span>Home</span></a></li>
        <li class="level1 active"><a href="http://edukids.bigblock.ca/index.php?id=15" title="Locations" ><span>Locations</span></a>
            <ul >
                <li class="first level2"><a href="index.php?id=8" title="Ajax" ><span>Ajax</span></a>
                    <ul >
                        <li class="first level3"><a href="index.php?id=41" title="EduKids King's Crescent" ><span>EduKids King's Crescent</span></a></li>
                        <li class="level3"><a href="index.php?id=36" title="EduKids Salem Road" ><span>EduKids Salem Road</span></a></li>
                        <li class="last level3"><a href="index.php?id=44" title="St. George's Daycare Centre" ><span>St. George's Daycare Centre</span></a></li>
                    </ul>
                </li>
                <li class="level2 active"><a href="index.php?id=9" title="Pickering" ><span>Pickering</span></a>
                    <ul >
                        <li class="first level3 active"><a href="index.php?id=15" title="EduKids Altona Road" ><span>EduKids Altona Road</span></a></li>
                        <li class="level3"><a href="index.php?id=16" title="EduKids Glenanna Road" ><span>EduKids Glenanna Road</span></a></li>
                        <li class="level3"><a href="index.php?id=17" title="Discovery Place Child Care" ><span>Discovery Place Child Care</span></a></li>
                        <li class="last level3"><a href="index.php?id=18" title="St. Paul's Child Care Centre" ><span>St. Paul's Child Care Centre</span></a></li>
                    </ul>
                </li>
                <li class="level2"><a href="index.php?id=10" title="Newmarket/Stouffville" ><span>Newmarket/Stouffville</span></a>
                    <ul >
                        <li class="first level3"><a href="index.php?id=45" title="The Moppett School" ><span>The Moppett School</span></a></li>
                        <li class="last level3"><a href="index.php?id=46" title="Christ Church Child Care Centre" ><span>Christ Church Child Care Centre</span></a></li>
                    </ul>
                </li>
                <li class="level2"><a href="index.php?id=11" title="North York" ><span>North York</span></a>
                    <ul >
                        <li class="first level3"><a href="index.php?id=47" title="Yonge-Churchill Child Care Centre" ><span>Yonge-Churchill Child Care Centre</span></a></li>
                    </ul>
                </li>
                <li class="level2"><a href="index.php?id=12" title="Simcoe" ><span>Simcoe</span></a>
                    <ul >
                        <li class="first level3"><a href="index.php?id=48" title="EduKids Bradford" ><span>EduKids Bradford</span></a></li>
                    </ul>
                </li>
                <li class="level2"><a href="index.php?id=13" title="Toronto/Scarborough" ><span>Toronto/Scarborough</span></a>
                    <ul >
                        <li class="first level3"><a href="index.php?id=49" title="Children's Village One" ><span>Children's Village One</span></a></li>
                        <li class="level3"><a href="index.php?id=50" title="Children's Village Three" ><span>Children's Village Three</span></a></li>
                        <li class="level3"><a href="index.php?id=51" title="Don Mills Child Care Centre" ><span>Don Mills Child Care Centre</span></a></li>
                        <li class="last level3"><a href="index.php?id=52" title="York Mills Child Care Centre" ><span>York Mills Child Care Centre</span></a></li>
                    </ul>
                </li>
                <li class="last level2"><a href="index.php?id=14" title="Whitby/Brooklin" ><span>Whitby/Brooklin</span></a>
                    <ul >
                        <li class="first level3"><a href="index.php?id=53" title="EduKids Dundas Street" ><span>EduKids Dundas Street</span></a></li>
                        <li class="level3"><a href="index.php?id=54" title="Castleview Child Care Centre" ><span>Castleview Child Care Centre</span></a></li>
                        <li class="last level3"><a href="index.php?id=55" title="St. Thomas' Child Care Centre" ><span>St. Thomas' Child Care Centre</span></a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="level1"><a href="index.php?id=4" title="About Us" ><span>About Us</span></a></li>
        <li class="level1"><a href="index.php?id=19" title="Programs" ><span>Programs</span></a>
            <ul >
                <li class="first level2"><a href="index.php?id=19" title="Infant/Toddler" ><span>Infant/Toddler</span></a></li>
                <li class="level2"><a href="index.php?id=20" title="Pre-School/Kindergarten" ><span>Pre-School/Kindergarten</span></a></li>
                <li class="last level2"><a href="index.php?id=21" title="School Age" ><span>School Age</span></a></li>
            </ul>
        </li>
        <li class="level1"><a href="index.php?id=6" title="Careers" ><span>Careers</span></a></li>
        <li class="last level1"><a href="index.php?id=7" title="Info Request/Contact" ><span>Info Request/Contact</span></a></li>
    </ul>
</div>

Есть мысли?

1 Ответ

0 голосов
/ 17 ноября 2011

Это:

.level1 a:hover

должно быть так:

.level1:hover a

Причина в том, что ulне дочерний элемент тега a, к которому у вас есть :hover.Поэтому при наведении на ul a теряет фокус, поэтому теряет свое состояние при наведении

...