Slide-to-the-right submenu after clicking a button - html

Question

I want to make a control panel for the admin part of my website. The control panel I developed consists of several buttons. What I need is whenever I click one of the buttons, that option's sub-menu will appear right next to it. For example, I have "My Account" as one of the main options. If I click on the "My Account" button, its sub-menu (with Update Profile and Change Password etc.) will appear.
Here's the code for the control panel:
<div class="main-area">
<div class="control-panel">
<h1>Admin Control Panel</h1>
<button class="categories">My Account ►</button><br /><br />
<button class="categories">System Users ►</button><br /><br />
<button class="categories">Applicants ►</button><br /><br />
<button class="categories">Blacklist ►</button>
<br /><br />
<button class="categories">Jobs ►</button><br /><br />
<button class="categories">Requirements ►</button><br />
<br />
<button class="categories">Reports ►</button>
Here's the CSS part:
body {
font-family: arial;
background-color: #0F8DC7;
}
.control-panel {
border: solid 1px #000;
padding: 15px;
border-radius: 15px;
box-shadow: 5px 5px 5px;
width: 300px;
text-align: center;
display: inline-block;
height: 370px;
background-color: #FFE400;
}
.main-area {
width: 500px;
margin: auto;
}
.categories{
width: 200px;
}
Hoping for some answers not involving JavaScript.

Answer 1

It's just a demo, I haven't styled your code for a better view.
You have to use css :hover to achieve this functionality. And put your button(menuItem) and submenuItems(li) inside "ul" tag like this,
<ul>
<button class="categories">My Account ►</button><br /><br />
<li>First</li>
<li>Second</li>
</ul>
Add this css code ,
.main-area ul li{
display : none;
}
.main-area ul:hover li{
display : block;
background:blue;
height:auto;
width:8em;
}
Style your submenu items as you want.
jsFiddle