html - 让我的下拉列表下降 "up"

Question

我的站点和主页上有一个下拉列表，我希望下拉菜单“显示”在导航上方而不是下方。真的只是为了审美目的。我们开始获得大量内容，我不想让用户向下滚动以查看下拉列表。在主页上，导航位于底部附近，所以我认为这是一个简单的解决方案。 Codepen 在我的代码下面。

<div id="nav-wrap">

<ul>
    <li id="link-one" class="orange">
    <a href="printing.html" class="parent-one-link" title="Printing"><span>Printing</span></a>

     <div class="subnav">
          <ul>
            <li><a href="_printing/digital-printing.html" title="Digital Printing">Digital Printing</a></li>
            <li><a href="_printing/offset-printing.html" title="Offset Printing">Offset Printing</a></li>
            <li><a href="_printing/business-cards&amp;stationery.html" title="Business Cards &amp; Stationery">Business Cards &amp; Stationery</a></li>
            <li><a href="_printing/manuals-reports&amp;catalogues.html" title="Manuals, Reports &amp; Catalogues">Manuals, Reports &amp; Catalogues</a></li>
            <li><a href="_printing/bindery-services.html" title="Bindery Services">Bindery Services</a></li>
            <li><a href="_printing/canada-post.html" title="Canada Post">Canada Post</a></li>
            <li><a href="_printing/graphic-design-typesetting.html" title="Graphic Design &amp; Typesetting">Graphic Design &amp; Typesetting</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>

    <li class="red"><a href="promotional-products.html" title="Promotional Products"><span class="doubleLine">Promotional Products</span></a>

    <div class="subnav">
          <ul>
            <li><a href="_promotional-products/awards-mounting.html" title="Awards &amp; Mounting">Awards &amp; Mounting</a></li>
            <li><a href="_promotional-products/binders.html" title="Binders">Binders</a></li>
            <li><a href="_promotional-products/clothing-apparel.html" title="Clothing &amp; Apparel">Clothing &amp; Apparel</a></li>
            <li><a href="_promotional-products/bags.html" title="Bags">Bags</a></li>
            <li><a href="_promotional-products/drinkware.html" title="Drinkware">Drinkware</a></li>
            <li><a href="_promotional-products/keyrings.html" title="Keyrings">Keyrings</a></li>
            <li><a href="_promotional-products/lanyards.html" title="Lanyards">Lanyards</a></li>
            <li><a href="_promotional-products/magnets.html" title="Magnets">Magnets</a></li>
            <li><a href="_promotional-products/pens-writing-instruments.html" title="Pens &amp; Writing Instruments">Pens &amp; Writing Instruments</a></li>
            <li><a href="_promotional-products/presentation-folders.html" title="Presentation Folders">Presentation Folders</a></li>
            <li><a href="_promotional-products/usb.html" title="USB Flash Drives">USB Flash Drives</a></li>
            <li><a href="_promotional-products/umbrellas.html" title="Umbrellas">Umbrellas</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>

    <li class="pink"><a href="banners-signage.html" title="Banners &amp; Signage"><span class="doubleLine">Banners &amp; Signage</span></a>

    <div class="subnav">
          <ul>
            <li><a href="_banners-signage/large-format.html" title="Large Format">Large Format</a></li>
            <li><a href="_banners-signage/drafting-cad-services.html" title="Drafting &amp; CAD services">Drafting &amp; CAD services</a></li>
            <li><a href="_banners-signage/coroplast&amp;foamcore.html" title="Coroplast &amp; FoamCore">Coroplast &amp; FoamCore</a></li>
            <li><a href="_banners-signage/retractable-banners.html" title="Retractable Banners">Retractable Banners</a></li>
            <li><a href="_banners-signage/posters&amp;banners.html" title="Posters &amp; Banners">Posters &amp; Banners</a></li>
            <li><a href="_banners-signage/wraps&amp;pvc.html" title="Wraps &amp; PVC">Wraps &amp; PVC</a></li>
            <li><a href="_banners-signage/displays&amp;canvas.html" title="Displays &amp; Canvas">Displays &amp; Canvas</a></li>
            <li><a href="_banners-signage/mounting.html" title="Mounting">Mounting</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>
    <li class="purple"><a href="facility-management.html" title="Facility Management"><span class="doubleLine">Facility Management</span></a>

    <div class="subnav">
          <ul>
            <li><a href="_facilities-management/pool.html" title="POOL">POOL</a></li>
            <li><a href="_printing/canada-post.html" title="Canada Post">Canada Post</a></li>
            <li><a href="https://secure.mtprint.com/pool/CustSignIn.aspx" title="Client Login">Client Login</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>

    <li class="blue"><a href="http://www.volumesdirect.com/" title="Volumes"><span>Volumes</span></a></li>

    <li class="green"><a href="contact.html" title="Contact"><span>Contact</span></a>

    <div class="subnav">
          <ul>
            <li><a href="locations.html" title="Locations">Locations</a></li>
            <li><a href="https://digitalink2.mtprint.com/exchweb/bin/auth/owalogon.asp?url=https://digitalink2.mtprint.com/exchange&reason=0&replaceCurrent=1" title="Digital Link">Digital Link</a></li>
            <li><a href="ftp://ftp.mtprint.com/" title="FTP site">FTP site</a></li>
            <li><a href="https://secure.mtprint.com/pool/CustSignIn.aspx" title="Client Login">Client Login</a></li>
            <li><a href="#" title="Estimate Request">Estimate Request</a></li>
            <li><a href="submit/submit_file.aspx" title="Submit A File">Submit A File</a></li>
            <li><a href="#" title="Recognition">Recognition</a></li>
            <li><a href="#" title="Graphics Factory">Graphics Factory</a></li>
          </ul>
        </div><!-- /.subnav -->

    </li>

    <li class="yellow-facebook"><a href="https://www.facebook.com/mtprint/" title="Facebook"><span></span></a></li>

