Magento：自定義菜單擴展 - CSS到中心菜單

Question

我使用Custom Menu extension for Magento，但無法找到如何更改custommenu.css以使菜單居中。這是菜單的一段代碼：

<div class="nav-container"> 
    <div id="custommenu"> 
    <div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');"> 
    <div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;"> 
    <div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');"> 
    <div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;"> 
... rest of code... 

這是我在CSS嘗試 - 爲#custommenu +顯示文本對齊：inline-block的用於div.menu（和一些其他的選擇也是如此），但可以沒有得到它的工作：

#custommenu { 
    position:relative; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 0 16px; 
    width: 918px; 
    z-index: 999; 
    text-align: center;  
} 
div.menu { 
    display:inline-block; 
    float: left; 
} 

你能給我一些提示如何讓菜單居中？我在這裏做錯了什麼？

Answer 1

林不知道這是否會解決你的CSS問題，但你有<div> S中的未封閉：

更正HTML：

<div class="nav-container"> 
<div id="custommenu"> 
    <div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');"></div> 
    <div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;"></div> 
    <div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');"></div> 
    <div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;"></div> 
</div> 
</div> 

如果你的CSS文件中沒有訪問編輯它，你可以嘗試在另一個<div>包裝<div class="nav-container">。

例子：

<div class="nav-wrapper"> 
    <div class="nav-container"> 
     <div id="custommenu"> 
      ... 
     </div> 
    </div> 
</div> 

然後引用這樣的CSS：

div.nav-wrapper div.nav-container div#custommenu { 
    position:relative; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 0 16px; 
    width: 918px; 
    z-index: 999; 
    text-align: center;  
} 
div.nav-wrapper div.nav-container div#custommenu div.menu { 
    display:inline-block; 
    float: left; 
}