Drop down menu items won't drop down - html

Question

I need some smart-people help. I've wracked my brain on this and I am close, but just cannot get my sub-sub menu items to drop to the right on hover.
I probably have conflicting or reiterative css, but I've removed parts and put back other parts, and... I just need to see if something jumps out to you guys, I'm sure it will.. - I feel like I'm close but.. no cigar. I took two menus and tried to use parts of each (had ability to do 2 column and other had sub menus) so I know this can be simplified way more.
I'd really appreciate it - I know its a mess at this point, there's more than needed for this simple section of html I have drilled down to, but if you can just see where the problem is -- I'm looking for the uls for Toy 1 and Toy 3 to drop down on hover. Thanks.
html
<!-- drop menu-->
<ul id="menu">
<li>TOYS
<div class="menu-container-1">
<ul class="column-1">
<li><span>Toy 1</span>
<ul>
<li>sub menu basic 1</li>
</ul>
</li>
<li>Toy 2</li>
<li><span>Toy 3</span>
<ul>
<li>sub menu basic 3</li>
</ul>
</li>
<li>Toy 4</li>
</ul>
</div>
</li>
</ul>
and here is the css:
#menu li {
float:left;
display:block;
position:relative;
text-align:center;
padding:4px 18px;
margin:0px 27px 0 0;
border:none; }
#menu li:hover {
border-width:0 0 0 1px;border-style:solid;border-color:#F1F7FC;
padding:4px 18px 4px 17px;
display:block; }
#menu li a {
font-family:Arial, Helvetica, sans-serif;
font-size:16px/1.8em;
color: #000;
display:block;
outline:0;
text-decoration:none;
font-weight:500; }
#menu li:hover a {
color:#161616; }
/* menu containers here */
#menu .menu-container-1,#menu .menu-container-2,#menu .menu-container-3,#menu .menu-container-4 {
margin:4px auto;
float:left;
position:absolute;
left:-999em;
text-align:left;
padding:10px 5px 3px 5px;
border:1px solid #D8E9F8; /* border around dropdown */
border-top:none;
/* rounded corners */
border-radius:0 5px 5px 5px;
-moz-border-radius:0 5px 5px 5px;
-webkit-border-radius:0 5px 5px 5px;
/* gradient */
background:#ffffff;
background: -moz-linear-gradient(center top, #ffffff, #FAFCFE) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#FAFCFE));
box-shadow:inset .4px -2px 3px 2px #EFFFFF; }
#menu .menu-container-1 {
width:165px; }
#menu .menu-container-2 {
width:340px; }
#menu li:hover .menu-container-1, #menu li:hover .menu-container-2, #menu li:hover .menu-container-3, #menu li:hover .menu-container-4 {
top:auto;left:-1px; }
/* columns */
#menu .column-1, #menu .column-2 {
display:inline; float:left;position:relative;margin:0;}
/*added 7/9 for span arrow sub menu */
#menu span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
#menu ul span{
background-image:url("https://www.kqimageserver.com/other/arrowsub.png");padding-right:12px;}
/*thought might be sub menu */
#menu ul ul {
position:absolute;left:80%;top:0;}
#menu .column-1 {
width:165px;}
#menu ul li ul li{ display:none;}
#menu ul li ul li ul li hover>* {display:block; }
/* attempts to get sub menu to show on hover */
#menu .column-1 ul li ul li:hover>*{
display:block;position:absolute;left:80%;top:0;}
#menu li:hover div a {
box-shadow: 0 1px 0 #eeeeee, 0 2px 0 #eeeeee; /*lines between list items */
color: #000;
font-size: 13px;
padding-left: 6px;
font-weight:500;
width: 159px; }
#menu li:hover div a:hover {
background: -moz-linear-gradient(#04ACEC, #0186BA) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA));
color: #000;
background:#deeff7;}
#menu li ul {
/*box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; */
list-style:none;
padding:0;
margin-bottom:7px;}
#menu li ul li {
float: none;
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 0;
position: relative;
text-align: left;
width: 130px;}
#menu li ul li:hover {
background: none;
border: medium none;
margin: 0;
padding: 0; }
Here is a js-fiddle
http://jsfiddle.net/tousif123/TfhLb/

Answer 1

Try
removing
#menu ul li ul li {
display: none;
}
and adding
ul.column-1 li ul
{
display:none;
}
ul.column-1 li:hover ul
{
display:block;
}
Heres a js-fiddle
http://jsfiddle.net/tousif123/brBj5/

Answer 2

You just bave a bad selector for your block display:
#menu ul li ul li ul li hover>* {display:block; }
It should read
#menu ul li:hover ul li { display: block; }

Answer 3

Using display:none and display:block isn't very accessible.
Ultimately, if you have the time and patience the best thing to do is to use the clip technique. It will hide content when it isn't needed, but also keep it accessible:
http://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html