Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover.
I suspect there might be conflicting or redundant CSS rules causing the problem. I've tried tweaking and adjusting various parts of the code, but nothing seems to work. I combined elements from two different menus to create this one, so I know there's room for simplification.
If anyone could take a look and point out where things are going wrong, that would be greatly appreciated. Specifically, I need the uls for Toy 1 and Toy 3 to drop down when hovered over. Thanks in advance!
HTML
<!-- drop menu-->
<ul id="menu">
<li><a href="toys.aspx">TOYS</a>
<div class="menu-container-1">
<ul class="column-1">
<li><a href=""><span>Toy 1</span></a>
<ul>
<li><a href="">sub menu basic 1</a></li>
</ul>
</li>
<li><a href="">Toy 2</a></li>
<li><a href=""><span>Toy 3</span></a>
<ul>
<li><a href="">sub menu basic 3</a></li>
</ul>
</li>
<li><a href="">Toy 4</a></li>
</ul>
</div>
</li>
</ul>
And below is the corresponding 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; }
/* Additional menu container styles */
...
(additional CSS rules remain the same)
...
For further reference, here is a js-fiddle link: http://jsfiddle.net/tousif123/TfhLb/