Задать вопрос

Помогите с вёрсткой менюшки

Пытаюсь сверстать горизонтальное меню с круглыми углами в первом и последнем пункте.
Упёрся в то, что при наведении курсора на первый или последний пункт меню скругления пропадают. Не понимаю, почему…
index.html
<body>
		<h1>Site.ru</h1>
			<ul>
				<li id="first"><a href="#">Главная</a></li>
				<li><a href="Uslugi.html">Услуги</a></li>
				<li id="last"><a href="Contacts.html">Контакты</a></li>
			</ul>
</body>


styles.css
body {
	background: #fff;
}
ul {
    display: table;
    width: 100%;
    padding: 0;
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
    font-size:13px;
}
li {
    display: table-cell;
    background: #353535;
}
li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 6px 12px;
    text-align: center;
}
li :hover {
    background-color: #404040;
    color: #fff;
}
#first {
	border-radius: 10px 0 0 10px;
 	border-left: none;
}
#last {
	border-radius:0 10px 10px 0;
 	border-right:none;
}

Буду очень благодарен за помощь… замучился…
  • Вопрос задан
  • 4029 просмотров
Подписаться 4 Оценить Комментировать
Решения вопроса 1
li :hover — для «наведённых» элементов внутри li
li:hover — для «наведённого» li

Если убрать пробел, то, кажется, будет то, что вам нужно
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы