如何防止UL承担下拉菜单的全高属性？
[英]How do I prevent a UL from taking on the full height properties of a drop down menu?
问题描述
我有一个粘性导航栏，在外观上几乎是完整的。 但是，每当我在任何链接中添加下拉菜单时，它都会创建一个不可见的字段，该字段将隐藏进入其中的文本。 经过一番挖掘后，我发现UL具有下拉菜单的全部高度属性，即使当前不可见。 我的目标是在可能的情况下使下拉菜单成为自己的实体，以免发生这种情况。 最终结果将使菜单具有更高的z索引，并且只覆盖菜单正下方的内容，直到您将鼠标从菜单移开为止。
在进行此操作时，将鼠标悬停在元素将出现的空间上时，下拉菜单也会出现一个小问题。 这是不希望的结果，我相信是问题的根源。
使用下拉菜单会发生以下情况：
没有它，就会发生以下情况：
这里是一个的jsfiddle 。 如果您对徽标显示有疑问，请访问网站。 另外请记住，我目前尚未针对较小的屏幕进行优化，因此请扩展宽度，直到导航栏为水平。
网站链接： http : //www.wolvesofthedust.com/
我当前的代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Den</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link rel="stylesheet" media="screen, projection" href="style.css">
<link rel="shortcut icon" href="Images/favicon.ico" />
<script type ="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type ="text/javascript" src="script.js"></script>
</head>
<body>
<div class="status"></div>
<div class="logo">
<center><a href="http://www.wolvesofthedust.com/"><img src="Images/WolvesoftheDustSiteHeader.png" height="auto" width="100%" border="0" alt=" photo WolvesoftheDustSiteHeader.png"/></a></center>
</div>
<br/>
<br/>
<div class ="navigation">
<nav>
<ul class="clearfix">
<li><a href="#">|||</a>
<ul class="Dropdown">
<a href="#">Shadows and Chaos</a>
<a href="#">Fate of Feravis</a>
<a href="#">Magnetix</a>
<a href="#">Tools</a>
</ul>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
<li><a href="#">Link 8</a></li>
<li><a href="#">Link 9</a></li>
</ul>
</nav>
</div>
<div class ="Logo2">
<img src="Images/WolvesoftheDustSmallLogo.png" alt="WolvesoftheDustSmallLogo" width="100%" height="70px"</a>
</div>
<div class="EmptySpace">
</div>
<div class ="content">
<center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
<br/>
<br/>
<p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations based on them -->The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
<p>The lazy dog jumped over the quick brown fox. Yes I just did that. Deal with it. This is my website after all.</p>
</div>
CSS：
html {
padding: 0;
margin: 0;
background-color: #000;
}
body {
font-family: Helvetica, sans-serif;
font-size: 93%;
line-height: 1.5em;
padding: 40px 0;
margin: 0;
color: #7d0000;
}
a,
a:link,
a:visited {
color: blue;
}
h1, h2, h3, h4, h5, h6 {margin-top: 0;}
p {margin: 0 0 1em 0;}
.logo {
max-width: 940px;
margin: 0 auto;
padding: 0 20px;
border: 2px solid #7d0000;
}
.navigation {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.logo2 {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
.content {
max-width: 100%;
margin: 0 auto;
padding: 0 20px;
}
h1 {
background-color: #305782;
color: #FFF;
padding: 60px 25px;
margin: 0;
}
nav {
z-index: 500;
background-color: #000;
}
.nav-placeholder {
margin: 0 0 40px 0;
}
.fixed {
position: fixed;
top: 65px;
left: 0;
width: 100%;
background-color: #000;
}
.fixed .nav-inner {
padding: 0 20px;
}
.fixed .nav-inner-most {
max-width: 100%;
margin: 0 auto;
background-color: #000;
}
nav ul {
display: table;
text-align:center;
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline-block;
margin: 15px;
text-align: center;
}
nav ul li a:link,
nav ul li a:visited {
display: block;
text-decoration: none;
padding: 10px 25px;
background-color: #000;
color: #7d0000;
font-size: 90%;
font-weight: bold;
border: 2px solid #7d0000;
}
nav ul li a:hover {
background-color: #28bfa1;
color: #FFF
}
nav ul li:hover .Dropdown {
z-index:1;
opacity:1;
}
.Dropdown {
position: relative;
opacity: 0;
z-index: -1;
}
/*.Dropdown li {
display: block;
}*/
.Dropdown li a {
display: block;
padding: 10px 30px;
}
.Dropdown li a:hover, .Dropdown .current-item a {
background: #3e3436;
}
.Logo2 {
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 300;
}
.EmptySpace {
height: 250px;
}
@media (max-width: 1200px) {
nav ul li{
display: inline;
}
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
JS：
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="nav-placeholder"></div>');
jQuery("nav").wrapInner('<div class="nav-inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 600) {
$('.Logo2').fadeIn();
} else {
$('.Logo2').fadeOut();
}
});
先感谢您，
影牙
2 个解决方案
解决方案1
2 已采纳 2017-02-13 20:33:17
这是因为您的.Dropdown元素具有以下position: relative;样式position: relative; 和opacity: 0; 这意味着它是隐藏的，但仍在DOM中占据空间。
为了创建这类下拉式导航菜单，人们通常使用绝对定位来解决此问题。 当您放置绝对位置时，它不再在DOM中占据空间，而是必须将其锚定到position: relative;的父元素position: relative; 。 在这种情况下，将是nav > ul > li 。
因此，要解决此问题，您将需要更新以下样式：
nav ul li {
position: relative; /* add this for an anchor point*/
display: inline-block;
margin: 15px;
text-align: center;
}
.Dropdown {
position: absolute; /* add this to position the dropdown off the li parent */
top: 100%; /* put it at the very bottom of the li*/
left: 0;
opacity: 0;
z-index: -1;
}
看到这个小提琴演示。
同样，您在小提琴中具有以下响应式样式：
@media (max-width: 1200px) {
nav ul li{
display: inline;
}
}
您应该将其更改为
@media (max-width: 1200px) {
nav ul li{
display: block;
}
}
但是您说您到目前为止还没有针对较小的屏幕进行优化，因此我认为这种风格仅用于演示。
解决方案2
0 2017-02-13 20:18:02
因为如果使用不透明度：0; 或可见性：隐藏； 您总是保留隐藏元素的空间。 http://joxi.ru/YmEagVJs0GkBpm另一方面，您可以添加位置：绝对； 如果您需要不透明度：0;
如何在Bootstrap的下拉菜单中编辑CSS？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.