Кастомизация компонентов 2.0. Левое меню

#button
{
   width: 100%;
   border-right: 1px solid #000;
   padding: 0 0 1em 0;
   margin-bottom: 1em;
   font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
   background-color: #90bade;
   color: #333;
}

#button ul
{
   list-style: none;
   margin: 0;
   padding: 0;
   border: none;
}

#button li
{
   border-bottom: 1px solid #90bade;
   margin: 0;
   list-style: none;
   list-style-image: none;
}

#button li a {
   display: block;
   padding: 5px 5px 5px 0.5em;
   border-left: 10px solid #1958b7;
   border-right: 10px solid #508fc4;
   background-color: #2175bc;
   color: #fff;
   text-decoration: none;
   width: 100%;
}

html>body #button li a {
   width: auto;
}

#button li a:hover, #button li a.selected
{
   border-left: 10px solid #1c64d1;
   border-right: 10px solid #5ba3e0;
   background-color: #2586d7;
   color: #fff;
}

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>

<?if (!empty($arResult)):?>

<div id="button">
   <ul>
   <?foreach($arResult as $arItem):?>
      <?if($arItem["SELECTED"]):?>
         <li><a href="<?=$arItem["LINK"]?>" class="selected"><?=$arItem["TEXT"]?></a></li>
      <?else:?>
         <li><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
      <?endif?>
   <?endforeach?>
   </ul>
</div>

<?endif?>