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;
        overflow: auto;
    }
    #menu ul li {
        list-style: none;
        float: left;
        margin: 1px;
        background: khaki;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: blue;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        padding: 3px;
    }
    #menu ul li ul li {
        list-style: none;
        float: left;
        margin: 1px;
        background: lightblue;
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: blue;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        text-align: center;
        text-decoration: none;
        padding: 3px;
    }

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

    #menu ul li a:hover {
        background-color: red;
        border-radius: 5px;
        color: white;
        font-size: 12pt;
        font-weight: bolder;
        float: left;
        width: 100px;
    }