如何避免導航下拉菜單和頁面其餘部分之間的大填充？

所以我需要做的事情可能很簡單，但經過長時間的研究後我不知道。如何避免導航下拉菜單和頁面其餘部分之間的大填充？

我想讓我的頁面在我的下拉菜單上懸停時向下移動。（如果這是不可能的），我想避免在我的HEADER和我的頁面的其餘部分之間填充很大，SECTION> TITLE ...

如果不使用任何jQuery或JavaScript，是否有機會這樣做？

非常感謝您的時間和耐心。

HTML代碼：

<html lang="en"> 
    <head> 
     <meta charset="utf-8"></meta> 
     <title>Emblem Collectible Books</title> 
     <link rel="stylesheet" href="css/style.css" media="all"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"></meta> 
     <script src="shifter.js"></script> 
    </head> 
    <body> 
     <div id="page"> 
      <header id="pageheader" role="banner"> 
       <div id="commonlink"> 
        <nav id="commonlinkbar"> 
         <ul> 
          <li><a href="contactus.html">Contact us</a></li> 
          <li><a href="#">Accessibility</a></li> 
          <li><a href="#">Login</a></li> 
         </ul> 
        </nav> 
       </div> 
       <div id="logo"> 
        <div class="innerlogo"> 
         <img src="images/logo.png" alt="logo"> 
        </div> 
       </div> 
       <div id="mainnav"> 
        <div id="navwrapper"> 
         <nav id="primary" role="navigation"> 
          <ul> 
           <li class="navbar"><a href="index.html">Home</a></li><li class="dropdown"> 
           <a href="books.html" class="drop">Books</a> 
            <ul> 
             <li><a href="#">20th Century Books</a></li> 
             <li><a href="19thcentury.html">19th Century Books</a></li> 
             <li><a href="#">18th Century Books</a></li> 
             <li><a href="#">Rare Books</a></li> 
            </ul></li><li> 
           <a href="delivery.html">Delivery</a></li><li> 
           <a href="#">About</a></li><li> 
           <a href="#">Books as an Investment</a></li> 
          </ul> 
         </nav> 
        </div> 
       </div> 
      </header> 
      <main id="mainc" role="main"> 
       <section id="introduction" role="introduction"> 
        <div id="title"> 
         <h1>Welcome to <span class="titleintro">Emblem</span>, Rare collectible Books</h1> 
        </div>**

這裏是CSS

/* Embed the fonts before anything else */ 

@font-face { 
    font-family: 'parisr'; 
    src:url("../fonts/parisr.eot?#iefix") format("embedded-opentype"), 
     url("../fonts/parisr.woff") format("woff"), 
     url("../fonts/parisr.ttf") format("truetype"), 
     url("../fonts/parisr.svg#parisr") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

/* Page Styling */ 

#page { 
    width: 100%; 
    margin: 0 auto; 
} 

#pageheader { 
    overflow: hidden; 
    padding-top: 1%; 
    width: 100%; 
    height: 455px; 
} 




/* Common links styling */ 

#commonlink{ 
    float: right; 
    padding-left: 4%; 
    width: 30%; 
} 

/* Commmon link bar */ 

#commonlinkbar{ 
    margin: 0 auto; 
    padding: 0; 
    max-width: 100%; 
    font-family: Verdana, Geneva, sans-serif; 
} 

#commonlinkbar li a{ 
    font-size: 1em; 
    color: #236841; 
    font-family: Verdana, Geneva, sans-serif; 
    padding-bottom: 5%; 
} 

#commonlinkbar ul li{ 
    display: inline-block; 
    background-color: #ffffff; 
    padding: 2%; 
    position: relative; 
} 

#commonlink ul li :hover:before{ 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #236841; 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
    transform: scaleX(1); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 

#commonlink ul li a:before{ 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 2px; 
    bottom: 0; 
    left: 0; 
    background-color: #236841; 
    visibility: hidden; 
    -webkit-transform: scaleX(0); 
    transform: scaleX(0); 
    -webkit-transition: all 0.3s ease-in-out 0s; 
    transition: all 0.3s ease-in-out 0s; 
} 


#commonlink ul li a:hover{ 
    color: #309c64; 
} 



/* Logo */ 

#logo{ 
    max-width: 100%; 
    margin-bottom: 2%; 
} 

.innerlogo{ 
    width: 55%; 
    padding: 0% 20%; 
} 

.innerlogo img{ 
    max-width: 100%; 
} 



/* Main navigation bar styling */ 

#mainnav{ 
    width: 100%; 
} 

#navwrapper{        /* Navigation bar position */ 
    width: 66%;      
    height: auto; 
    margin: 0 auto; 
    text-align: left; 
    float: right; 
    padding: 0% 14%; 
} 

#mainnav ul{ 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
    position: relative; 
} 

#mainnav ul li{       /* Navigation bar border design */ 
    display: inline-block; 
    background-color: #236841; 
    border-left-color: #3cc37d; 
    border-left-width: 5px; 
    border-left-style: inset; 
    border-right-color: #ffffff; 
    border-right-width: 5px; 
    border-right-style: solid; 
    border-radius: 0 10px 0px 0; 
} 

#mainnav li a{ 
    font-size: 1.5em; 
    font-family: 'parisr', Verdana, Geneva, sans-serif; 
} 

