I have a list of images with the names of the people they belong to displayed below each image in an unordered list (UL). When hovering over a person's name, a sentence related to that person should be revealed.
Here is what it looks like:
<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>
Currently, the child UL element of the first LI element only appears on hover. I want it to display initially when the page loads. I tried using :first-child but it didn't work for me.
The relevant CSS code snippet is shown below:
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 more information and to see the current implementation, visit Link to page
Any help, tips, or hints would be greatly appreciated. Thank you!