Question

我的网站上有特殊情况。我试图让导航器下拉列表与其下方的元素重叠，但是当它打开时它会将它们向下移动。您可以使用“示例站点”标签查看问题here (http://beta.wreckmodz.com/)。下面是导航栏的HTML。

var ch = (char)Console.Read(); // ch will contain '1'

这是我的CSS：

<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>

这是我的jQuery / JavaScript代码：

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;
}

Answer 1

我已经编辑了你的HTML和CSS，但这应该适合你。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

使用此jquery代码：

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

此css :(按照您的意愿操纵顶部和右侧属性，但要使item.dropdown不将其他元素向下移动，您必须使其绝对定位）

nav {
    position: relative;
}
item.dropdown {
    position: absolute;
    top: 0;
    right: 0;
}

抱歉在这里错误地添加了我的小提琴......转到我的答案。

Answer 3

我希望你的意思是这一点。享受;）

$(document).ready(function(){
    $('#img1').mouseenter(function(){
        $(this).css('z-index','1');
        $('#img2').css('display','block').css('opacity','0.53').css('z-index','2');
    });

});

请参阅以下小提琴：https://jsfiddle.net/dodkmrof/4/

HTML＆amp; jQuery - 需要下拉重叠元素

3 个答案: