Changing admin menu style - opencart

Question

I want to change my admin menu, Horizontal to vertical . I have attached the Screenshot for the same.
please suggest me how to do that.
thanks!
Screenshot
in my opencart->admin->view->common->header.tpl
menu is like this
<div id="container">
<div id="header">
<div class="div1">
<div class="div2"><img src="view/image/logo.png" title="<?php echo $heading_title; ?>" onclick="location = '<?php echo $home; ?>'" /></div>
<?php if ($logged) { ?>
<div class="div3"><img src="view/image/lock.png" alt="" style="position: relative; top: 3px;" /> <?php echo $logged; ?></div>
<?php } ?>
</div>
<?php if ($logged) { ?>
<div id="menu">
<ul class="left" style="display: none;">
<li id="dashboard"><?php echo $text_dashboard; ?></li>
<li id="catalog"><a class="top"><?php echo $text_catalog; ?></a>
<ul>
<li><?php echo $text_category; ?></li>
<li><?php echo $text_product; ?></li>
<li><a class="parent"><?php echo $text_attribute; ?></a>
<ul>
<li><?php echo $text_attribute; ?></li>
<li><?php echo $text_attribute_group; ?></li>
</ul>
</li>
<li><?php echo $text_option; ?></li>
<li><?php echo $text_manufacturer; ?></li>
<li><?php echo $text_download; ?></li>
<li><?php echo $text_review; ?></li>
<li><?php echo $text_information; ?></li>
I want this menu to be displayed vertically instead of horizontal.
in stylesheet, menu is defined like this
#menu {
background: url('../image/menu.png') repeat-x;
position: relative;
z-index: 1;
height: 34px;
clear: both;
padding: 0px 30px;
min-width: 900px;
}
#menu > ul.left {
float: left;
}
#menu > ul.right {
float: right;
}
#menu > ul {
position: relative;
margin: 0;
padding: 0;
}
#menu > ul ul {
list-style: none;
margin: 0;
padding: 0;
background: url('../image/transparent.png');
}
#menu > ul a {
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 5px;
}
#menu > ul > li + li {
background: url('../image/split.png') center left no-repeat;
}
#menu > ul .top, #menu > ul li li.sfhover {
padding: 10px 15px 9px 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
#menu > ul ul li {
padding: 2px;
}
#menu > ul .selected .top {
background: url('../image/selected.png') repeat-x;
color: #FFFFFF;
}
#menu > ul .selected:hover a.top, #menu > ul .sfhover a.top {
}
#menu > ul .parent {
background: url('../image/arrow-right.png') 95% center no-repeat;
}
#menu > ul li {
float: left;
list-style: none;
}
#menu > ul li ul {
position: absolute;
}
#menu > ul li li {
clear: both;
}
#menu > ul li ul a {
color: #FFFFFF;
height: 15px;
width: 145px;
}
#menu > ul li ul ul {
margin: -27px 0 0 157px;
}
#menu > ul li li:hover, #menu > ul li li.sfhover {
background: #333;
color: #000000;
}
#container {
height: 100%;
}
here i am not getting how to change this. So please suggest me where exactly i should change

Answer 1

It will be easiest if you change the images to your images or background-colors of your choice and then put a break after every
<ul>
<li><?php echo $text_attribute; ?></li>
<li><?php echo $text_attribute_group; ?></li>
</ul><br/>
To Change heading names remove the php text and add your own.
<li>Add/Edit Category</li>
<li>Add/Edit Products</li>
If you want an accordion function then you just need to download this jquery script or another like it, in which case you don't even have to worry about that mess of css styling and you can write a far simpler version from scratch.
*UPDATE
To create the accordion navigation follow the tutorial here. I recommend demo 1 for your purposes.
I also recommend posting a new question if you need help.