Как сделать полосу над пунктами меню?

Question

[istasiik]

Нужно сделать такое меню.

Серые пункты уже готовы. Как сделать линию над ними, часть у которой закрашивается при активации определенного пункта? Пока есть такое

HTML:

<div class="nav">
		<ul>
          <li><a href="#">Ваши комплекты</a></li>
          <li><a href="#">Самое популярное</a></li>
          <li><a href="#">Избранное</a></li>
    	</ul>
    	</div>

CSS:

.container .nav {
position: relative;

}

.container .nav a {
	color: #aaaaaa;
	padding: 0px 46px 0px 0px;

}

.container .nav ul{
	padding-left:8px;
	padding-bottom:15px;
}

.container .nav li {
    display: inline;
	
    color: #aaaaaa;
    font-size: 11px;
  	font-family: 'proxima_nova_bold'; 
  	
  	text-transform: uppercase;
  	letter-spacing: 3px;
}

Answer 1

[Евгений Петров]

Как сделать появляющуюся черту с анимацией в CSS?

Answer 2

[Назар Мокринский]

border-top?

Answer 3

[Push Pull]

jsfiddle

Comments

[Евгений Петров]

Мне кажется, что если рамка уже нарисована в li, то логичнее при наведении просто менять её цвет

.nav li:hover {
    border-color: #333;
}
.nav li:hover a {
    color: #333;
}

[Push Pull]

как я понял из приведенного примера нужна рамка по ширине текста, т.е. ссылки, а не елемента списка

[istasiik]

Спасибо вам большое!

[istasiik]

@deadbyelpy Спасибо вам! А как можно изменить ширину серой полоски?

Answer 4

[Анна Бакурова]

Решение ul { border-top: 1px solid @color } li { margin-top: -1px; border-top: 1px solid transparent; } li:hover { border-top-color: @color; }

Comments

[istasiik]

Спасибо за вариант! Я уже сделал таким вот образом
CSS:
.container .nav {
position: relative;
}
.container .nav a {
color: #aaaaaa;
}
.container .nav li {
display: inline;
color: #aaaaaa;
font-size: 11px;
font-family:'proxima_nova_bold';
text-transform: uppercase;
letter-spacing: 3px;
margin-left: -5px;
border-top: 1px solid #dddddc;
padding-top: 23px;
padding-right: 46px;
width: 100%;
}
a {
margin: 0;
padding-top: 23px;
}
.nav li:hover a {
border-top: 1px solid #333;
color: #333;
}

.container .nav ul{
padding-left:11px;
padding-bottom:10px;
padding-top: 23px;
}

Но серая линия не доходит до конца. Как можно это исправить?

[Анна Бакурова]

@istasiik конечно не доходит, так как у вас всё к li привязано а нужно к .nav у которого width 100% а потом для каждого li пишите margin-top: -1px (равен высоте border .nav) и border 1px solid transparent а потом для активного li просто задаёте цвет тёмно синий. Если Вам не ясно могу написать краткий код

[Анна Бакурова]

@istasiik "так как у вас всё к li привязано" это Я про border-top: 1px solid #dddddc;

[Анна Бакурова]

@istasiik вот посмотрите тут есть менюшка похожая test.cuberto.ru/Jeff/28.html там где Waiters, Managers, Admins

[istasiik]

@Libris Спасибо! Я, кажется, понял. Только вот что означает: "Для каждого li"? Для каждого нужно отдельный div прописать?

[Анна Бакурова]

@istasiik это значит ul { border-top: 1px solid @color } li { margin-top: -1px; border-top: 1px solid transparent; } li:hover { border-top-color: @color; }

[istasiik]

@Libris Спасибо вам огромное!

[Анна Бакурова]

@istasiik не за что! если действительно помогло, то отметьте как решение...

[Илья Казначеев]

@Libris я все время попадаю в комменты про css :)

[Анна Бакурова]

@istasiik Благодарю)

[istasiik]

@Color я сразу подумал об этом, когда увидел код xD

[Анна Бакурова]

@Color ахахаха да в мои Вы зачастили. Ок больше не буду)))

[Илья Казначеев]

@Libris я шучу) пользуйтесь на здоровье)