JSFiddle

Question

我有一个图像列表，下面是属于UL图像的人的名字。当悬停在名称上时，将显示属于该人的句子。

所以看起来像这样

            <ul>
            <li>
                <a href="#">Name</a>
                <ul>
                    <li><a href="#"></a></li>
                    <li class="slogan1"><a href="#">some kind of sentence</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Name 2</a>
                <ul>
                    <li><a href="#"></a></li>
                    <li class="slogan1"><a href="#">some kind of sentence</a></li>
                </ul>
            </li>
            </ul>

到目前为止工作正常。我现在想要在页面打开时初始显示第一个LI元素的子元素，而不仅仅是在悬停事件上。我正在努力：第一个孩子，但没有取得任何成功。

当前相关的CSS部分如下所示。

ul li ul{
display: none;}

ul li:hover ul{
display: block;}

ul li:hover ul li a{
background: #009EE3;
height:10px;}

ul li:hover ul li.slogan1 a{
background: #009EE3;
height:45px;
width:958px;
position:absolute;
left:0px;
padding-top:5px;
line-height:130%;}

供其他参考和查看当前实施Link to page

任何帮助，提示，提示都受到高度赞赏......非常感谢...

Answer 1

first-child是正确的想法，只需添加：

ul li:first-child ul {
    display:block;
}

CSS Dropdown项目最初打开

1 个答案:

JSFiddle