How do I create a horizontal navigation menu with pure CSS & CSS table?

Question

I am a newbie & I am trying to make the nav which I mentioned. I got a tutorial here http://www.mattboldt.com/building-great-navbars-toolbars-display-table/ . Unfortunately, it uses SCSS which I don't know, instead of pure CSS.

My code - http://codepen.io/rsing4dev/pen/LNqvVN

<p>Please refer to my codepen for the code. 
I don't want to paste too much here & make the question big.

Problem - When I hover over the "services" menu, its child or submenu should be displayed as a vertical list, not horizontal. Why is this not happening and how do I fix it ?

Thanks !

PS - I prefer to NOT use inline block & floats instead to make my nav menu.

Answer 1

Inline blocks is usually the simplest way to go.

The main difference between inline blocks and table cells is gonna be when you resize the browser. If you resize the browser with blocks then they will fall one under the other were-as by default the table cell won't.

Example here (resize he output window):

https://jsfiddle.net/dv7k720s/

You can also look at the solution haltersweb presents to work with a table.

Otherwise I also re-did your menu quickly following the w3schools tutorial you can take a look and try to understand.

https://jsfiddle.net/LmLbefts/1/

<ul>
<li  class="dropdown">
    <a href="#" class="dropbtn">Services</a>
    <div class="dropdown-content">
      <a href="#">Our Services</a>
      <a href="#">Client List</a>
    </div>
  </li>
  <li><a href="#resources">Resources</a></li>
  <li><a href="#contact">Contact Us</a></li>
  <li><a href="#company">Company</a></li>
  <li><a href="#">
  <form class="searchbar" action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px">
       <input type="hidden" name="any selected">
       <input size="10" name="q" value="" class="searchform" placeholder="Web Search">&nbsp;
       <input type="submit" value="Go!" name="btnG" class="searchbutton"><br>
  </form>
  </a></li>
</ul>

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9));
    line-height: 2em;
    text-align: center;
    vertical-align: middle;
}

li {
display:inline;
margin-left:2%;
margin-right:2%;

}


li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
/* To edit if you want a hover color   */
/*background-color: red;*/
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9)); color:white;}

.dropdown:hover .dropdown-content {
    display: block;
}

Here using basic CSS the W3School has a simple tutorial which explains how to create a vertical or horizontal navigation bar:

Link: http://www.w3schools.com/css/css_navbar.asp

Here is also a tutorial on how dropdown menu works:

http://www.w3schools.com/css/css_dropdowns.asp

Here is a preview of what it looks like.

Answer 2

(See the updated code (below) which still uses css table display.)

The problem you are running into is that:

1) you are assigning both the top nav and the subnav as tables and all of their cells as table-cell. You only need this for the topnav and its list items.

3) you need to be able to have your subnav "escape" the confines of the top-nav container or the container will grow to include the sub-nav.

Take a look at my example below and see how I used table display and additionally used position absolute (with parent of position relative -- very important) to place my subnav.

 #nav { background-image: linear-gradient(to top, rgba(9, 9, 44, 0.9), rgba(82, 82, 115, 0.9)); line-height: 2em; width: 100%; } #nav ul { list-style: none; padding: 0; margin: 0; } .main-nav-menu { display: table; width: 100%; } .main-nav-menu-item { display: table-cell; padding: 0; margin: 0; text-align: center; width: 20%; border-right: 1px solid #131332; position: relative; } .sub-nav-menu { background-color: gray; left: 0; position: absolute; width: 100%; } #nav a { text-decoration: none; color: #CFCFE0; } /* CSS For the submenus of the main navigation menu. */ .sub-nav-menu { display: none; } .main-nav-menu:hover .sub-nav-menu { display: block; } 

 <div id="nav"> <ul class="main-nav-menu"> <li class="main-nav-menu-item"> <a href="#Services" class="nav-tab selected">Services</a> <ul class="sub-nav-menu"> <li class="sub-nav-menu-item"><a href="#our-services">Our Services</a></li> <li class="sub-nav-menu-item"><a href="#client-list">Client List</a></li> </ul> </li> <li class="main-nav-menu-item"> <a href="#Resources" class="nav-tab">Resources</a> <ul> <li></li> <li></li> </ul> </li> <li class="main-nav-menu-item"> <a href="#Contact-Us" class="nav-tab">Contact Us</a> <ul> <li></li> </ul> </li> <li class="main-nav-menu-item"> <a href="#Company" class="nav-tab">Company</a> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </li> <li class="main-nav-menu-item"> <form class="searchbar" action="http://www.google.com/search" name="f" target="_blank" style="margin: 0px"> <input type="hidden" name="any selected"> <input size="10" name="q" value="" class="searchform" placeholder="Web Search">&nbsp; <input type="submit" value="Go!" name="btnG" class="searchbutton"><br> </form> </li> </ul> </div>