CSS Dropdown item initially open

Question

I'm having a list of images and below the name of the person belonging to the image as an UL. When hovering on the name then a sentence to belonging to the person will be displayed.

So it looks like this

            <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>

That works fine so far. I want now that the child UL Element of the first LI Element is being displayed initally when the page is opened and not only on the hover event. I was working around with :first-child but didn't had any success.

The current relevant CSS part looks as follows.

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

For additional reference and to view the current implementation Link to page

Any help, tipps, hints are highly appreciated...many thanks...

Have you tried putting your :first-child css rule before the first one above, where it state display:none for ul li ul ? — Denis St-Michel, Feb 25 '15 at 18:44
There is a huge discussion here about class and first-child: http://stackoverflow.com/questions/2717480/css-selector-for-first-element-with-class — Olen, Feb 25 '15 at 18:59

score 2 · Accepted Answer · answered Feb 25 '15 at 18:44

2

first-child was the right idea, just add:

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

JSFiddle

answered Feb 25 '15 at 18:44

APAD1

13,509
8
43
72

1

thanks that works..just placed my first-child on the 2nd ul-element instead of the li element.. – Chris Feb 26 '15 at 12:55

CSS Dropdown item initially open

1 Answers1

JSFiddle