שאלת CSS

היי פורום
הנה האתר שאני עובדת עליו
http://socsci.tau.ac.il/mainspirit/
שימו לב לתפריט העליון, ולתתי התפריטים שנפתחים ממנו
אני מנסה בCSS להגדיר שהרקע של ה-subitem יהיו באורך של הטקסט שעל הכפתור
ולא באורך אחיד לכל הכפתורים
ככה תתי התפריטים לא יגלשו לי מחוץ לדף
הנה ההגדרות של ה-subitem
אשמח לעזרתכם
פריה

/* begin MenuSubItem */
.art-menu ul a
{
    position:
    display: inherit;
    text-align: center;
    white-space: nowrap;
    height: 26px;
    width: 280px;
    overflow: inherit;
    line-height: 26px;
    margin-right: 5px;

    background-color:#71c4f6;
    background-position: left top;
    background-repeat: repeat-x;
    border-width: 1px;
    border-style: ridge;
    border-color: #ffffff;
}

.art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
    display:  list-item;
    float: none;
    margin: inherit;
    padding: inherit;
    
    background-color:#71c4f6;
    text-align: inherit;
    text-decoration: inherit;
    
}

.art-menu ul a, .art-menu ul a:link, .art-menu ul a:visited, .art-menu ul a:hover, .art-menu ul a:active, .art-nav ul.art-menu ul span, .art-nav ul.art-menu ul span span
{
    text-align: right;
    text-indent: 12px;
    text-decoration: none;
    line-height: 26px;
    color: #000000;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;
font-size: 12px;
font-style: normal;
font-weight: normal;

}

.art-menu ul ul a
{
    margin-left: auto;
    
}

.art-menu ul li a:hover
{
    color: #CCDDFF;
    background-position: -26px 0;
    background-color:#003399;
    
}

.art-menu ul li:hover>a
{
    color: #CCDDFF;
    background-position: -26px 0;
    background-color:#003399;
    
}

.art-nav .art-menu ul li a:hover span, .art-nav .art-menu ul li a:hover span span
{
    color: #CCDDFF;
    
}

.art-nav .art-menu ul li:hover>a span, .art-nav .art-menu ul li:hover>a span span
{
    color: #CCDDFF;
    clip: rect(auto, auto, auto, 406px);
}


/* end MenuSubItem */