1

I have a dropdown list on my site and on my main page I'd like to have the dropdown "show" above the nav instead of below. Just for aesthetic purposes really. We're starting to get a lot of content and I'd rather not have the user scroll down to see the dropdown. On the main page the nav is near the bottom so I think this would be an easy solution. Codepen below my code. 

<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

EDIT: Why can't I post a response or see responses. I have at least 1 response but it doesn't load on refresh. Happened on my last visit too.

EDIT #2 - Thanks for the reply. The post was there but now it's not. Someone suggested to move the subnav above the parent link. I did so but it pushes the link down. I need the main nav to stay put. http://codepen.io/anon/pen/KaFwp

EDIT #3 - No, this is not a duplicate.

Compton
  • 109
  • 11

2 Answers2

0

Adding:

bottom:100%;

to

#nav-wrap ul li.orange a:hover {

reveals the menu above the nav item, and should work once appended to the other colors.

Helpful link: https://stackoverflow.com/a/7814284/3908432

Community
  • 1
  • 1
Douglife
  • 30
  • 5
0

Since you want your sub-menus to drop-up instead of drop-down, you must shift the corresponding sub-menus of each item in your navigation bar upwards (relative) by an amount given by:

Upward-shift = height of current sub-menu + height of the item hovered upon (in main navigation bar)

In your case the height of main navigation bar is 100px, so 2nd parameter is always 100px.

You can achieve this by the following jQuery snippet:

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

Also make sure that there is enough "space" to drop these elements up i.e. the main navigation bar should be sufficiently low. In this case there must be 409px (height of longest sub-menu) of space above the main navigation bar.

Here's a DEMO!

Nikunj Madhogaria
  • 2,139
  • 2
  • 23
  • 40