Navigation css ul li:hover

Hello newbie question, I'll just wanted to hover the li.about on the ul.second.. Can someone help me on this one..

<ul id="nav" class="clear">
    <li id="home"><a href="index.html"></a></li>
    <li id="about"><a href="about.html"></a></li>
    <ul class="second">
        <li><a href="www.yahoo.com">1st Link</li>
        <li><a href="www.google.com">开发者_开发问答2nd Link</li>
        <li><a href="www.google.com">2nd Link</li>
    </ul>
    <li id="gallery"><a href="gallery.html"></a></li>
    <li id="before-after"><a href="before-after.html"></a></li>
    <li id="loft"><a href="loft-conversations.html"></a></li>
    <li id="case"><a href="case-studies.html"></a></li>
    <li id="testimonials"><a href="testimonials.html"></a></li>
    <li id="faqs"><a href="faqs.html"></a></li>
    <li id="contact"><a href="contact.html"></a></li>
</ul>

css codes

#navigation ul#nav li#about:hover ul.second
{
    background:#CCC;
    padding:1px;
    margin:1px; 
    height:200px; 
    color:black; 
    z-index:1000; 
    width:200px;
}

If its a drop down menu you're trying to do, then make use of the display: none; and display: block css properties.