Фоновый ролловер при горизонтальной навигации с вертикальными разделителями - PullRequest
Новая
       14

Фоновый ролловер при горизонтальной навигации с вертикальными разделителями

1 голос
/ 27 ноября 2011

У меня есть навигация, построенная таким образом: 

<ul class='mainnav'>
<li><a href="#"> Link 1 </a></li>
<li><a href="#"> Link 2 </a></li>
<li><a href="#"> Link 3 </a></li>
</ul>

, и у меня есть небольшая рамка справа от каждого элемента.Граница не проходит полностью сверху вниз, поэтому я поместил ее в тег <a> вместо <li>

Теперь, в состоянии «selected» моей навигации, я хочуфон <li> меняется на другой цвет, но я сталкиваюсь с 2 проблемами:

  1. мои <li> и мои <a> имеют разную ширину.
  2. в Chrome, он меняет фон в <a>, несмотря на мои добрые намерения.

Вот мой css.Буду признателен, если кто-то знает, как это сделать, борется в течение нескольких дней ... 

#navigation{background-color:#294964; width:100%; height:40px; display:block;}
#navigation ul.mainnav{height:35px; display:block; margin:0; }
#navigation ul.mainnav li{display:inline; cursor: pointer; height: 40px;  line-height:40px;margin:0px; padding:12px 0;}
#navigation ul.mainnav li a{ border-right: 1px solid #49647B; color: #FFFFFF;  padding:     4px 15px; text-decoration: none; width:100%; font-size: 14px; }
#navigation ul.mainnav li a:hover{ color: #a4a47e;}
#navigation ul.mainnav li.selected {background-color:#0b1b32;}

Ответы [ 3 ]

1 голос
/ 27 ноября 2011

a в элементе "inline", значение дает display:block, поэтому можно применять ширину, поля, отступы и т. Д.

0 голосов
/ 28 ноября 2011

Лучше всего на самом деле воздержаться от установки каких-либо размеров для элементов <li>, а вместо этого применять все из них в теге <a>.Таким образом, вся часть элемента навигации будет интерактивной и будет меняться при наведении курсора.

HTML: 

<ul class='mainnav'>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li class="selected"><a href="#">Link 3</a></li>
</ul>

CSS: 

.mainnav { 
    background-color: #294964; 
    font-size: 14px;
    width: 100%; 
    height: 40px; 
    margin: 0;
    padding: 0;
    list-style: none;
    display: block; }
.mainnav li { 
    float: left;
    margin: 0; }
.mainnav li a { 
    color: #fff;  
    text-decoration: none;
    height: 29px; /* 40 - 11 */
    padding: 11px 15px 0;
    border-left: 1px solid #49647B;
    display: block; }
.mainnav li:first-child a { border-left: 0; }
.mainnav li a:hover, .mainnav li.selected a {
    background-color: #0b1b32;
    color: #a4a47e; }

Предварительный просмотр:http://jsfiddle.net/Wexcode/NR9az/

0 голосов
/ 27 ноября 2011

Используйте блок или встроенный блок для отображения элементов.

...