如何创建一个绝对定位的子菜单，它出现在css悬停上

时间：2016-01-14 11:11:05

标签： css

我有一个菜单，需要展开以显示悬停时的子元素。根据设计，扩展的子ul需要在页面的整个宽度上扩展，因此需要绝对定位，以便从父li的宽度中突破。

问题是当你将鼠标悬停在它上面时，我需要让孩子看到它。因为它是绝对定位的，它不再包含在父li中，所以只要我的鼠标移开它就会消失。

如果我将父li更改为position：relative，当鼠标移过它时，ul仍然可见，但是子ul不再填充页面宽度的100％。

这是一个小提琴演示： https://jsfiddle.net/sx2aouht/12/

这是缩写标记（上面小提琴链接上的完整代码）：

<nav class="priority-nav">
    <ul class="menu">
        <li class="first expanded active-trail active menu-mlid-178 help"><a href="/content/help-advice" title="" class="active-trail active">Help &amp; Advice</a>
            <ul class="menu">
                <li class="first leaf menu-mlid-526"><a href="/content/find-your-local-services" title="">Find your local services</a></li>
                <li class="leaf menu-mlid-528"><a href="/node" title="">Join CarerSmart</a></li>
                <li class="leaf menu-mlid-527"><a href="/node" title="">Join our online community</a></li>
            </ul>
        </li>
    </ul>
</nav>

这是css：

.priority-nav ul li {
   //if this is uncommented the ul will remain visible when
   //the mouse is over it, but the ul will not fill the page 100%
   //position: relative;
   float: left;
   padding: 0 10px;
   list-style-type: none;
 }

.priority-nav ul li ul {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  background-color: red;
  width: 100%;
  padding: 50px 130px;
}

.priority-nav ul li:hover ul {
  display: block;
}

2 个答案:

答案 0 :(得分：2)

当您将鼠标悬停在子菜单上时，菜单已经保持打开状态，问题是当鼠标向下移动到子菜单时，它会留下悬停的li元素，以避免这样做，确保当鼠标进入子菜单时，不会离开你悬停的主力，子菜单在li项目中，因此将其悬停在主要的li上。

你必须避免离开主要的li直到你进入子菜单，我在你的例子中使用了一些填充：

.priority-nav ul li {
   //if this is uncommented the ul will remain visible when
   //the mouse is over it, but the ul will not fill the page 100%
   //position: relative;
   float: left;
   padding: 0 10px 5px;
   list-style-type: none;
 }

.priority-nav ul li ul {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  background-color: red;
  width: 100%;
  padding: 50px 130px;
}

.priority-nav ul li:hover ul {
  display: block;
}
<nav class="priority-nav">
  <ul class="menu"><li class="first expanded active-trail active menu-mlid-178 help"><a href="/content/help-advice" title="" class="active-trail active">Help &amp; Advice</a><ul class="menu"><li class="first leaf menu-mlid-526"><a href="/content/find-your-local-services" title="">Find your local services</a></li>
<li class="leaf menu-mlid-528"><a href="/node" title="">Join CarerSmart</a></li>
<li class="leaf menu-mlid-527"><a href="/node" title="">Join our online community</a></li>
<li class="leaf menu-mlid-530"><a href="/node" title="">Help and advice topic 4</a></li>
<li class="leaf menu-mlid-531"><a href="/node" title="">Help and advice topic 5</a></li>
<li class="leaf menu-mlid-532"><a href="/node" title="">Help and advice topic 6</a></li>
<li class="leaf menu-mlid-533"><a href="/node" title="">Help and advice topic 7</a></li>
<li class="leaf menu-mlid-534"><a href="/node" title="">Help and advice topic 8</a></li>
<li class="last leaf menu-mlid-535"><a href="/node" title="">Help and advice topic 9</a></li>
</ul></li>
<li class="expanded menu-mlid-184 community"><a href="/node" title="">Online Community</a><ul class="menu"><li class="first leaf menu-mlid-536"><a href="/node" title="">Discussion board</a></li>
<li class="last leaf menu-mlid-537"><a href="/node" title="">Chat</a></li>
</ul></li>
<li class="last expanded menu-mlid-176 get-involved"><a href="/node" title="">Get Involved</a><ul class="menu"><li class="first leaf menu-mlid-529"><a href="/node" title="">Donate</a></li>
<li class="leaf menu-mlid-538"><a href="/node" title="">Events</a></li>
<li class="leaf menu-mlid-539"><a href="/node" title="">Volunteer</a></li>
<li class="last leaf menu-mlid-540"><a href="/node" title="">Corporate opportunities</a></li>
</ul></li>
<li class="more"><a href=""><span>More</span></a></li>
</ul>
</nav>

