2013-08-14 3 views
0

У меня есть эта строка меню: http://jsfiddle.net/Qn3kh/1/
кода:
Css:Строка меню на активном и по наведению

ul#menu { 
    position: absolute; 
    width: 100%; 
    min-width: 1180px; 
    height: 35px; 
    background-color: rgb(25, 25, 25); 
    text-align: center; 
    line-height: 2px; 
} 
#menuborders1{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 6px; 
    bottom: 6px; 
    border-top: 3px solid rgb(30, 174, 206); 
    border-bottom: 3px solid rgb(30, 174, 206); 
} 
#menuborders2{ 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    top: 5px; 
    bottom: 5px; 
    border-top: 1px solid rgb(255, 136, 0); 
    border-bottom: 1px solid rgb(255, 136, 0); 
} 
ul#menu li { 
    display: inline-block; 
    margin-right: -3px; 
} 
ul#menu li a { 
    position: relative; 
    text-decoration: none; 
    font-family: Arial; 
    padding: 10px 75px 7px 75px; 
    color: #fff; 
} 
ul#menu li.current a { 
    color: rgb(25, 25, 25); 
    background-color: #1EAECE; 
} 
ul#menu li a:hover { 
    color: rgb(25, 25, 25); 
    background-color: #FF8800; 
} 

Html:

<ul id="menu"> 
    <div id="menuborders1"> 
    <div id="menuborders2"> 
     <li class="current"><a href="#" data-id="div1">Description</a></li> 
     <li><a href="#" data-id="div2">Shipping and payment</a></li> 
     <li><a href="#" data-id="div3">Returns</a></li> 
     <li><a href="#" data-id="div4">Feedback</a></li> 
    </div> 
    </div> 
</ul> 

Вы можете видеть, что при наведении на активном кнопка css изменится на: стиль зависания, я хочу, чтобы он не менялся, активная кнопка получила свой стиль, а зависание получило свой стиль

+1

Почему вы отправляете одни и те же вопросы несколько раз. http://stackoverflow.com/questions/18227561/styling-menu-bar-css – Rex

ответ

2

http://jsfiddle.net/Qn3kh/3/

Обновленный CSS:

ul#menu li:not(.current) a:hover{ 
    color: rgb(25, 25, 25); 
    background-color: #FF8800; 
} 

вместо

ul#menu li a:hover{ 
    color: rgb(25, 25, 25); 
    background-color: #FF8800; 
} 
+0

Большое спасибо –

+1

Просто помните, что я должен помнить при использовании вышеуказанного css. : не совместим со старым браузером. Отличное и аккуратное решение тем не менее – AdityaSaxena

1

Там ваш ответ приятель :)

http://jsfiddle.net/Qn3kh/6/

Добавлен следующий CSS:

ul#menu li.current a, 
ul#menu li.current a:hover{ 
    color: rgb(25, 25, 25); 
    background-color: #1EAECE; 
} 
+0

Спасибо за ответ, это решение лучше? 'ul # menu li: not (.current) a: hover' или ваш? –

+0

Это хорошее решение для современных браузеров, но: не будет работать в более старом браузере. В старых браузерах то, что я предложил, также будет работать. @ арбитра является хорошим решением, тем не менее – AdityaSaxena

Смежные вопросы