#mainnav ul li:hover{ 
    background-color: #ffffff; 
    animation: bounce 1s; 
} 

#mainnav ul li a,visited{ 
    color: #000; 
    display: block; 
    padding: 10px; 
    text-decoration: none; 
} 



#mainnav ul li a:hover{      /* Navigation bar bounce effect */ 
    color: #236841; 
    text-decoration: none; 
    border-right-color: #236841; 
    border-right-width: 5px; 
    border-right-style: solid; 
    border-radius: 0 20px 20px 0; 
    animation: bounce 1s; 
    -webkit-animation-name: bounceOutUp; 
    animation-name: bounceOutUp; 
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    } 

    @-webkit-keyframes bounceOutUp { 
    20% { 
    -webkit-transform: translate3d(0, -10px, 0); 
    transform: translate3d(0, -10px, 0); 
    } 

    40%, 45% { 
    opacity: 1; 
    -webkit-transform: translate3d(0, 20px, 0); 
    transform: translate3d(0, 20px, 0); 
    } 

    100% { 
    opacity: 0; 
    -webkit-transform: translate3d(0, -2000px, 0); 
    transform: translate3d(0, -2000px, 0); 
    } 
    } 

    @keyframes bounceOutUp { 
    20% { 
    -webkit-transform: translate3d(0, -10px, 0); 
    transform: translate3d(0, -10px, 0); 
    } 

    40%, 45% { 
    opacity: 1; 
    -webkit-transform: translate3d(0, 20px, 0); 
    transform: translate3d(0, 20px, 0); 
    } 

    100% { 
    opacity: 0; 
    -webkit-transform: translate3d(0, -2000px, 0); 
    transform: translate3d(0, -2000px, 0); 
    } 
} 


#mainnav ul li:hover ul{     /* Navigation bar dropdown menu design */ 
    display: inline-block; 
    color: #236841; 
} 

#mainnav ul ul{ 
    color: #fff; 
    display: none; 
    position: absolute; 
    background-color: #fff; 
} 

#mainnav ul ul li{ 
    display: block; 
    margin: 2px 0px 2px 0px; 
} 

#mainnav ul ul li a,visited{ 
    color: #fff; 
} 

#mainnav ul ul li:hover{    /* Navigation bar dropdown menu bounce effect */ 
    color: #236841; 
    -webkit-animation-name: bounceOutRight; 
    animation-name: bounceOutRight; 
    -webkit-animation-duration: 1.5s; 
    animation-duration: 1.5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    } 

    @-webkit-keyframes bounceOutRight { 
    20% { 
    opacity: 1; 
    -webkit-transform: translate3d(-20px, 0, 0); 
    transform: translate3d(-20px, 0, 0); 
    } 

    100% { 
    opacity: 0; 
    -webkit-transform: translate3d(2000px, 0, 0); 
    transform: translate3d(2000px, 0, 0); 
    } 
    } 

    @keyframes bounceOutRight { 
    20% { 
    opacity: 1; 
    -webkit-transform: translate3d(-20px, 0, 0); 
    transform: translate3d(-20px, 0, 0); 
    } 

    100% { 
    opacity: 0; 
    -webkit-transform: translate3d(2000px, 0, 0); 
    transform: translate3d(2000px, 0, 0); 
    } 
} 



/* breadcrumbs */ 

#breadcrumbs{ 
    width: auto; 
    padding: 1%; 
} 

#breadcrumbs a{ 
    color: #000; 
    font-style: italic; 
} 

/* Main content style */ 

#mainc{ 
    overflow: hidden; 
    width: 100%; 
    padding-bottom: 50px; 
} 



/* Section Introduction style */ 

#introduction{ 
    width: 90%; 
    max-width: 100%; 
    padding: 0% 5% 0% 5%; 
} 



/* Title page style */ 

#title{ 
    max-width: 100%; 
    padding: 0% 10%; 
}

來源

2016-07-28 Dr Zoidberg

請嘗試將您的代碼分解爲最小值。這裏有很多事情要做，這使得它更難以理解你在哪裏和在與什麼苦苦掙扎。 – MMachinegun

謝謝，我減少了CSS。 –

嘗試。

讓一個div需要添加到CSS

myDiv { 
    display: none; 
} 

a:hover + myDiv { 
    display: block; 
}

來源

2016-07-28 17:52:27 brad

刪除或調整頁眉div的高度聲明大小....根據您的作品

#pageheader { 
    overflow: hidden; 
    padding-top: 1%; 
    width: 100%; 
    height: 455px; /* <-- either remove this line or change it to something correct */ 
}

提供，似乎高度是標題的大部分。如果你希望它更小，你需要更改或刪除該聲明。

刪除它將允許標題div無論自動高度是需要顯示div內的內容是而不是設置爲浮動。

來源

2016-07-29 02:17:53 Scott

嗨斯科特，當我刪除高度是的，當然它嵌套一切，但這並不允許我徘徊它時，我的下拉菜單的內容 –

宣佈的高度，（當然這不好）讓我看到下拉動作，這是我試圖避免添加到代碼 –

你需要重做下拉CSS然後你不應該需要下拉的高度工作 – Scott

如何避免導航下拉菜單和頁面其餘部分之間的大填充？

回答

相關問題