首页 文章

Magento：自定义菜单扩展 - CSS到中心菜单

提问于
浏览 次
1

我使用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中尝试的 - text-align for #custommenu display：inline-block for 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;
}

你能给我一些提示如何让菜单居中吗？我在这做错了什么？

css magento menu center

1 回答

  • 0

    我不确定这是否会解决你的CSS问题，但你有 <div> s没有关闭：

    Corrected 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 class="nav-container"> 包装在另一个 <div> 中 .

    Example:

    <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;
}
    回复于

相关问题