rsing4dev rsing4dev - 6 months ago 34
HTML Question

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

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

(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>