CSS 下拉项最初打开

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 元素的子 UL 元素在页面打开时显示，而不仅仅是悬停事件。我正在与 :first-child 一起工作，但没有取得任何成功。

当前相关的 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;
}

JSFiddle