Submenü - Größe ändern

[wetterfrosch]

Hallo zusammen,

ich versuche die Breite meines Submenüs zu verkleinern, doch irgendwie sehe ich den Wald vor lauter Bäumen nicht. Das Menü ist ungefähr so aufgebaut:

<div id='cssmenu'>
<ul>
   <li class='active '><a href=''><span></span></a></li>
   <li><a href=''><span></span></a></li>
   <li class='has-sub '><a href='#'><span></span></a>
      <ul>
         <li><a href=''><span></span></a></li>
         <li><a href=''><span></span></a></li>
         <li><a href=''><span></span></a></li>
      </ul>
   </li>
   <li class='has-sub '><a href='#'><span></span></a>
      <ul>
         <li class='has-sub '><a href='#'><span></span></a>
            <ul>
               <li><a href='#'><span></span></a></li>
               ...

Die CSS-Eigenschaften fürs Menü sehen so aus:

#cssmenu > ul {  
        list-style: none;  
        margin: 0;  
        padding: 0;  
        vertical-align: baseline;  
        line-height: 1;  
}  
  
/* The container */  
#cssmenu > ul {  
        display: block;  
        position: relative;  
        width: 150px;  
}  
  
        /* The list elements which contain the links */  
        #cssmenu > ul li {  
                display: block;  
                position: relative;  
                margin: 0;  
                padding: 0;  
                width: 150px;  
        }  
  
                /* General link styling */  
                #cssmenu > ul li a {  
                        /* Layout */  
                        display: block;  
                        position: relative;  
                        margin: 0;  
                        border-top: 1px dotted #3a3a3a;  
                        border-bottom: 1px dotted #1b1b1b;  
                        padding: 11px 20px;  
                        width: 110px;  
  
                        /* Typography */  
                        font-family: Helvetica, Arial, sans-serif;  
                        color: #d8d8d8;  
                        text-decoration: none;  
                        text-transform: uppercase;  
                        text-shadow: 0 1px 1px #000;  
                        font-size: 13px;  
                        font-weight: 300;  
  
                        /* Background & effects */  
                        background: #282828;  
                }  
  
                /* Rounded corners for the first link of the menu/submenus */  
                #cssmenu > ul li:first-child>a {  
                        border-top-left-radius: 4px;  
                        border-top-right-radius: 4px;  
                        border-top: 0;  
                }  
  
                /* Rounded corners for the last link of the menu/submenus */  
                #cssmenu > ul li:last-child>a {  
                        border-bottom-left-radius: 4px;  
                        border-bottom-right-radius: 4px;  
                        border-bottom: 0;  
                }  
  
  
                /* The hover state of the menu/submenu links */  
                #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {  
                        color: #fff;  
                        text-shadow: 0 1px 0 rgba(0, 0, 0, .25);  
                        background: #f23f37;  
                        background: -webkit-linear-gradient(bottom, #f23f37, #f45d57);  
                        background: -ms-linear-gradient(bottom, #f23f37, #f45d57);  
                        background: -moz-linear-gradient(bottom, #f23f37, #f45d57);  
                        background: -o-linear-gradient(bottom, #f23f37, #f45d57);  
                        border-color: transparent;  
                }  
  
                /* The arrow indicating a submenu */  
                #cssmenu > ul .has-sub>a::after {  
                        content: '';  
                        position: absolute;  
                        top: 16px;  
                        right: 10px;  
                        width: 0px;  
                        height: 0px;  
  
                        /* Creating the arrow using borders */  
                        border: 4px solid transparent;  
                        border-left: 4px solid #d8d8d8;  
                }  
  
  
  
                        /* Creating the arrow using borders */  
                        border: 4px solid transparent;  
                        border-left: 4px solid #000;  
                }  
  
                /* Changing the color of the arrow on hover */  
                #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {  
                        border-left: 4px solid #fff;  
                }  
  
                #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {  
                        border-left: 4px solid rgba(0, 0, 0, .3);  
                }  
  
  
                /* THE SUBMENUS */  
                #cssmenu > ul ul {  
                        position: absolute;  
                        left: 150px;  
                        top: -9999px;  
                        padding-left: 5px;  
                        opacity: 0;  
                        /* The fade effect, created using an opacity transition */  
                        -webkit-transition: opacity .3s ease-in;  
                        -moz-transition: opacity .3s ease-in;  
                        -o-transition: opacity .3s ease-in;  
                        -ms-transition: opacity .3s ease-in;  
                }  
  
                /* Showing the submenu when the user is hovering the parent link */  
                #cssmenu > ul li:hover>ul {  
                        top: 0px;  
                        opacity: 1;  
                }  

Die ausklappbaren Untermenüs sollen jedoch nur ungefähr halb so breit sein, wie das eigentliche Menü. Wie erreiche ich das? Vielen Dank!

Grüße
wetterfrosch