Nested Horizontal CSS Menus - css

Question

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 menu hidden:
enter code here
.menu-holder ul li ul li ul li{
display:none;
}
and the following to try and get it to display:
enter code here
.menu-holder > ul > li > ul > li:hover > ul{
display: inline;
}
While the hiding is working the displaying is not. I'm not sure that this is how I should initially hide the submenu anyway.
One thing I haven't addressed yet is to get the menus to fill the screen to the left before they fill to the right.
.wrapper {
width:500px;
height:500px;
color:black;
}
.menu-holder ul {
margin: 2px 0 0px 25px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
padding: 0px 10px 0 10px;
margin: 0px 0px 100px 0px;
border-left: 1px dotted white;
}
.menu-holder ul li:hover{
background-color: green;
}
.menu-holder ul li:hover ul {
display: block;
}
.menu-holder ul li ul:hover {
display: block;
}
.menu-holder ul li.current-menu-item
{
background:#999
}
.menu-holder ul li ul li ul li{
display:none;
}
.menu-holder > ul > li > ul > li:hover > ul{
display: inline;
}
.menu-holder ul li a {
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
color:black;
text-decoration: none;
padding: 15px 10px 15px 10px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 42px;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px -10px;
background-color: #025179;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
}
.menu-holder ul li ul li:first-of-type {
-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
.menu-holder ul li ul li:last-of-type {
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
.menu-holder ul li:first-of-type {
border-left: none;
}
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li>
<a id="close0" href="#" onclick="showiframe(this.id); return false;">
Follow This</a>
<ul class="submenu">
<li><a id="about" href="" onclick="showiframe(this.id); return false;">About</a>
</li>
<li>Item1</li>
<li>Item2</li>
<li>Follow This
<ul class="submenu">
<li>Item1
</li>
<li>Item2</li>
<li>Item3</li>
<li>follow This
<ul class="submenu">
<li>Item1
</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
</ul>
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
​

Answer 1

Not quite sure if this is the effect you are looking for.
.wrapper {
width:500px;
height:500px;
color:black;
}
.menu-holder ul {
margin: 2px 0 0px 25px;
padding: 0;
list-style-type: none;
}
.menu-holder ul li {
position: relative;
float: left;
padding: 0px 10px 0 10px;
margin: 0px 0px 100px 0px;
border-left: 1px dotted white;
}
.menu-holder ul li:hover{
background-color: green;
}
.menu-holder ul li:hover > ul {
display: block;
}
.menu-holder ul li.current-menu-item
{
background:#999
}
.menu-holder ul li a {
font-family: arial, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
color:black;
text-decoration: none;
padding: 15px 10px 15px 10px;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}
.menu-holder ul li ul {
float: none;
display: none;
position: absolute;
top: 100%;
left: 0px;
margin: -1px 0 0px 10px;
padding: 5px 10px 5px 10px;
white-space: nowrap;
}
.menu-holder ul li ul li {
position: static;
float: none;
display: inline;
padding: 5px 10px 5px 10px;
margin: 0px 0px 0px -10px;
background-color: #025179;
}
.menu-holder ul li ul li a {
display: inline;
margin: 0 0px 0 0px;
padding: 0px 10px 0px 10px;
font-weight: normal;
-webkit-border-radius: 0;
border-radius: 0;
}
.menu-holder ul li ul li:first-of-type {
-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;
}
.menu-holder ul li ul li:last-of-type {
-webkit-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
}
.menu-holder ul li:first-of-type {
border-left: none;
}
<div class="wrapper">
<div class="menu-holder">
<ul class="menu">
<li>item 1
</li>
<li>
<a id="close0" href="#" onclick="showiframe(this.id); return false;">
Follow This</a>
<ul class="submenu">
<li><a id="about" href="" onclick="showiframe(this.id); return false;">About</a>
</li>
<li>Item1</li>
<li>Item2</li>
<li>Follow This
<ul class="submenu">
<li>Item1
</li>
<li>Item2</li>
<li>Item3</li>
<li>follow This
<ul class="submenu">
<li>Item1
</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</li>
</ul>
</li>
<li>Submenu item 2
</li>
</ul>
</li>
<li>menu item 3
</li>
<li>menu item 4
</li>
</ul>
</div>
<!-- menu-holder end -->
</div>
​

Answer 2

Here is a semantically correct implementation of what you are looking for:
HTML
<nav>
<div class="container">
<ul class="primary">
<li class="active">Item</li>
<li class="">Item</li>
<li class="">Item
<div class="secondary-nav-container">
<ul class="secondary">
<li class="">Sub Item 1</li>
<li class="">Sub Item 2</li>
<li class="">Sub Item 3</li>
</ul>
</div>
</li>
<li class="">Item 4</li>
</ul>
</div>
</nav>
CSS
nav .primary-navigation {
float: right;
margin: 0px;
}
nav .primary-navigation li {
float: left;
margin: 0px;
padding: 0px;
}
nav .primary-navigation li:last-child {
margin-right: 10px;
}
nav .primary-navigation a {
display: inline-block;
width: 100%;
padding: 0px 10px;
text-decoration: none;
font-size: 1.2em;
line-height: 2.2em;
}
nav.mobile .secondary-navigation a {
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.