Nested Horizontal Css Menus

I'm having a hard time with nested horizontal hovers. I either can't get the nested submenu hidden or I can't get it to show on hover. I've added the following to get the first sub

Solution 1:

Not quite sure if this is the effect you are looking for.

.wrapper {
     width:500px;
     height:500px;
	 color:black;
 }
 .menu-holderul {
     margin: 2px00px25px;
     padding: 0;
     list-style-type: none;
 }
 .menu-holderulli {
     position: relative;
     float: left;
     padding: 0px10px010px;
     margin: 0px0px100px0px;
     border-left: 1px dotted white;
 }
    
 .menu-holderulli:hover{
     background-color: green;
 }

 .menu-holderulli:hover > ul {
     display: block;
 }
  .menu-holderulli.current-menu-item
{
 background:#999
}

 .menu-holderullia {
     font-family: arial, sans-serif;
     font-size: 12px;
     font-weight: bold;
     display: block;
	 color:black;
     text-decoration: none;
     padding: 15px10px15px10px;
     -webkit-border-radius: 5px5px0px0px;
     border-radius: 5px5px0px0px;
 }
 .menu-holderulliul {
     float: none;
     display: none;
     position: absolute;
     top: 100%;
     left: 0px;
     margin: -1px00px10px;
     padding: 5px10px5px10px;
     white-space: nowrap;
 }
 .menu-holderulliulli {
     position: static;
     float: none;
     display: inline;
     padding: 5px10px5px10px;
     margin: 0px0px0px -10px;
     background-color: #025179;
 }
 .menu-holderulliullia {
     display: inline;
     margin: 00px00px;
     padding: 0px10px0px10px;
     font-weight: normal;
     -webkit-border-radius: 0;
     border-radius: 0;
 }
 .menu-holderulliulli:first-of-type {
     -webkit-border-radius: 0px0px0px5px;
     border-radius: 0px0px0px5px;
 }
 .menu-holderulliulli:last-of-type {
     -webkit-border-radius: 0px5px5px0px;
     border-radius: 0px5px5px0px;
 }
 .menu-holderulli:first-of-type {
     border-left: none;
 }

 

<divclass="wrapper"><divclass="menu-holder"><ulclass="menu"><li><ahref="#">item 1</a></li><li><aid="close0"href="#"onclick="showiframe(this.id); return false;">
          Follow This</a><ulclass="submenu"><li><aid="about"href=""onclick="showiframe(this.id); return false;">About</a></li><li>Item1</li><li>Item2</li><li>Follow This
            <ulclass="submenu"><li><ahref="#">Item1</a></li><li>Item2</li><li>Item3</li><li>follow This
                <ulclass="submenu"><li><ahref="#">Item1</a></li><li>Item2</li><li>Item3</li><li>Item4</li></ul></li></ul></li><li><ahref="#">Submenu item 2</a></li></ul></li><li><ahref="#">menu item 3</a></li><li><ahref="#">menu item 4</a></li></ul></div><!-- menu-holder end --></div>
​

Solution 2:

Here is a semantically correct implementation of what you are looking for:

HTML

<nav><divclass="container"><ulclass="primary"><liclass="active"><ahref="#">Item</a></li><liclass=""><ahref="#">Item</a></li><liclass=""><ahref="#">Item</a><divclass="secondary-nav-container"><ulclass="secondary"><liclass=""><ahref="#">Sub Item 1</a></li><liclass=""><ahref="#">Sub Item 2</a></li><liclass=""><ahref="#">Sub Item 3</a></li></ul></div></li><liclass=""><ahref="#">Item 4</a></li></ul></div></nav>

CSS

nav.primary-navigation {
      float: right;
      margin: 0px;
    }
    nav.primary-navigationli {
      float: left;
      margin: 0px;
      padding: 0px;
    }
    nav.primary-navigationli:last-child {
      margin-right: 10px;
    }

    nav.primary-navigationa {
      display: inline-block;
      width: 100%;
      padding: 0px10px;
      text-decoration: none;
      font-size: 1.2em;
      line-height: 2.2em;
    }

    nav.mobile.secondary-navigationa {
      font-size: 1em;
      line-height: 2.3em;
    }

    nav.secondary-nav-container {
      position: absolute;
      top: 36px;
      left: 0px;
      width: 100%;
      min-height: 36px;
      display: none;
    }

    nav.primary-navigation > li.active.secondary-nav-container,
    nav.primary-navigation > li:hover.secondary-nav-container {
      display: block;
      z-index: 4;
    }

    nav.primary-navigation > li:hover.secondary-nav-container,
    nav.mobile.primary-navigation > li:hover.secondary-nav-container{
      z-index: 5;
    }

    nav.secondary-navigation, nav.mobile.secondary-navigation {
      float: right;
    }

Context: I devised this HTML/CSS only solution for a CMS I developed a few years ago.

Show/Hide effects: These can be done using css transitions or using javascript.