Javascript 已修复我的侧菜单栏中的问题，并且可以滚动内容

这是我的JS小提琴链接

我的侧边菜单栏中的问题已修复，内容可滚动。现在我想在左侧栏中垂直显示菜单，如下所示

M
E
N
U

我如何在CSS中实现它。单击该按钮后，JQuery切换应该可以工作

---

我试图做到这一点：

使用css转换，将

#菜单

放在视图之外，只需点击

#菜单(btn

切换类即可

HTML

<div id="header">
<div id="wrapper">
<div id="menu_btn" style="float:left;"><a href="#" style="color:#FFFFFF;">Menu</a></div>
<div id="whole">
<div id="wleft">
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About  Yes Service</a>
<ul id="submenu">
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Network</a></li>
</ul>
</li>
<li><a href="#">Boys Uniforms</a></li>
<li><a href="#">Girls Uniforms</a><ul id="submenu">
<li><a href="#">T-shirt</a></li>
</ul></li>
<li><a href="#">Thin client</a></li>
<li><a href="#">Contact Us</a></li>
</ul></div><!--endofwleft-->
</div><!--endofwhole-->
</div><!--endofmenu-->    
</div><!--endofwrapper-->
</div><!--endofheader-->

jQuery

$(document).ready(function(e) {
        $('#menu_btn').click(function(e) {
            $('#menu').toggleClass('shown');
        });
    });

---

有人能告诉我如何解决这个问题吗？我还有另一个疑问，我想用jquery slideToggle将图像放在那里，而不是文本菜单。我完成了菜单，但在整个商品市场中，菜单是从左到右的。如何实现这一点。您也可以在live中看到我的代码，然后单击左侧的菜单谢谢您的回答。我有一个疑问，而不是菜单文本，我想把图像那里。（这意味着公司标志）。我们如何做到这一点。我无法在JSFIDLE中得到答案，我在本地进行了测试，它对我有效。请用图像替换菜单文本，以防您需要这里的帮助注释。如果答案对你有帮助，请接受。当鼠标悬停在achor标签上时，你能告诉我背景和子菜单背景颜色正在变为白色，子菜单宽度很大。我们所做的还可以，但我的客户看起来是这样的是的，你的答案是正确的，我接受了。当鼠标悬停在achor标签上时，背景和子菜单的背景色变为白色，子菜单的宽度变大。我们所做的是可以的，但我的客户看起来像这个WholeFoodMarket.com。请查看本网站的菜单。如果您能帮我做一个很棒的鼠标悬停事件，您不需要jQuery，只需在css中使用：hover pseudo selector即可。例如，#menu>li>a:hover{background color:#fff；color:#333}；

$(document).ready(function(e) {
        $('#menu_btn').click(function(e) {
            $('#menu').toggleClass('shown');
        });
    });