Question

我正在创建一些网站，我总是使用相同的下拉方式。但是我被我的下拉菜单困住了。当我将鼠标悬停在它上面时，它总是取代我的主导航，并且可以说不那么客户友好。

问题可能在于我在css代码中给出的位置值，但我找不到如何根据我的需要制作正确的值。

所以用正确的话来说，我的导航很好，直到你用一个下拉菜单将鼠标悬停在一个上面然后它取代了自己。

我添加了 JSFIDDLE 来向您展示我的意思。主导航栏的第二个链接下有一个下拉菜单。

HTML：

<div id="header">
  <div class="blueborder">
  </div>
  <section class="nav">
    <div class="row">
      <ul class="main-nav" id="drop-nav">
        <li class="home-active"><a href="index.html">Home</a></li>
        <li> / </li>
        <div class="dropdown">
          <li><a href="familiebedrijf.html">Over Ons</a></li>
          <div class="dropdown-content">
            <li><a href="betuigenissen.html">Betuigenissen</a></li>
          </div>
        </div>
        <li> / </li>
        <li><a href="schilderwerken.html">Schilderwerken</a></li>
        <li> / </li>
        <li><a href="behangwerken.html">Behangwerken</a></li>
        <li> / </li>
        <li><a href="raamdecoratie.html">Raamdecoratie</a></li>
        <li> / </li>
        <li><a href="realisaties.html">Realisaties</a></li>
        <li> / </li>
        <li><a href="contact.html">Contacteer ons</a></li>
      </ul>
    </div>
  </section>
</div>

CSS：

.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-content {
    text-align: center;
    display: none;
    position: inherit;
    background-color: #2C2A26;
    margin-top: 40px;
    color: #000;
    list-style: none;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 998;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content li a {
    color: #000;
    border-bottom: 0px solid #ed5d00;
}
.dropdown-content li {
    padding: 10px 10px;
}
.dropdown-content li a:hover {
    color: #fff;
    padding-bottom: 0px;
    border-bottom: 0px solid #ed5d00;
}
/* Main Navi */

.main-nav {
    float: left;
    list-style: none;
    margin-top: 0px;
    padding-top: 0px;
    color: #000;
    font-size: 110%;
    font-weight: 600;
    font-family: 'Source Sans Pro', sans-serif;
}
.main-nav li {
    display: inline-block;
    margin-left: 1px;
    color: #fff;
}
.main-nav li a {
    padding: 8px 0;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    border: 0;
}
.main-nav li a:hover,
.main-nav li a:active {
    color: #8dcee6;
}

Answer 1

更改为position: absolute;上的.dropdown-content并删除上边距，对我有用：

CSS：

.dropdown-content {
    text-align: center;
    display: none;
    position: inherit;
    background-color: #2C2A26;
    color: #000;
    list-style: none;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 998;
}
.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
}

https://jsfiddle.net/r3gra7ta/2/

Answer 2

我认为你的导航有点困惑。最简单的方法之一是在OVER ONS中设置子菜单

      <li name="OVER ONS" ><li SUBITEM1 ></li><li SUBITEM2 ></li></li>

这是一个基本的例子。

＆＃13;

#primary_nav_wrap
{
	margin-top:15px
}

#primary_nav_wrap ul
{
	list-style:none;
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul a
{
	display:block;
	color:#333;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

#primary_nav_wrap ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}

#primary_nav_wrap ul li.current-menu-item
{
	background:#ddd
}

#primary_nav_wrap ul li:hover
{
	background:#f6f6f6
}

#primary_nav_wrap ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#fff;
	padding:0
}

#primary_nav_wrap ul ul li
{
	float:none;
	width:200px
}

#primary_nav_wrap ul ul a
{
	line-height:120%;
	padding:10px 15px
}

#primary_nav_wrap ul ul ul
{
	top:0;
	left:100%
}

#primary_nav_wrap ul li:hover > ul
{
	display:block
}

＆＃13;

<h1>LOGO</h1>
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="#">HOME</a></li>
  <li><a href="#">OVERONS</a>
    <ul>
      <li><a href="#">Betuigenissen</a></li>
      <li><a href="#">Sub Menu 2</a></li>
      <li><a href="#">Sub Menu 3</a></li>
      <li><a href="#">Sub Menu 4</a>
        <ul>
          <li><a href="#">Deep Menu 1</a>
            <ul>
              <li><a href="#">Sub Deep 1</a></li>
              <li><a href="#">Sub Deep 2</a></li>
              <li><a href="#">Sub Deep 3</a></li>
                <li><a href="#">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="#">Deep Menu 2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Schilderwerken</a></li>
  <li><a href="#">Behangwerken</a></li>
  <li><a href="#">Raamdecoratie</a></li>
  <li><a href="#">Realisaties</a></li>
  <li><a href="#">Contacteer ons</a></li>

</ul>
</nav>

＆＃13;

Answer 3

只需将位置更改为＆＃34;已修复＆＃34;并删除下拉内容中的margin-top，然后它将正常工作。

    .dropdown-content {
    text-align: center;
    display: none;
    position: inherit;
    background-color: #2C2A26;
    color: #000;
    list-style: none;
    width: auto;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 998;
}

下拉菜单一直在跳过

3 个答案: