How do I create a vertical side menu with its own styling separate from the horizontal bar above it?

Question

Hello.  I need assistance in styling my side menu.  I would like for it to  have a different style than the horizontal bar that is above it.  I would like that the side menu have a black background and with white text vertically aligned to the left.  But I would also like that the mouse's arrow to turn into a hand when it touches the letters instead of during the entire width of the background.  When I began styling the text, everything aligned fine until I added the links in html code.  When I added the <a> tag and created a link to another page, the text goes from the left to the center of the black box.  And the entire width is a link rather than just the words.  To correct this, I tried renaming the div tag containg the menu.  I tried renaming the ul tag.  And I tried renaming the li tag and changing the declarations.  None of these ideas worked.  I thought about changing the <a> tag in the head of the document, but that didn't change the styling either.  I also tried creating the black background by inserting a black box as a background image with the links over top of the image.  It didn't work.  I would appreciate your assistance.   I will supply the coding if anyone is interested in looking at it.  Thank you.
Nora.

Answer 1

I can post a link to the page.  But I will need to upload it.  It will take a day to show.  But after I wrote to you.  I began working with creating additional a:link styles.  I was able to create a shortened clickable area of one the words in the vertical menu.  Your advice reinforced what I have learned.  The following code shows that I started to make different styles of the a:link for each word on the vertical menu.  I think that this will work.  To indicate the different a:link style I used bold letters .  Thank you very much.
html:
<div class="side_menu_nav">
     <ul class="side_menu">
          <li class="side_menu"><a href="still image.html">STILL IMAGE</a></li>
          <li class="side_menu_video"> <a href="video.html">VIDEO</a></li>
          <li class="side_menu" ><a href="animation.html">ANIMATION</a></li>
          <li class="side_menu" ><a href="website.html">WEBSITE</a></li>
     </ul>
</div>
CSS:
.side_menu_nav {
    margin-top: 100px;
    width: 190px;
    height: 230px;
    background-color: #F63;
    font-size: 18.5px;
    z-index: 5;
    font-family: Arial, Helvetica, sans-serif;   
side_menu ul  {
    list-style-type: none;
    padding-left: 10px;
side_menu li  {
    display: list-item;
.side_menu a:link  {
    text-align: left;
    color: #FFF;
    background-color: #000;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 190px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 0px;
    text-decoration: none;
    width: 120px;
.side_menu_video a:link  {
   text-align: left;
    color: #FFF;
    background-color: #000;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 65px;
    margin-top: 15px;
    margin-left: 15px;
    margin-right: 0px;
    text-decoration: none;
.side_menu a:visited  {
    color: #FFF;
    background-color: #000;
.side_menu a:hover  {
    color: #CCC;
.side_menu a:active   {
    color: #000;/*text*/