我需要添加子菜单到我的css菜单

我希望我的子菜单在水平方向向右滑动，我尝试了一些其他css菜单，但它在我的网页上产生了问题。 这是我的菜单html页面

<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 &amp; 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 &amp; Fitness</a></li>
        <li><a href="search.php?category=other" title="Category 11">Other</a></li>
        <li></li>
    </ul>
</li>

看看这是怎么回事

HTML

<li class="widget">
<h2>Categories</h2>
<div class='subMenu'>
<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>
</ul>
</div>
</li>

小提琴

---

我不知道你向右滑动是什么意思。你能详细说明一下吗。还可以看到小提琴，这就是你的意思吗？在我的css中，没有写在下拉子菜单上的css，我的意思是如果用户单击衣服菜单或鼠标，我希望下拉子菜单为男装、女装，这就是我的意思谢谢好的！我完全误解了你的问题。你也需要一点javascript，你试过jquery菜单插件吗？我不使用jquery的原因是，如果我放置一个新的js源链接，我的另一个js不起作用，所以我尝试用css解决

.subMenu{
display:none;
}
.widget:hover .subMenu{
 display:block;
}