CSS vertical menu with description below - css

Question

I am trying to create a vertical menu that looks like this (think of the cubes as placeholders for icons):
http://i.stack.imgur.com/dWWzR.png
I am having trouble putting the description below the main text, which is an <a> of course. Here is what I have so far in the HTML code:
<div id="actions">
<ul>
<li>Element 1<span class="desc">Description</span></li>
<li>Element 2<span class="desc">Description</span></li>
</ul>
</div>
And the CSS looks like this:
#actions {
width: 200px;
height: 60px;
padding: 10px 25px 10px 25px;
}
#actions ul {
list-style-type: none;
}
#actions ul li {
list-style-type: none;
display: block;
margin-top: 10px;
border: 2px solid;
height: 60px;
background-color: #64ADD0;
}
#actions a {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-weight: bold;
line-height: 40px;
}
#actions a:hover {
color: #3CA0D0;
}
#actions .desc {
display: inline-block;
line-height: 20px;
}
However, the result is that the description appears to the right of the link, and furthermore, the <span> isn't part of the link, so it shows as an ordinary label. How can I fix this? I am new to CSS and web design in general so please excuse me if this is a dumb question. :)
Thanks!

Answer 1

just remove the inline in your inline-block; that will make the anchor take up the whole line and push anything after it to the next line.
#actions a {
display: block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-weight: bold;
line-height: 40px;
}
http://jsfiddle.net/LmbLR/

Answer 2

Just add the follow CSS rule
#actions > ul > li > a {
display: block;
}
Here's the DEMO

Answer 3

I tend to use float:left and clear:both in order to know exactly where the objects are located: http://jsfiddle.net/MAt8Y/
#actions .desc {
line-height: 20px;
float:left;
clear:both;
padding-left: 5px;
padding-right: 5px;
}
#actions a {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
text-decoration: none;
font-weight: bold;
line-height: 40px;
float:left;
}