HTML＆jQuery - 需要重叠重叠元素

我在我的网站上有一个特定的情况。我试图让导航器下拉框重叠它下面的元素，但是它会在打开时将它们向下移动。使用“样本网站”选项卡可以看到问题here (http://beta.wreckmodz.com/)。以下是我的导航栏HTML。HTML＆jQuery - 需要重叠重叠元素

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

来源

2015-10-14 Thomas Yamakaitis

，你可以做一个小提琴？甚至无法检查您链接的网站上的元素... –

http://jsfiddle.net/hejda8yg/2/ @JeroenBellemans –

我编辑了你的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>

来源

2015-10-14 14:20:28 Aaron

这是有效的，但我的问题是有没有办法让下拉元素与初始元素相同（即与示例网站的大小相同）@Aaron –

我更新了我的代码 – Aaron

使用此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; 
}

对不起加入我的小提琴错在这里...移动到我的答案。

来源

2015-10-14 14:13:30

虽然这会将标签放在另一侧。 –

你可以操纵你的西装的css，但诀窍将工作的绝对定位，并修复了jQuery。 –

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

$(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/

来源

2015-10-14 14:59:46 Deadpool

我希望你的意思是这样。如果你的意思是别的，请告诉我。 – Deadpool

HTML＆jQuery - 需要重叠重叠元素

回答

相关问题