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

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/

或U可以複製該代碼

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