مشکل در ساخت منو با css !

Mohammad.Ali.M · Feb 23, 2013

سلام بر دوستان عزیز ؛
خواستم یک منوی Css طراحی کنم ، به یه مشکل بهداشتی برخوردم !
کد زیر ، کد html اون هست :

کد:

            <ul class="TopMenu">
                <li><a class="FirstPage" href="Default.aspx">صفحۀ اول</a></li>
                <li><a href="#">محصولات</a>
                    <ul>
                        <li><a href="#">لپ تاپ</a></li>
                        <li><a href="#">موبایل</a></li>
                        <li><a href="#">فلش</a></li>
                        <li><a href="#">تبلت</a></li>
                    </ul>
                </li>
                <li><a href="#">درباره ما</a></li>
            </ul>

این هم Css اون :

کد:

.TopMenu
{
    margin: 0 auto;
    width: 350px;
    height: 35px;
    background-color: gray;
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    padding: 5px;
}


    .TopMenu li
    {
        float: right;
        display: block;
        position: relative;
        margin: 0 5px 0 20px;
    }


    .TopMenu ul li
    {
        float: none;
    }


    .TopMenu ul
    {
        display: none;
        background-color: gray;
        border-radius: 20px;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        text-align: center;
    }


    .TopMenu .FirstPage, .TopMenu li:hover > a
    {
        background-color: #fff;
        border-radius: 15px;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        display: block;
    }


    .TopMenu a
    {
        text-decoration: none;
        color: black;
        display: block;
    }


    .TopMenu li:hover ul
    {
        display: block;
        position: absolute;
    }

مشکل اینجاست که وقتی روی منوی محصولات میرم ، زیر منوی اون که نشون داده میشه ، لینک های زیر منو، کنارکشیده شده اند . من میخوام کل سطر رو بگیرند ، هرکاری هم کردم نشد که نشد ! میشه راهنماییم کنید ؟؟؟؟