Это основной код в блок:
Код: выделить всё
CSS:
Код: выделить всё
#menu_l {
max-width: 250px; /* Должно быть меньше ширины контейнера */
}
#menu_l ul, #menu_l ul li {
margin:0;
padding:0;
list-style:none;
}
#menu_l ul li {
overflow:hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#menu_l ul li a {
color: #545252;
font-size: 13px;
font-family: sans-serif;
line-height: 35px;
display:inline;
white-space:nowrap;
overflow:hidden;
padding-left: 8px; /* Отступ слева основной */
text-decoration:none;
}
#menu_l ul li a:hover {
padding-left: 10px; /* Эффект отступа при наводке */
text-decoration:none;
}
#menu_l ul li i {
padding-right: 8px; /* Отступ у иконки пунктов меню */
}
Также пользователь -SAM- дал стили, которые, возможно, больше по дизайн понравятся... в общем, есть выбор - здесь смотрим, что дописать еще в CSS:
Код: выделить всё
/* Дополнительные стили (можно не применять) */
#menu_l ul {
border:1px solid #a7a6a6;
}
#menu_l ul li {
border-bottom:1px solid #a7a6a6;
}
#menu_l ul li:nth-child(odd) {
background-color:#ffffff;
}
#menu_l ul li:nth-child(even) {
background-color:#f1f1f1;
}
#menu_l ul li:last-child {
border-bottom:none;
}
#menu_l ul li a {
display:block;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* Еще стили на цвет при наводке */
#menu_l ul li a:hover {
background-color: #F5F6FA;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-o-transition: 200ms;
transition: 200ms;
color:#ff0000;
}
#menu_l ul li a:hover i {
color:#0000ff;
}
/* --- */