Question

我有一个包含子菜单的下拉菜单，整个菜单跨越浏览器的整个宽度，此时链接全部位于屏幕左侧。我想要的是我的链接全部位于屏幕的中央，橙色背景仍然跨越浏览器的整个宽度。

以下是代码：

头部内部是javascript和css，其余部分是：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

    $("#menu li").hover(function(){
        $(this).children(":hidden").slideDown();

    },function(){
        $(this).parent().find("ul").slideUp();

    });

});

</script>


<style>

#menu{
height: 30px;
background-color:#F90;
}

#menu li li:hover{
background-color:yellow;
cursor:pointer;
}

#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}

#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}

#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}

#menu li li{
float:none;
padding:2px;
}

#menu a{
color:#000;
text-decoration:none;
}
</style>



<div id="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Info</a>
            <ul>
                <li><a href="http://www.example.com">example</a></li>
                <li><a href="#">Submenu2</a></li>
                <li><a href="#">Submenu3</a></li>
            </ul>
            </li>
    <li><a href="#">Portfolio</a>
            <ul>
                <li><a href="#">Submenu1</a></li>
                <li><a href="#">Submenu2</a></li>
                <li><a href="#">Submenu3</a></li>
            </ul>
            </li>
</ul>
</div>

Answer 1

添加margin: auto和display: table：

<强> CSS

#menu{
    height: 30px;
    background-color:#F90;
    width:100%;
}

#menu li li:hover{
    background-color:yellow;
    cursor:pointer;
}

#menu ul, #menu li{
    list-style-type:none;
    padding:0;
    margin:auto;/*Add this*/
    display: table;/*Add this*/
}

#menu li{
    float:left;
    width:120px;
    list-style-type:none;
    line-height:30px;
    text-align:center;
}

#menu li ul{
    position:absolute;
    background-color:#f90;
    display:none;
}

#menu li li{
    float:none;
    padding:2px;
}

#menu a{
    color:#000;
    text-decoration:none;
}

fiddle

在下拉javascript菜单中居中链接

1 个答案: