0

我有一个带有顶栏的页面，其中包含一个列表，当用户将“关于”链接悬停在上面时，该列表包含我试图删除的选项卡。

  <!-- page top bar -->
    <div id="topBar">
        <ul class="dropper">
            <li>

                <a id="about" >
                    About
                </a>

                <ul>
                    <span class="dropTab">
                    <img class="thumb" src="assets/images/StephenBW.jpg"/>
                    <p>
                        This blog is written by ...
                    </p>
                    </span>
                </ul>

            </li>

        </ul>    
    </div>

这是（s）css

 #topBar{
@include goldTopper;
top:0px;
display:block;
@include bar;
margin: auto;
@include containerShadow;
border-bottom:1px solid gold; border-top-color:#FF9;
ul, ul li {
    display:inline;
    list-style:none;
}

ul li {
    position:relative;
}

#about {
    padding-left:8px; 
    color:#836B15;
    font-weight:850;
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    position:absolute; top:15px;

}

p{
    color:#836B15;
    font-weight:850;
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    list-style: none;
    margin-top:10px;
    clear:left;
}

li ul {
    span{}
}
}

#about:hover {
.dropTab{
    display:block;
}

}

.dropTab {
display:none;
top:47px;left:8px;position:absolute;
width:285px; height:625px; @include whiteGradient; padding:6px;
border-bottom:solid 1.5px; border-left:solid 1.5px; border-right:solid 1.5px;
p{
    font-size:10pt;
}
}

.thumb {
height:131px; display:inline;
float:left; padding:10px;
}

这不起作用，我不知道为什么。我可以说的很清楚的问题是，当仅使用 css 将 about 链接悬停在上方时，如何使下拉选项卡下降？

4

1 回答 1

0

css 中的一个小改动就可以解决问题。

#关于：悬停{
.dropTab{
    显示：块；
}

}

.dropTab {
显示：无；
上：47px；左：8px；位置：绝对；
宽度：285px；高度：625px；@包括白色渐变；填充：6px；
边框底部：实心 1.5px；左边框：实心 1.5px；右边框：实心 1.5px；
p{
    字体大小：10pt；
}
}

至

#关于 ul{
 显示：无；   
}
#about:悬停 ul{
    显示：块；

}

.dropTab {
上：47px；左：8px；位置：绝对；
宽度：285px；高度：625px；@包括白色渐变；填充：6px；
边框底部：实心 1.5px；左边框：实心 1.5px；右边框：实心 1.5px；
p{
    字体大小：10pt；
}
}

并且还添加了缺失的 li

可能并不完美（删除了跨度和缺少导入的定位样式），但悬停现在可以工作：http: //jsfiddle.net/pPkLQ/

于 2012-06-13T19:01:19.810 回答