Меню виде border-top

[coldug]

Помогите разобраться как сделать такое меню

Проблема при hover ,не получаеться прописать на одну линию ...

размер меню 375px.

Edited August 16, 2011 by coldug

[SelenIT]

Почему бы border-top'ом и не сделать? По дефолту сереньким, по :hover — перекрашивать...

[coldug]

так и делаю,но не получаеться сделать линию целой в 375пкс ,или :hover на одную линию с меню.

Я задаю размер всему меню,а :hover применяю к li и получаеться что :hover и линия меню на разных высотах...

[SelenIT]

так и дефолтный серый бордер к li применяйте, делов-то...

[coldug]

так делал тоже,но тогда длина меню получаеться по размеру элементов списка,а мне надо 375пкс

margin-разрывает элементы и появляються пробелы...

Edited August 16, 2011 by coldug

[MaferoK]

http://jsfiddle.net/4QRCD/15/

или так http://jsfiddle.net/4QRCD/16/

что бы падинги по бокам уже на своё усматрение добавить и отрегулировать длину линии

Edited August 16, 2011 by MaferoK

[psywalker]

http://jsfiddle.net/4QRCD/15/

или так http://jsfiddle.net/4QRCD/16/

что бы падинги по бокам уже на своё усматрение добавить и отрегулировать длину линии

Погоди, но это вроде косяк? Ведь по условиям должно быть так, чтобы именно полоски над самими ссылками показывались, а не над всем LI ?

[coldug]

http://jsfiddle.net/4QRCD/15/

или так http://jsfiddle.net/4QRCD/16/

что бы падинги по бокам уже на своё усматрение добавить и отрегулировать длину линии

Погоди, но это вроде косяк? Ведь по условиям должно быть так, чтобы именно полоски над самими ссылками показывались, а не над всем LI ?

можно просто применить a:hover и падинг только right ,но попробуй выглядит не лучше чем на li...

Edited August 16, 2011 by coldug

[psywalker]

http://jsfiddle.net/4QRCD/15/

или так http://jsfiddle.net/4QRCD/16/

что бы падинги по бокам уже на своё усматрение добавить и отрегулировать длину линии

Погоди, но это вроде косяк? Ведь по условиям должно быть так, чтобы именно полоски над самими ссылками показывались, а не над всем LI ?

можно просто применить a:hover и падинг только right ,но попробуй выглядит не лучше чем на li...

А я правильно понял условия?

И покажи скрины, как должно быть и как не должно.

[coldug]

Вот следующие пункты

На вариант от MaferoK тут похож,но от последнего элемента до конца меню больше отступ чем на макете получаеться.Если падингом сделать 375пкс меню.

Edited August 16, 2011 by coldug

[tius]

Как вариант: задать фиксированную ширину ul, а всем li раздать ширину в процентах.

[psywalker]

А вот так, чем не вариант http://jsfiddle.net/4QRCD/19/

[coldug]

А вот так, чем не вариант http://jsfiddle.net/4QRCD/19/

первый и последний элемент не весь выделяеться при :hovere

[psywalker]

А вот так, чем не вариант http://jsfiddle.net/4QRCD/19/

первый и последний элемент не весь выделяеться при :hovere

Ну а вот так: http://jsfiddle.net/4QRCD/20/

[Bonzash]

li{
    float: left;
 border-top:3px solid black;
}
li:hover {
    border-top: 3px solid red;
}
li:hover a{
    color: red;
}

[SelenIT]

А может, здесь наш фирменный способ с инлайн-блоками подойдет?

[coldug]

Всем спасибо,помогли выберу какой то из вариантов.