Question

我正在创建一个带有下拉菜单的网站，但当我将鼠标悬停在它上面时，它会消失。我正在使用导致此问题的margin-top，但我需要遵循特定的设计。

我知道如何克服这个问题

当您尝试将鼠标悬停在“关于”链接上并点击子链接时，您会看到问题

HTML

<nav role="navigation" id="navmenu">
    <div class="menu">
        <ul>
            <li class="page_item page-item-6 current_page_item"><a href="">Home</a>
            </li>
            <li class="page_item page-item-2 page_item_has_children"><a href="">About</a>
                <ul class="children">
                    <li class="page_item page-item-23"><a href="">Everything you need to know</a>
                    </li>
                    <li class="page_item page-item-25"><a href="">Checklist</a>
                    </li>
                </ul>
            </li>
            <li class="page_item page-item-8"><a href="">Your dog</a>
            </li>
            <li class="page_item page-item-10"><a href="">How can you help your dog</a>
            </li>
        </ul>
    </div>
</nav>

CSS

#navmenu ul ul {
    background: none repeat scroll 0 0 #f4d218;
    margin-top: 1.4em;
    padding: 0 1em 1em;
    position: absolute;
    width: 145px;
    display: none;
    z-index: 1;
}
#navmenu ul li:hover > ul {
    display: block;
}
#navmenu ul li {
    float: left;
}
#navmenu ul ul li:first-child {
    border-top: none;
}
#navmenu ul ul li {
    border-top: 2px dotted #b58e02;
    margin-top: 1.4em;
    padding: 10px 0 0;
    width: 100%;
}
#navmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    list-style-image: none;
}
#navmenu li {
    display: inline;
    vertical-align: middle;
}
#navmenu ul li a {
    color: #706f6f;
    padding: 11px 42px;
    text-decoration: none;
}
#navmenu {
    border-bottom: 2px dotted #c0d193;
    border-top: 2px dotted #c0d193;
    overflow: hidden;
    padding-bottom: 8px;
    padding-top: 15px;
}
#navmenu ul ul li a {
    color: #ab8602;
    margin: 0;
    padding: 0;
}

Answer 1

当你尝试:hover超过ul列表时，之所以消失是因为你在#navmenu ul ul上有1.5em的margin-top。摆脱该代码，它将完美地工作。但为了实现您正在寻找的效果，请将这些内容添加到CSS中：

#navmenu ul li a{
  padding: 22px 42px
}

#navmenu ul ul{
  margin-top: 1.1em;
}

Answer 2

添加

#navmenu li {
    display: inline;
    vertical-align: middle;
    padding: 20px 0; /*add this*/ 
 }
#navmenu ul li {
  float: left;
  position: relative;
}
#navmenu ul ul {
  background: none repeat scroll 0 0 #f4d218;
  top: 100%; /*add this and remove   margin-top: 1.4em;*/
  padding: 0 1em 1em;
  position: absolute;
  width: 145px;
  display: none;
  z-index: 1;
}

然后删除

#navmenu {
  border-bottom: 2px dotted #c0d193;
  border-top: 2px dotted #c0d193;
  /* overflow: hidden; */
}

DEMO

DEMO FULL

Answer 3

您的绝对div与其父元素相距太远。两者之间的差距导致你的下拉不起作用。

您需要增加父链接的高度，使其更接近div，或者减小div的margin-top。 （如果你增加父亲的身高，你必须减少div的margin-top

#navmenu ul ul {
  margin-top: .5em;
}

在悬停时下降消失

3 个答案: