Navbar with secondary nav in horizontal line beneath

Question

I am trying to create a rollover nav menu that has the secondary nav displayed as a horizontal line beneath the main nav when hovered over a primary nav option.

Here is a preview of how I'd like the links to look when hovered over a primary nav option. preview image

Below is my code and below further is working demo link.

    Stuff that goes above nav.
More stuff.

    
    

    
    Primary 1
    
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    
    
    Primary 2
    
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    
    
    Primary 3
    
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    
    
    Primary 4
    
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    
    
    Primary 5
    
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    
    
    Primary 6
    
    Link 1
    Link 2
    Link 3
    Link 4
    Link 5
    Link 6
    
    

    

    
    
    



      Stuff that below above nav.
More stuff.

    #wrapper {

        width:100%; 
        background: #ff6633;
      margin 0 auto;
    }



      #nav{

            margin 0 auto;
            width:100%;


    }


    #nav ul  {
        list-style-type: none;

        padding: 0;
    }

     .nav { text-align:center;}


    #pri1 a {
       background: #ff6633;
        color: white;
        width: 95px;

    }

    #pri2 a {
       background: #ff6633;
       color: white;
         width: 137px;
    }

    #pri3 a {
       background: #ff6633;
        color: white;
        width: 138px;
    }

    #pri4 a {
       background: #ff6633;
        color: white;
        width: 142px;
    }


    #pri5 a {
       background: #ff6633;
        color: white;
        width: 126px;
    }

    #pri6 a {
       background: #ff6633;
        color: white;
        width: 77px;
    }





    .nav > li > a {
        display:  block;
        height: 100%;
        padding: 0px;
        color: #000000;
        text-decoration: none;

        line-height: 32px;
        outline: none;
          border-right: 1px solid #D6D3D3
    }

    .nav > li:hover > a {
        color:#333;


    }


    .nav > li {
        padding: 0;
        height: 30px;
        font-family:   Arial, Helvetica, sans-serif;
        letter-spacing: -0.5px;
        font-size: 14px;

    }

    .nav li {

      display:inline-block;
    }


    .nav li > ul {
        position: absolute;
        display: none;
        border-bottom: 0;
        width: 1024px;
        z-index: 9999;

    }


    #about {


    }



    .nav li > ul > li > a {
        text-decoration: none;
        color: #0f2992;
        display: inline-block;


    }


    .nav li:hover > ul {
        display: inline-block;

    }

http://codepen.io/trevoray/pen/dPabKW

Sai · Accepted Answer

Basically you have to play with CSS position:absolute and width:100% property at your submenu level to achieve what you want to achieve.

I have cleaned up your code just a little bit taking out all the things that are not needed for your particular problem and adding a couple classes for readability.

The fiddle for the solution ( rough draft) can be found here. Now style the way you want to adapt to the page accordingly.

The Code snippet follows...

 #nav-wrapper {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   min-height: 1.1em;
   background: #ff6633;
   display: table;
 }
 #navmenu {
   width: 100%;
   margin: 0;
   padding: 0;
   display: table-cell;
   vertical-align: middle;
 }
 .nav {
   margin: 0;
   padding: 0;
   /*height:20px;*/
 }
 .nav > li {
   list-style: none;
   display: block;
   float: left;
   margin: 0;
   padding: 0;
   width: 20%;
   box-sizing: border-box;
   text-align: center;
 }
 .submenu {
   height: 20px;
   display: none;
   margin: 0;
   padding: 0;
   width: 100%;
   position: absolute;
   left: 0;
   text-align: center;
 }
 .submenu > li {
   list-style: none;
   display: inline-block;
   margin: 0 10px;
   padding: 1px 20px;
   box-sizing: border-box;
   background: #ff6633;
 }
 .nav > li:hover .submenu {
   display: block;
 }

Stuff that goes above nav.
  
More stuff.

  
    
      About

        
          Link 1

          
          Link 3

          
          Link 4

          
        
      
      Members & Groups

        
          Link 1

          
          Link 2

          
          Link 3

          
          Link 4

          
          Link 5

          
          Link 6

          
        
      
      Careers

        
          Link 1

          
          Link 2

          
          Link 3

          
          Link 4

          
        
      
      Education

        
          Link 1

          
          Link 2

          
        
      
      My Links

        
          Link 1

          
          Link 2

          
          Link 3

          
          Link 4

          
          Link 5

          
          Link 6

          
        
      
    
    
  

Stuff that below above nav.
  
More stuff.

Hope this helps. Happy coding :)

Navbar with secondary nav in horizontal line beneath

Answers (1)

Related Questions