Question

我在wordpress网站上有一个导航菜单，其中包含某些元素的子菜单。

<nav>
    <div class="nav_container">
        <ul id="menu-header-menu" class="menu">
            <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-36">
                <a href="...">Cottages</a>

                <div id="sub_menu_container">
                    <ul class="sub-menu">
                        <li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-46 current_page_item menu-item-51">
                            <a href="...">Cottage 1</a>
                        </li>

                        <li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
                            <a href="...">Cottage 2</a>
                        </li>
                    </ul>
                </div>
            </li>

            ...more li elements etc 
        </ul>
    </div>
</nav>

菜单元素以页面为中心，但导航的背景在页面宽度上延伸。

我遇到的问题是导航的设计是这样的，子菜单元素直接出现在第一个导航下，菜单元素直接位于父菜单元素下，但背景也延伸到横跨宽度的页。

鉴于我正在使用相对和绝对位置，并且主菜单元素在页面上居中，而它们的背景在页面的宽度上延伸（我使用具有一定宽度的div执行此操作）子菜单当它的宽度为100％时，它只是以主菜单元素为中心的div的宽度。

也许值得一提的是，我设法在不使用位置相对和绝对的情况下实现了所需的外观，但这意味着子菜单没有“附加”到主菜单，鼠标在尝试到达子时离开了悬停区域菜单，然后消失了，所以在它消失之前无法到达。

我已经附上了我所追求的图像，以使其更清晰，我也附加在当前的css下面。

.nav_container
{
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;

    width: 1055px;
}

nav
{
    width: 100%;
height: 40px;

    background: #685c53;
    -moz-box-shadow: inset 0 0 3px 3px #37332e;
    -webkit-box-shadow: inset 0 0 3px 3px #37332e;
    box-shadow: inset 0 0 3px 3px #37332e;  

    position: relative;
}

nav ul
{
    margin: 0;
    padding: 0;

    display: inline;
}

nav li
{
    display: inline;
    padding: 8px 9px;
}

#sub_menu_container
{
    display: none;

    float: left;

    position: absolute; 
    top: 0;

    padding-top: 40px;

    width: 100%;
}

nav ul .sub-menu
{
    text-align: center;

    width: 100%;
    height: 30px;

    background: #b3a797;

    -moz-box-shadow: inset 0 0 3px 3px #685c53;
    -webkit-box-shadow: inset 0 0 3px 3px #685c53;
    box-shadow: inset 0 0 3px 3px #685c53;  
}

nav ul li:hover > #sub_menu_container
{
    display: block;
}

.sub-menu li 
{
    display: inline-block;

    margin-top: 0px;
    padding-bottom: 2px;
    margin-bottom: 0px;
    padding-top: 5px;

    padding-left: 10px;

    border-right: 1px solid #000;
}

Nav

更新将我的CSS改为：

然后我回到原来的问题，因为背景突出了我的问题，子菜单必须“附加”到鼠标悬停在其上的元素，这样你就可以将鼠标从主菜单移动到子菜单了菜单没有菜单消失。

Updated Nav

Answer 1

进行以下更改。我想这就是你要找的东西。

#sub_menu_container
{
display: none;
float: left;
position: absolute; 
top:;
left:0px;
padding-top: 10px;
width: 100%;
background-color:black;/*this is for testing purposes*/
}

请评论更多信息或告诉我这是否是您想要的。希望它能帮助Pippa Rose Smith。感谢

Answer 2

我相信无序列表和子菜单容器相等而不是嵌套在另一个容器中会简化一些事情。以下是我将如何操作的完整示例，请注意 #sub 。

<nav>
  <ul>
    <li>Cheeses
      <div id='sub'></div>
      <ul>
        <li>Opt1</li>
        <li>Opt2</li>
        <li>Opt3</li>
      </ul>
    </li>
    <li>Paper clips
      <div id='sub'></div>
      <ul>
        <li>Opt1</li>
        <li>Opt2</li>
        <li>Opt3</li>
      </ul>
    </li>
    <li>Swords
      <div id='sub'></div>
      <ul>
        <li>Opt1</li>
        <li>Opt2</li>
        <li>Opt3</li>
      </ul>
    </li>
  </ul>
</nav>

*{
  margin:0px;
  padding:0px;
}

nav{
  background:green;
}

ul{
  display:flex;
}

li{
  display:inline;
  margin:auto;
}

li>ul{
  display:none;
  position:absolute;
}

li:hover>ul{
  display:inline;
}

#sub{
  background:blue;
  display:none;
  height:1.5em;
  left:0px;
  position:absolute;
  width:100vw;
}

li:hover>#sub{
  display:block;
}

Answer 3

试试这个......

.sub-menu li 
{
display: inline-block;
margin-top: 0px;
padding-bottom: 0px;
margin-bottom: 0px;
padding-top: 0px;
padding-left: 10px;
border-right: 1px solid #000;
}

如果这不是您想要的，请回复。在http://jsfiddle.net/gq2fM/

处查看小提琴

在悬停时在页面宽度上拉伸子导航栏

3 个答案: