вот картинка http://i023.radikal.ru/1101/23/9263247d14ae.jpg
в ксс можно поменять цвет
пример на сайте http://world-warez.do.am/ он раздвигаеться
[code]<center><style>
ul.menu1 { list-style:none; margin:0px 0px 2px 0px; padding:0px;} li.menu1 a:link { display:block; text-decoration:none; border-left:3px solid #131313; text-align:left; padding-left:5px; height:15px; color:#747474; font-size:11px;} li.menu1 a:visited { display:block; text-decoration:none; border-left:3px solid #131313; text-align:left; padding-left:5px; height:15px; color:#747474; font-size:11px;} li.menu1 a:hover { display:block; text-decoration:none; border-left:3px solid #3D3D3D; background-color:#131313; text-align:left; height:15px; color:#7a7a7a; font-size:11px; } li.menu1 a:active { display:block; text-decoration:none; border-left:3px solid #3D3D3D; background-color:#3D3D3D; text-align:left; height:15px; color:#747474; font-size:11px; } li.menu1_bottom a:link { display:block; text-decoration:none; border-left:3px solid #131313; border-bottom:3px solid #131313; text-align:left; padding-left:5px; height:15px; color:#3D3D3D; font-size:11px;} li.menu1_bottom a:visited { display:block; text-decoration:none; border-left:3px solid #131313; border-bottom:3px solid #131313; text-align:left; padding-left:5px; height:15px; color:#3D3D3D; font-size:11px;} li.menu1_bottom a:hover { display:block; text-decoration:none; border-left:3px soalid #131313; background-color:#131313; text-align:left; height:15px; color:#3D3D3D; font-size:11px; } li.menu1_bottom a:active { display:block; text-decoration:none; border-left:3px solid #131313; border-bottom:3px solid #3D3D3D; background-color:#3D3D3D; text-align:left; height:15px; color:#3D3D3D; font-size:11px; } ul.menu2 { list-style:none; margin:0px 0px 2px 0px; padding:0px;} li.menu2 a:link { display:block; text-decoration:none; border-left:3px solid #DCDCDC; text-align:left; padding-left:5px; height:15px; color:#3D3D3D; font-size:11px;} li.menu2 a:visited { display:block; text-decoration:none; border-left:3px solid #DCDCDC; text-align:left; padding-left:5px; height:15px; color:#3D3D3D; font-size:11px;} li.menu2 a:hover { display:block; text-decoration:none; border-left:3px solid #3b3b3b; background-color:#1e1e1e; text-align:left; height:15px; color:#3D3D3D; font-size:11px; } li.menu2 a:active { display:block; text-decoration:none; border-left:3px solid #3D3D3D; background-color:#3b3b3b; text-align:left; height:15px; color:#3D3D3D; font-size:11px; } li.cat { display:block; text-decoration:none; background-color:#131313; border:0px solid #3D3D3D; color:#666666; text-align:right; padding-right:5px; padding-top:3px; height:16px; width:180px; font-size:10px; } .menu1 {font-weight:bold;font-size:8pt;font-family:Arial,Sans-Serif;} a.menu1:link {text-decoration:none; color:#dedede} a.menu1:active {text-decoration:none; color:#dedede} a.menu1:visited {text-decoration:none; color:#dedede} a.menu1:hover {text-decoration:none; color:#FFFFFF}
</style>
<SPAN class="menu1">
<?if($USER_LOGGED_IN$)?>
<li class="cat">Здравствуйте, $USERNAME$!</li><br>
<div id="avatar">
<center><a href="javascript://" rel="nofollow" onclick="window.open('/index/8','upp','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><?if($USER_AVATAR_URL$)?><a href="$PERSONAL_PAGE_LINK$"><img class="userAvatar" title="$USERNAME$" src="$USER_AVATAR_URL$" border="0"></a><?else?><?if($USER_LOGGED_IN$)?><img class="userAvatar" title="$USERNAME$" src="http://s005.radikal.ru/i210/1012/f0/7cf24650fe8c.gif" border="0"><?else?><img class="userAvatar" title="$USERNAME$" src="http://stingers.net.ru/no_avatar/no_ava1.png" border="0"><?endif?><?endif?></a></center>
<p></p></div>
<ul class="menu1">
<li class="cat"><a onclick="$('#obshee').toggle('slow');" href="javascript://"><font color="fee901"> Общее</font></a></li>
<div id="obshee" style="display:block;">
<li class="menu1"><span style="font-weight:normal"><a href="#" title="Ваша группа: $USER_GROUP$">Группа: $USER_GROUP$</a></span></li>
<li class="menu1"><span style="font-weight:normal"><a href="#">Профиль $USERNAME$</a></span></li>
<li class="menu1"><span style="font-weight:normal"><a href="/index/11">Изменение данных</a></span></li>
<li class="menu1"><span style="font-weight:normal"><a href="#">Вы с нами: $USER_REG_DAYS$ дней</a></span></li>
<li class="menu1"><span style="font-weight:normal"><a href="javascript://" rel="nofollow" id="upml" class="fNavLink" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;" title="Личные сообщения ($UNREAD_PM$)">Читать ЛС ($UNREAD_PM$)</a></span></li>
<li class="menu1"><span style="font-weight:normal"><a href="javascript://" title="Выход" onclick="if (confirm('Вы действительно хотите выйти?')) {location.href='$LOGOUT_LINK$'} else {alert('Спасибо что остались с нами!')};">Выход</a></span></li>
</ul></div>
<ul class="menu1"><li class="cat"><a onclick="$('#dobavit').toggle('slow');" href="javascript://"> <font color="fee901">Добавление материала</font></a></li>
<div id="dobavit" style="display:none;">
<li class="menu1"><span style="font-weight:normal"><a target="_blank" href="/blog/0-0-0-0-1">Сервер</a></span> </li>
<li class="menu1"><span style="font-weight:normal"><a target="_blank" href="/publ/0-0-0-0-1">Статью</a></span> </li>
<li class="menu1"><span style="font-weight:normal"><a target="_blank" href="/load/0-0-0-0-1">Файл</a></span> </li>
<li class="menu1"><span style="font-weight:normal"><a target="_blank" href="/dir/0-0-0-0-1">Сайт в ТОП</a></span> </li>
<li class="menu1"><span style="font-weight:normal"><a target="_blank" href="/stuff/0-0-0-0-1">Видео</a></span> </li>
</div>
</ul>
<ul class="menu1"><li class="cat"><a onclick="$('#slide').toggle('slow');" href="javascript://"><font color="fee901"> Скрыть/Показать</font></a></li>
<div id="slide" style="display:none;">
<li class="menu1"><a onclick="$('#avatar').toggle('slow');" href="javascript://">>> Ваш аватар</a></span></li>
</div>
</div>
</ul>
<?endif?>$LOGIN_FORM$<br></center>[/code]