Question

我有一个顶部栏的页面，其中包含一个列表，当用户悬停'about'链接时，该列表包含我试图删除的标签。

  <!-- 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链接悬停在一起，如何使drop tab掉线？

Answer 1

css的一个小变化可以解决问题。

#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;
}
}

要

#about ul{
 display:none;   
}
#about:hover ul{
    display:block;

}

.dropTab {
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;
}
}

还添加了缺失的李

可能不完美（删除了跨度和缺失导入的定位样式），但悬停现在正在运行：http://jsfiddle.net/pPkLQ/

使用CSS伪类创建下拉选项卡：悬停

1 个答案: