label with text info

HTML

<div id="box1">
        <div id="menu">
            <ul>
                <li><a href="">Fruit</a>
                    <ul>
                        <li><a href="#">Mango</a>
                        </li>
                        <li><a href="#">Banana</a>
                        </li>
                    </ul>
                </li>

                <ul>
                    <li><a href="">Vegitable</a>
                        <ul>
                            <li><a href="#">Potato</a>
                            </li>
                            <li><a href="#">Garbag</a>
                            </li>

                        </ul>
                    </li>
                </ul>
        </div>
    </div>

CSS

#box1 {
        width: 350px;
        height: 150px;
        padding: 5px;
        border: 1px solid blue;
        margin: 50px auto;
        overflow: auto;
    }
    #menu ul li {
        list-style: none;
        float: left;
        /* margin: 1px;    no margin. spaces mess up*/
        background: khaki;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: blue;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        
        padding: 3px;
    }
#menu ul {
    padding-left:0;
}
#menu ul li a { 
    display:block;
    text-align: center;
    text-decoration: none;
}

    #menu ul li ul li {
        background: lightblue;
        color: blue;
    }

#menu ul li ul {display:none;}    
 #menu ul li a:hover + ul {display:block;} 
 #menu ul li:hover ul {display:block;} 

    #menu ul li a:hover {
        background-color: red;
        color: white;
    }