如何防止UL承擔下拉菜單的全部高度屬性？

我有一個在外觀和感覺方面幾乎完整的粘性導航欄。但是，無論何時，我在任何鏈接中添加下拉菜單時，都會創建一個不可見字段，該字段將隱藏其中的文本。經過一番挖掘，我發現UL承擔了下拉的全部高度屬性，即使它目前是不可見的。我的目標是儘可能將下拉菜單設置爲自己的實體，以免發生這種情況。最後的結果會使菜單隻有更高的z索引，並且只會掩蓋直接位於其下面的內容，直到您將鼠標從它移開。如何防止UL承擔下拉菜單的全部高度屬性？

雖然我在這，但我也遇到了一個小問題，當鼠標懸停在元素出現的地方時，出現下拉菜單。這是一個不希望的結果，我相信這是問題的根源。

這裏是下拉當前菜單會發生什麼：

這裏是沒有它會發生什麼：

這裏是一個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(); 
    } 
});

謝謝你在前進，

影牙

來源

2017-02-13 Shadowfang

是的！像那樣。至於調整菜單的寬度使其看起來更好，我猜我只是調整父級？ – Shadowfang

我把我的評論變成了解釋我改變的答案。 – zgood

這是因爲您的.Dropdown元素的樣式爲position: relative;和opacity: 0;這意味着它是隱藏的，但仍佔用了DOM中的空間。

要創建這些類型的下拉導航菜單，人們通常使用絕對定位來解決這個問題。當你絕對定位它時，它不再佔用DOM中的空間，但它必須被錨定到一個父元素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; 
}

的演示中看到這個fiddle。

而且你必須在擺弄這個響應風格：

@media (max-width: 1200px) { 
    nav ul li{ 
     display: inline; 
    } 
}

你應該改變，要

@media (max-width: 1200px) { 
    nav ul li{ 
     display: block; 
    } 
}

但是你說你我沒有爲小屏幕優化作爲尚未所以我認爲這種風格只是爲了演示。

來源

2017-02-13 20:33:17 zgood

謝謝！這很好地解釋了一切。另外感謝您修復媒體屏幕部分:)我如何調整父寬度，使其餘部分正確地放置到位？我試過把寬度屬性扔到那個鏈接的HTML部分，但沒有運氣。 – Shadowfang

忽略我的最後一個問題，我決定讓父對象的寬度保持不變，並調整下拉菜單的大小以使其看起來更好。 – Shadowfang

因爲如果使用不透明度：0;或可見性：隱藏;儘管隱藏元素，你總是保留空間。另一方面，您可以添加位置：絕對;如果你需要不透明度：0;

來源

2017-02-13 20:18:02

如何防止UL承擔下拉菜單的全部高度屬性？

回答

相關問題