0

我正在尝试将下拉菜单居中。你可以在这里查看我意识到这个问题之前已经被问过，但是这些事情是如此不同，以至于答案似乎并不适用。
这是我的CSS

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a
{
    margin: 0;
    padding: 0;
    position: relative;
}
    #cssmenu
     {
        height: 39px;

    }

    #cssmenu:after,
    #cssmenu ul:after
{
    content: '';
    display: block;
    clear: both;
}

.top_level{
    height:40px;
}

#cssmenu a
{
    height: 22px;
    line-height: 26px;
    padding-top: 10px;
    color: white;
    font-family: Georgia;
    font-weight: 100;
    font-size: 20px;
    float: left;
    padding-bottom:10px;
    padding-left:17px;
    padding-right: 17px;
    text-decoration:none;
}

#cssmenu ul
{
    list-style: none;
    margin-left:auto;
    margin-right:auto;
}


#cssmenu > ul
{
    float: left;
}

    #cssmenu > ul > li
    {
        float: left;
        z-index: 2000;
    }

        #cssmenu > ul > li:hover:after
        {
            content: '';
            display: block;
            width: 0;
            height: 30px;
            position: absolute;
            left: 50%;
            bottom: 0;
            z-index: 10000;
        }
#cssmenu .has-sub
{
    z-index: 1;
    top: 0px;
    left: 0px;
    height: 30px;
}

    #cssmenu .has-sub:hover > ul
    {
        display: block;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        position:absolute;
        z-index:10000;
    }

    #cssmenu .has-sub ul
    {
        /*CSS for the size and position of drop down*/
        display: none;
        position: absolute;
        width: 156px;
        top: 42px;
        left:-20px;
        text-align:center;
        background-image: url(../images/dropDown.png);
        z-index:10000;
    }

        #cssmenu .has-sub ul li
        {
            *margin-bottom: -1px;
            display:inline-block;
        }

            #cssmenu .has-sub ul li a
            {
                /*CSS for drop down menu*/
                /*CSS for drop down menu*/

                position:relative;
                width:150px;
                z-index:10000;
                font-family:NewsCycleRegular;
                font-weight: 300;
                font-size: 14px;
                text-align:center;
                color: white;
                filter: none;
                display: block;
                line-height: 18px;
                padding: 3px;
            }

            #cssmenu .has-sub ul li:last-child a
            {
                /*CSS for last element in drop down list*/
                -webkit-border-bottom-left-radius: 3px;
                border-bottom-left-radius: 3px;
                -webkit-border-bottom-right-radius: 3px;
                border-bottom-right-radius: 3px;
                z-index: 10000;
                position: relative;
                padding-bottom:15px;
            }

            #cssmenu .has-sub ul li:first-child a
            {
                /*CSS for last element in drop down list*/
                padding-top:10px;
                -webkit-border-top-left-radius: 3px;
                border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                border-top-right-radius: 3px;
            }

            #cssmenu .has-sub ul li:hover a
            {

                /*Hover state for open drop down*/
            }

    #cssmenu .has-sub .has-sub:hover > ul
    {
        display: block;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

    #cssmenu .has-sub .has-sub ul
    {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
    }

        #cssmenu .has-sub .has-sub ul li a
        {
            background: #0c7fb0;
            border-bottom: 1px dotted #6db2d0;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }

            #cssmenu .has-sub .has-sub ul li a:hover
            {
                background: #095c80;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;
            }

带有下拉菜单的项目看起来像这样

<li class='has-sub'><a href='surgical_specialties.php'><span>Surgery</span></a><img src="images/divider.png" />
                            <ul>
                                <li><a href='laparoscopic_surgery.php'><span>Laparoscopy</span></a></li>
                                <li><a href='colorectal_surgery.php'><span>Colorectal Surgery</span></a></li>
                                <li><a href='endoscopy.php'><span>Endoscopy</span></a></li>
                                <li><a href='vascular_surgery.php'><span>Vascular Surgery</span></a></li>
                                <li><a href='breast_surgery.php'><span>Breast Surgery</span></a></li>
                                <li><a href='oncologic_surgery.php'><span>Oncologic Surgery</span></a></li>
                                <li><a href='general_surgery.php'><span>General Surgery</span></a></li>
                                <li><a href='thoracic_surgery.php'><span>Thoracic Surgery</span></a></li>
                            </ul>
                        </li>
4

1 回答 1

0

假设您的意思是下拉菜单不以它的父按钮为中心，您需要删除将下拉列表的边距和填充重置为零。

#cssmenu ul li ul {
    margin: 0;
    padding: 0;
}

然后，你应该能够进去和他们一起玩，让他们定位到你想要的位置。

于 2013-04-01T15:22:14.873 回答