I am having trouble getting my submenu to slide to the right horizontally. I have tried various CSS menus, but they are causing issues with my webpage. Here is the HTML code for the menu:
<li class="widget">
<h2>Categories</h2>
<ul>
<li><a href="index.php" title="Category 1">All </a></li>
<li><a href="search.php?category=Groceries" title="Category 1">Groceries</a></li>
<li><a href="search.php?category=Personal_care" title="Category 2">Personal Care</a></li>
<li><a href="search.php?category=Dining" title="Category 5">Dining</a></li>
<li><a href="search.php?category=entertainment" title="Category 7">Entertainment</a></li>
<li><a href="search.php?category=travel" title="Category 6">Travel </a></li>
<li><a href="search.php?category=Books_Magazine" title="Category 3">Books & Magazine</a></li>
<li><a href="search.php?category=clothing" title="Category 4">Clothing</a></li>
<li><a href="search.php?category=Sport_Fitness" title="Category 9">Sport & Fitness</a></li>
<li><a href="search.php?category=other" title="Category 11">Other</a></li>
<li></li>
</ul>
</li>
And here is the CSS code for the menu. How can I modify it to create a dropdown submenu on the right side?
.widget { padding-bottom: 16px; }
.widget h2 {
height: 37px;
line-height: 37px;
background: url('images/widget-title.png') no-repeat 0 0;
font-family: 'Museo500', arial, sans-serif;
font-size: 18px;
color: #fff;
font-weight: normal;
padding: 0 9px 5px 22px;
}
.widget li a {
background: #6692C6;
line-height: 26px;
height: 26px;
padding-left: 23px;
font-size: 13px;
border-bottom: 1px solid #fff;
color: #EEEEEE;
display: block;
}
.widget li.last a { border: none; }
.widget li a:hover {
color: #333333;
background: #fff;
text-decoration: none;
font-weight: bold;
}