</ul>

</div> <!-- nav-wrap --> 

#nav-wrap {
  width:100%;
    height:100px;
    font-weight:500;
    padding: 0;
    left:0;
    font-family: 'Raleway', Arial, sans-serif;
    z-index:100;
    float:left;
}   

#nav-wrap ul {
    list-style-type: none;
    margin: 0;
    padding:0;
    text-transform: uppercase;
}

#nav-wrap ul li {
    width:100%; /*  ~(100/7)  */
    text-align:center;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
  width:14.275%; /*  ~(100/7)  */
    display:block;
    float:left;
}

#nav-wrap ul li span {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    font-size:1.45em;
    text-align: center;
    padding: 0 5% 0 5%; /* was 0 20px */ 
    line-height: 100px;
}

#nav-wrap ul li a {
    width:100%;
    display: block;
    height: 100%;
    position: relative;
    color:#FFFFFF !important;
    text-decoration:none;
    z-index:100;
}

.doubleLine {
  display: table-cell;
  line-height: 1em;
  width:65.275%;
}

#nav-wrap ul li.orange a {
    background-color:#f37028;
}
#nav-wrap ul li.orange a:hover {
    /*color: #231f20 !important;*/
    background-color:#f38143 !important;
}
#nav-wrap ul li.red a {
    background-color:#ed1b24;
}
#nav-wrap ul li.red a:hover {
    /*color: #231f20 !important;*/
    background-color:#f03139 !important;
}
#nav-wrap ul li.pink a {
    background-color:#e54198;
}
#nav-wrap ul li.pink a:hover {
    /*color: #231f20 !important;*/
    background-color:#eb5ca8 !important;
}
#nav-wrap ul li.purple a {
    background-color:#6b439c;
}
#nav-wrap ul li.purple a:hover {
    /*color: #231f20 !important;*/
    background-color:#7c56ac !important;
}
#nav-wrap ul li.blue a {
    background-color:#0193cf;
}
#nav-wrap ul li.blue a:hover {
    /*color: #231f20 !important;*/
    background-color:#22a7de !important;
}
#nav-wrap ul li.green a {
    background-color:#80c02c;
}
#nav-wrap ul li.green a:hover {
    /*color: #231f20 !important;*/
    background-color:#8cc93b !important;
}
#nav-wrap ul li.yellow-facebook a {
    background-color:#fff300;
    background-image:url(../images/social-media/facebook-text.png);
    background-repeat:no-repeat;
    background-position:center;
}
#nav-wrap ul li.yellow-facebook a:hover {
    color: #231f20;
    background-image:url(../images/social-media/facebook-text_over.png);
}

.subnav ul li a:link, a:active, a:visited {
  text-decoration:none;
}
.subnav ul li a:hover { 
  color:#000;
  text-decoration:none;
}

.subnav ul li { 
    margin: 0 0 0 0;
    width:100% !important;
    height:auto;
    float:none !important;
}

li .subnav {
  display: none;
  /*position: absolute;  */
  clear: both;
  margin-left: 0;
  font-size:0.9em;
}

.subnav ul li a {
    padding: 5px 0 5px 0;}

.subnav {
    width:100%;
    padding: 0;
    margin: 0;
    border-top: #FFF 1px solid;
}


li:hover > .subnav {
  display:inline-block;
  left:0;
}

#nav-wrap ul li + li {
  border-left: 1px #fff solid !important;
}

#nav-wrap .subnav ul li + li {
  border-left: none !important;
}   

http://codepen.io/anon/pen/KaFwp

编辑:为什么我不能发布回复或查看回复。我至少有 1 个响应，但它不会在刷新时加载。我上次访问时也发生了。

编辑 #2 - 感谢您的回复。那个帖子在那里，但现在不在了。有人建议将子导航移到父链接上方。我这样做了，但它会将链接向下推。我需要主导航保持不变。 http://codepen.io/anon/pen/KaFwp

编辑 #3 - 不，这不是重复的。

Answer 1

由于您希望子菜单下拉而不是下拉，您必须将导航栏中每个元素的相应子菜单向上(相对)移动给定的量通过:

Upward-shift = 当前子菜单的高度 + 悬停的元素的高度(在主导航栏中)

在您的情况下，主导航栏的高度为 100px，因此第二个参数始终为 100px。

您可以通过以下 jQuery 片段实现此目的:

$(".subnav").prev().mouseover(function(){
    var sub_menu_shift = parseInt($(this).next().css("height")) + 100;
    $(this).next().css({'position':'relative','bottom':sub_menu_shift});
});

还要确保有足够的“空间” 来放置这些元素，即主导航栏应该足够低。在这种情况下，主导航栏上方必须有 409px(最长子菜单的高度)空间。

这是一个 DEMO !