在javascript下拉菜单中居中链接

centering links in a drop down javascript menu

本文关键字：链接 中居 下拉菜单 javascript      更新时间：2023-09-26

我有一个包含子菜单的下拉菜单，整个菜单跨越了浏览器的整个宽度，现在链接都位于屏幕的左侧。我想要的是我的链接都在屏幕的中心，与橙色的背景仍然跨越整个浏览器的宽度。

代码如下:

在header中放置javascript和css，其余的在body中:

<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>

添加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;
}

小提琴

相关文章：