答案 1 :(得分：1)

如果子菜单的宽度为 页 的100％，但顶级菜单不是，那么我们仍然可以将子菜单与父菜单相关联而不是li。

.priority-nav >.menu {
  position: relative;
}

但是我们将子菜单调整为具有视口单元的页面宽度。

.priority-nav ul li ul {
  display: none;
  position: absolute;
  top:100%;
  left: 0;
  background-color: red;
  width: 100vw;

}

＆＃13;
＆＃13; 
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.cf:before,
.cf:after {
  content: " ";
  display: table;
  /* clearfix */
}
.cf:after {
  clear: both;
}
.priority-nav {
  position: relative;
  width: 70%;
}
.priority-nav > .menu {
  background: #c0ffee;
}
.priority-nav ul li {
  float: left;
  padding: 0 10px;
  list-style-type: none;
  padding: 10px;
}
.priority-nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: red;
  width: 100vw;
}
.priority-nav ul li:hover ul {
  display: block;
}
＆＃13; 
<nav class="priority-nav">
  <ul class="menu cf">
    <li class="first expanded active-trail active menu-mlid-178 help"><a href="/content/help-advice" title="" class="active-trail active">Help &amp; Advice</a>
      <ul class="menu">
        <li class="first leaf menu-mlid-526"><a href="/content/find-your-local-services" title="">Find your local services</a>
        </li>
        <li class="leaf menu-mlid-528"><a href="/node" title="">Join CarerSmart</a>
        </li>
        <li class="leaf menu-mlid-527"><a href="/node" title="">Join our online community</a>
        </li>
        <li class="leaf menu-mlid-530"><a href="/node" title="">Help and advice topic 4</a>
        </li>
        <li class="leaf menu-mlid-531"><a href="/node" title="">Help and advice topic 5</a>
        </li>
        <li class="leaf menu-mlid-532"><a href="/node" title="">Help and advice topic 6</a>
        </li>
        <li class="leaf menu-mlid-533"><a href="/node" title="">Help and advice topic 7</a>
        </li>
        <li class="leaf menu-mlid-534"><a href="/node" title="">Help and advice topic 8</a>
        </li>
        <li class="last leaf menu-mlid-535"><a href="/node" title="">Help and advice topic 9</a>
        </li>
      </ul>
    </li>
    <li class="expanded menu-mlid-184 community"><a href="/node" title="">Online Community</a>
      <ul class="menu">
        <li class="first leaf menu-mlid-536"><a href="/node" title="">Discussion board</a>
        </li>
        <li class="last leaf menu-mlid-537"><a href="/node" title="">Chat</a>
        </li>
      </ul>
    </li>
    <li class="last expanded menu-mlid-176 get-involved"><a href="/node" title="">Get Involved</a>
      <ul class="menu">
        <li class="first leaf menu-mlid-529"><a href="/node" title="">Donate</a>
        </li>
        <li class="leaf menu-mlid-538"><a href="/node" title="">Events</a>
        </li>
        <li class="leaf menu-mlid-539"><a href="/node" title="">Volunteer</a>
        </li>
        <li class="last leaf menu-mlid-540"><a href="/node" title="">Corporate opportunities</a>
        </li>
      </ul>
    </li>
    <li class="more"><a href=""><span>More</span></a>
    </li>
  </ul>
</nav>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题