我正在使用www.glustik.com/dustreeproductions/index.php
娱乐链接有一个下拉菜单,我正在努力使下拉菜单仍然保持娱乐父链接处于悬停状态州。 (这有意义吗?)此外,这将是在不久的将来双重下降。
我的CSS:
#nav ul li:hover ul#sub li a {
display:block;
background:#e6e6e6;
color:#CC0066;
padding:5px 15px 0px 25px;
height:25px;
width:290px;
text-align: left;
border-bottom: 1px solid #f2f2f2;
border-right: none;
margin: 0 0;
}
HTML:
<div id="nav-box">
<div id="main-nav">
<div id="nav">
<ul>
<li id="company"><a title="Company" href="http://www.glustik.com/dustreeproductions/company.php"></a></li>
<li id="entertainment"><a title="Entertainment" href="http://www.glustik.com/dustreeproductions/entertainment.php"></a>
<ul id="sub">
<li id="dance"> <a href="http://www.jasontanzer.com/guitarist-original-music.asp">Dance</a></li>
<ul id="subDance">
<li id="smiths"> <a href="http://www.jasontanzer.com/guitarist-original-music.asp">Smiths</a></li>
</ul>
<li id="classicRock"><a href="http://www.jasontanzer.com/guitarist-shows-covers.asp">Classic Rock | Top 40 | Rock</a></li>
<li id="country"><a href="http://www.jasontanzer.com/commercial-tv-film-jingles.asp">Country</a></li>
<li id="rockabilly"><a href="http://www.jasontanzer.com/composer.asp">Rockabilly | Reggae | Bluegrass | Other</a></li>
<li id="karaoke"><a href="http://www.jasontanzer.com/composer.asp">Karaoke | Live Band Karaoke | All Requests</a></li>
<li id="solos"><a href="http://www.jasontanzer.com/composer.asp">Solo's | Duo's | Trio's</a></li>
<li id="productionShows"><a href="http://www.jasontanzer.com/composer.asp">Production Shows</a></li>
<li id="dj"><a href="http://www.jasontanzer.com/composer.asp">DJ's</a></li>
</ul>
</li>
<li id="video"><a href="http://www.glustik.com/dustreeproductions/video.php"></a>
</li>
<li id="studio"><a href="http://www.glustik.com/dustreeproductions/studio.php"></a>
</li>
<li id="liveAudio"><a href="http://www.glustik.com/dustreeproductions/live-audio.php"></a>
</li>
<li id="eventPlanning"><a href="http://www.glustik.com/dustreeproductions/event-planning.php"></a>
</li>
<li id="contact"><a href="http://www.glustik.com/dustreeproductions/contact.php"></a>
</li>
</ul>
</div> <!-- end Nav -->
</div> <!-- end Main Nav -->
</div> <!-- end Nav Box -->
#nav ul li:hover ul#sub li a:hover {
background:#CCC;
color:#CC0066;
}
答案 0 :(得分:3)
我正努力让它下降徘徊仍然保持 娱乐父链接处于悬停状态。
在此处更改选择器:
#nav #entertainment a:hover {
background-position:0 -20px;
}
进入这个:
#nav #entertainment:hover > a
这意味着:只要id
为entertainment
的元素(位于id
nav
的元素内的元素)悬停在上面,选择任何{{1 } direct children的元素。
您必须为每个其他按钮进行“相同更改”。
使用a
并不是最佳选择 - 它是一个“过度合格的选择器”(两个#nav #entertainment ..
s)。
id
就足够了。
请参阅:http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors
它没有任何实际差异 - 但是,这是一个你应该坚持的最佳实践。