javascript - HTML & jQuery - 需要下拉菜单来重叠元素

Question

我的网站有特殊情况。我试图让导航器下拉菜单与其下方的元素重叠，而是在打开时将它们向下移动。可以看到issue here (http://beta.wreckmodz.com/)使用“示例站点”选项卡。下面是我的导航栏 HTML。

<nav>
    <a href="/index"><item>Home</item></a>
    <a href="/request"><item>Request Service</item></a>
    <a href="/contact"><item>Contact Us</item></a>
    <a href="/about"><item>About Us</item></a>
        <item class="dropdown">Sample Sites
        <li>
            <a href="/tipcalc/index">
                <item>TipCalc</item>
            </a>
        </li>
        <li>
            <a href="/example-1/index">
                <item>Sample #1</item>
            </a>
        </li>
        <li>
            <a href="http://ucpcs.wreckmodz.com/">
                <item>Sample #2</item>
            </a>
        </li>
    </item>
    <a href="/shop"><item>Shop</item></a>
</nav>

这是我的 CSS:

nav {
    display: block;
    background: rgba(255,255,255,0.9);
    box-shadow: 1px 1px 5px #000000;
    height: 38px;
    margin-bottom: 1%;
    overflow: visible;
}
item {
    display: block;
    border-right: 1px dotted #000000;
    float: left;
    width: auto;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    color: #0099ff;
    line-height: 200%;
}
item:hover {
    background: #000000;
    color: #ffffff;
}
li {
    display: none;
    list-style: none;
}
a:link, a:visited {
    color: #0099ff;
    text-decoration: none;
}
a:hover {
    color: #ffffff;
}

这是我的 jQuery/JavaScript 代码:

 $(document).ready(function(){
    $('item.dropdown').mouseenter(function(){
    $('li').fadeIn(100);
    });

    $('item.dropdown').mouseleave(function(){
    $('li').fadeOut(100);
 });

Answer 1

我稍微编辑了您的 HTML 和 CSS，但这应该适合您。

$(document).ready(function() {
  $('li.dropdown').mouseenter(function() {
    $('.sub').fadeIn(100);
  });

  $('li.dropdown').mouseleave(function() {
    $('.sub').fadeOut(100);
  });
});

nav {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 5px #000000;
  height: 38px;
  margin-bottom: 1%;
  overflow: visible;
}
.sitenav,
.sub {
  list-style: none;
  padding-left: 0;
}
.sitenav > li {
  float: left;
}
.sitenav > li a,
.dropdown {
  display: block;
  border-right: 1px dotted #000000;
  float: left;
  width: auto;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  color: #0099ff;
  line-height: 200%;
  position: relative;
}
li a:hover {
  background: #000000;
  color: #ffffff;
}
.sub {
  display: none;
  list-style: none;
  left: 0;
  width: 100%;
  position: absolute;
}
.sub li a {
  float: none;
}
a:link,
a:visited {
  color: #0099ff;
  text-decoration: none;
}
a:hover {
  color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul class="sitenav">
    <li> 
      <a href="/index">Home</a>
    </li>
    <li> 
      <a href="/request">Request Service</a>
    </li>
    <li> 
      <a href="/contact">Contact Us</a>
    </li>
    <li> 
      <a href="/about">About Us</a>
    </li>
    <li class="dropdown">Sample Sites
      <ul class="sub">
        <li>
          <a href="/tipcalc/index">TipCalc</a>
        </li>
        <li>
          <a href="/example-1/index">Sample #1</a>
        </li>
        <li>
          <a href="http://ucpcs.wreckmodz.com/">Sample #2</a>
        </li>
      </ul>
    </li>
    <li> 
      <a href="/shop">Shop</a>
    </li>
  </ul>
</nav>