Изменение размера ячеек списка

[More4ever]

Вот как бы ЦСС исследую примерно месяц.
Руку решил набивать делая клон контакта...
Застопорился на одной мелочи (но на внешний вид влияет )
сам сайт построен тремя колонками, так вот в самой левой находится меню навигации сделанное UL-списком, каждый LI является отдельным дивом и в конце они подгоняют все Паддингом, изза того что вверху два дива другой величины и они их выровняли флотами по двум сторонам. При наведении на ячейку она подсвечивается.
Данный способ не хило увеличивает код, я же сделал более компактно определил величину элемента LI а первых два пункта впихнул в один LI (таким образом они стали в одну линию как и требовалось а код уменьшился), но появилась проблемка.
Теперь два элемента идут как один соответственно и подсвечиваются они вместе сплошным фоном.

Вопрос в том что возможно ли их как-то подсветить отдельно?

<div id="u_nav">
                <ul>
                    <li id="my_page"><a href="my_page">Моя страница</a><a href="edit">ред.</a></li>
                    <li id="friends"><a href="friends">Мои друзья</a></li>
                    <li id="foto"><a href="foto">Мои фотографии</a></li>
                    <li id="video"><a href="video">Мои видео</a></li>
                    <li id="audio"><a href="audio">Мои аудиозаписи</a></li>
                    <li id="mail"><a href="mail">Мои сообщения</a></li>
                    <li id="groups"><a href="groups">Мои группы</a></li>
                    <li id="events"><a href="events">Мои встречи</a></li>
                    <li id="feed"><a href="feed">Мои новости</a></li>
                    <li id="fave"><a href="fave">Мои закладки</a></li>
                    <li id="settings"><a href="settings">Мои настройки</a></li>
                    <hr />
                    <li id="apps"><a href="apps">Мои приложения</a></li>
                    <li id="docs"><a href="docs">Мои документы</a></li>
                    <li id="pr"><a href="pr">Реклама</a></li>
                </ul>

CSS

/*User Navigation*/

#u_nav{
    display: block;
    float: left;
    width: 20%;
}
#u_nav ul{
    padding: 0;
    margin-left: 15px;
    margin-right: 5px;
}
#u_nav ul li{
    display: block;
    list-style: none;
    text-decoration: none;
    padding: 5px 0 5px 3px;
    width: 140px;
}
#u_nav ul li:hover{
    background-color: #d3e8fb;
}
#u_nav ul li a{
    color: #2B587A;
    text-decoration: none;
}