Подскажите как сделать подсветку как на верхнем меню.
2 ответа
Все просто
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>
-
-
это всего лишь пример. А так конечно, через условные комментарии - ie8.css Commented 7 июн. 2015 в 19:39
А в чём, собственно, проблема? Ну примерно так можно:
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>
-
Спасибо огромное кто ответил! второй вариант то что надо! Commented 7 июн. 2015 в 18:37
-
-
Извините меня я просто тут в первые и пока не знаю что да как. Commented 7 июн. 2015 в 19:29