當下拉菜單的位置絕對時，如何居中放置下拉菜單

Question

我的下拉菜單的位置是絕對位置，我想將下拉菜單的居中居中。我不想靜態設置邊距，因為它也會影響其他菜單。 的HTML

<div class="top_nav">
    <!--naviagation top Begins-->
        <ul>
            <li id="active">                
                <a href="#" id="active"><img src="images/home.png" />home</a>
                <!-- <div class="DDmenu" id="hmedd" style="display:none">
                    <ul>
                        <li><a href="#">Dummy1</a></li>
                        <li><a href="#">Dummy2</a></li>
                        <li><a href="#">Dummy3</a></li>
                    </ul>
                </div>-->
                <div class="clear"></div>
                <div class="current_menu"></div>
            </li>
            <li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
                <a href="#">about us</a>
                <div class="DDmenu" id="abtdd" style="display:none">
                    <ul>
                        <li><a href="#">Dummy1</a></li>
                        <li><a href="#">Dummy2</a></li>
                        <li><a href="#">Dummy3</a></li>
                    </ul>
                </div>
            </li>
            <li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
                <a href="#">inventions</a>
                 <div class="DDmenu" id="inventdd" style="display:none">
                    <ul>
                        <li><a href="#">Dummy Invent1</a></li>
                        <li><a href="#">Dummy Invent2</a></li>
                        <li><a href="#">Dummy Invent3</a></li>
                    </ul>
                </div>
            </li>
            <li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
                <a href="#">architectural</a>
                 <div class="DDmenu" id="archidd" style="display:none">
                    <ul>
                        <li><a href="#">Dummy Architecture1</a></li>
                        <li><a href="#">Dummy Architecture2</a></li>
                        <li><a href="#">Dummy Architecture3</a></li>
                    </ul>
                </div>
            </li>
            <li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
                <a href="#">art pieces</a>
                 <div class="DDmenu" id="artlidd" style="display:none">
                    <ul>
                        <li><a href="#">Dummy art1</a></li>
                        <li><a href="#">Dummy art2</a></li>
                        <li><a href="#">Dummy art3</a></li>
                    </ul>
                </div>
            </li>
            <li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
                <a href="#">caravan</a>
                <div class="DDmenu" id="caravanlidd" style="display:none">
                    <ul>
                        <li><a href="#">Dummy caravan1</a></li>
                        <li><a href="#">Dummy caravan2</a></li>
                        <li><a href="#">Dummy caravan3</a></li>
                    </ul>
                </div>
            </li>
            <li id="tab">
                <a href="#">tables</a>
            </li>
        </ul>
    <!--naviagation top Ends-->
    </div>

CSS：

 .top_nav
{
    width:100%;
    height:30px;
    /*margin-left:130px;*/
}
.top_nav ul
{
    padding:0;
    margin:0 0 0 68px;
}
.top_nav ul li#active
{
    float:left;
    position:relative;
    padding:5px 0 0 0;
    background: #c2cca2;
    margin:0 8px;
    color:#000;
    list-style:none;
}
.top_nav ul li
{
    float:left;
    position:relative;
    padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
    margin:0 8px;
    list-style:none;
}
.top_nav ul li a
{
    text-decoration:none;
    text-transform:capitalize;
    color:#fff;
    font-size:14px;
    font-weight:bold;
    padding-right:6px;
    vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}

.top_nav ul li a#active
{
    text-decoration:none;
    text-transform:capitalize;
    color:#000;
    font-size:14px;
    font-weight:bold;
    padding-right:6px;
    vertical-align:baseline;
}
/*.top_nav ul li:hover
{
    /*background:#c2cca2;
    background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
    background:#c2cca2;    
}
.top_nav ul li#invent
{
    background:#c2cca2;
    height:19px;    
}
.top_nav ul li#archi
{
    background:#c2cca2;    
    height:19px;
}
.top_nav ul li#artli
{
    background:url(../images/art.png) 5px 5px no-repeat;    
    height:19px;
}

.top_nav ul li#caravanli
{
    background:#c2cca2;    
    height:19px;
}
.top_nav ul li#tab
{
    background:#c2cca2;    
    height:19px;
}

.top_nav ul li#abt:hover
{

    background:#c2cca2;
    color:#000 !important;
    height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}

.top_nav ul li:hover
{
    color:#000;

}
.top_nav ul li#invent:hover
{

    background:#c2cca2;
    color:#000;
}
.top_nav ul li#archi:hover
{

    background:#c2cca2;
    color:#000;
}
.top_nav ul li#artli:hover
{

    background:#c2cca2;
    color:#000;
}
.top_nav ul li#caravanli:hover
{

    background:#c2cca2;
    color:#000;
}
.top_nav ul li#tab:hover
{
    /*background:#c2cca2;*/
    background:#c2cca2;
    color:#000;
}

/*.top_nav ul li a:hover
{
    background:#c2cca2;

    padding:16px 6px 2px 0;
    padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
    /*float:left;
    position:relative;*/
    padding:0 4px 0 5px;
}

JS

function showmenu(idm)
{
    document.getElementById(idm).style.display='';

}
function hidemenu(idmn)
{
    document.getElementById(idmn).style.display='none';    
}

任何建議將不勝感激。

Answer 1

您好，我有一個建議給您，為什么您不使用不帶JavaScript的導航代碼，請嘗試此操作，如果您有任何問題或僅想使用javascript導航，請告訴我，請轉到以下鏈接

http://jsfiddle.net/sarfarazdesigner/pNAkf/

或者你可以復制此代碼

CSS代碼：

*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{ 
    float:left; 
    border-right:1px solid #ccc;
    position:relative;
}
ul#nav li a{
    padding:0 15px;
    display:block;
    text-decoration:none;
    color:#fff;
}
#nav li a:hover{
    background:#ccc;
}
ul.subnavi{
    list-style:none;
    position: absolute;
    left: 0;
    background: #fff;
    display:none;
}
ul.subnavi li{
    display:block;
    width:120px;
    float:none;
}
ul#nav li ul.subnavi li a{
    color:#333;
}
ul#nav li ul.subnavi li a:hover {
    background:#333;
    color:#fff;
}
#nav li:hover ul{
    display:block;
}

html代碼是：

<div id="wrapper">
<ul id="nav">
    <li><a href="javascript:;">Home</a></li>
    <li><a href="javascript:;">Services</a>
        <ul class="subnavi">
            <li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul>    
    </li>
    <li><a href="javascript:;">Products</a></li>
    <li><a href="javascript:;">FaQs</a></li>
    <li><a href="javascript:;">Contact</a>
        <ul class="subnavi">
            <li><a href="javascript:;">Link 1</a></li>
            <li><a href="javascript:;">Link 2</a></li>
            <li><a href="javascript:;">Link 3</a></li>
        </ul> 
    </li>
    <li><a href="javascript:;">Blog</a></li>
</ul>
</div>

Answer 2

您的.top_nav ul的css影響topnav類中的所有ul

嘗試將其添加到您的CSS

.DDmenu { background: none repeat scroll 0 0 #DDDDDD; // just to show your result display: none; margin-left: -24px; position: absolute; }