Html, CSS : Sidebar sub menu not appearing - html

Question

I have been following a tutorial online about creating a sidebar and i have run into an issue. When i hover over one of the menus a sub menu appears. But if i put anything to the right of the menu the sub menu does not appear only when you put the mouse over it. I want the menu to appear over the text to the right of the sidebar
The menu works perfectly when nothing is to the left (e.g. overflow:auto;)
Here is a jfiddle example of the issue
HTML
<nav id="sidebar-menu">
<ul class="parent-sidebar-menu">
<li>Home & Kitchen
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Electronics
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul></li>
<li>Clothing
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul></li>
<li>Cars & Motorbikes
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Books
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li>Support
<ul>
<li>Contact Us</li>
<li>Forum</li>
<li>Deliveries</li>
<li>T&C</li>
</ul>
</li>
</ul>
</nav>
</div>
<div align="top">
<p>this is just a test</p>
</div>
CSS
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:Calibri;
}
#sidebar-menu {
overflow: visible;
position:relative;
z-index:2;
}
.parent-sidebar-menu {
background-color: #0c8fff;
min-width:200px;
float:left;
}
#sidebar-menu ul
{
list-style-type:none;
}
#sidebar-menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
}
#sidebar-menu ul li a:hover
{
background-color:#007ee9;
}
#sidebar-menu ul li:hover > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#sidebar-menu ul li > ul {
position: absolute;
background-color: #333;
top: 0;
left: -200px;
min-width: 200px;
z-index: -1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#sidebar-menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}
Does anyone know how to fix this?

Answer 1

Your sub-menu actually is showing up; it's just the background color that doesn't show up. Right now, you have the background color applied the sub-menu's UL. If you instead apply the background-color to the LIs within that UL, it fixes the issue (I think this might be because of the UL's very low z-index?).
Anyway, here's the CSS rule to add:
#sidebar-menu ul li > ul li {
background-color: #333;
}
You can then remove the background-color from #sidebar-menu ul li > ul since it doesn't do anything.

Answer 2

The issue is that you have a z-index of -1 (so behind everything) on the CSS for your rollover.
Changing the Z-index of the #sidebar-menu ul li > ul to 100 and the z-index of the #sidebar-menu to 200 fixes it.
This should be your CSS:
p, ul, li, div, nav
{
padding:0;
margin:0;
}
body
{
font-family:Calibri;
}
#sidebar-menu {
overflow: visible;
position:relative;
z-index:200;
}
.parent-sidebar-menu {
background-color: #0c8fff;
min-width:200px;
float:left;
}
#sidebar-menu ul
{
list-style-type:none;
}
#sidebar-menu ul li a
{
padding:10px 15px;
display:block;
color:#fff;
text-decoration:none;
z-index:100;
}
#sidebar-menu ul li a:hover
{
background-color:#007ee9;
}
#sidebar-menu ul li:hover > ul {
left: 200px;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#sidebar-menu ul li > ul {
position: absolute;
background-color: #333;
top: 0;
left: -200px;
min-width: 200px;
z-index: 1;
height: 100%;
-webkit-transition: left 200ms ease-in;
-moz-transition: left 200ms ease-in;
-ms-transition: left 200ms ease-in;
transition: left 200ms ease-in;
}
#sidebar-menu ul li > ul li a:hover
{
background-color:#2e2e2e;
}