1

Подскажите как сделать подсветку как на верхнем меню.

2 ответа 2

1

Все просто

body {
    background: #717171;
}
nav {
}
nav > ul {
    background: #828282;
    padding: 5px;    
    color: #fff;
    border-radius: 10px;
}
nav > ul > li {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
nav > ul > li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    margin: 0 3px;
    text-transform: uppercase;
    font-family: sans-serif;
    font-style: italic;
    border-radius: 10px;
}
nav > ul > li a:hover {
    background: #B7B7B7;
    color: #000;
}
<nav>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a></li>
        <li><a href="#">Menu 3</a></li>
    </ul>
</nav>

2
  • nav и *display в одном файле. о_О
    – Kyubey
    Commented 7 июн. 2015 в 19:34
  • это всего лишь пример. А так конечно, через условные комментарии - ie8.css
    – soledar10
    Commented 7 июн. 2015 в 19:39
0

А в чём, собственно, проблема? Ну примерно так можно:

body {
  background: #333;
}
div {
  background: #999;
  border-radius: 20px;
}
div::after {
  content: "";
  display: table;
  clear: both;
}
span {
  display: block;
  float: left;
  height: 20px;
  border-radius: 13px;
  padding: 3px 6px;
  margin: 3px;
  color: #fff;
}
span:hover {
  background: #ccc;
  color: #000;
}
<div>
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

3
  • Спасибо огромное кто ответил! второй вариант то что надо!
    – user182987
    Commented 7 июн. 2015 в 18:37
  • @user182987 Галочку у ответа не забудьте поставить. :)
    – Kyubey
    Commented 7 июн. 2015 в 19:22
  • Извините меня я просто тут в первые и пока не знаю что да как.
    – user182987
    Commented 7 июн. 2015 в 19:29

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.