如何避免导航下拉菜单和页面其余部分之间的大填充？答案

【问题标题】：How to avoid large padding between nav dropdown menu and rest of the page?如何避免导航下拉菜单和页面其余部分之间的大填充？
【发布时间】：2016-07-28 17:48:56
【问题描述】：

所以我需要做的可能很简单，但经过长时间的研究，我还是不知道。

当我将鼠标悬停在下拉菜单上时，我想让我的页面向下移动。（如果这是不可能的）我想避免在我的 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%;
}

【问题讨论】：

请尽量将您的代码分解到最低限度。这里发生了很多事情，这让你更难理解你在哪里以及在与什么斗争。
谢谢，我已经减少了css。

标签： html css responsive-design navbar dropdown

【解决方案1】：

试试这个。

制作一个你需要大小的 div 添加到css

myDiv {
    display: none;
}

a:hover + myDiv {
    display: block;
}

【讨论】：

【解决方案2】：

移除或调整header div声明的高度......

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

根据您提供的部分，高度似乎是页眉的大部分。如果您希望它更小，则需要更改或删除该声明。

删除它将允许标题 div 成为显示 div 内不设置为浮动的内容所需的任何自动高度。

【讨论】：

嗨，斯科特，当我删除高度时，是的，它当然会把所有东西都嵌套起来，但这不允许我在悬停时设置下拉菜单的内容。
声明高度，（这里当然不好）让我看到下拉动作。这是我试图避免添加到代码中的内容。
你需要重新设计下拉 CSS。你不应该需要下拉菜单的高度。
嗨 Scott，好的，我已经删除了 PAGEHEADER 的“高度”，然后将 MAINNAV 设置为绝对，然后将 pdding-top 设置为我页面的其余部分。它对所有内容进行排序，但我现在想这样做，如果我在不使用 JavaScript 的情况下将鼠标悬停在导航栏上时，是否可以使页面的其余部分向下移动？