Пытаюсь сверстать горизонтальное меню с круглыми углами в первом и последнем пункте.
Упёрся в то, что при наведении курсора на первый или последний пункт меню скругления пропадают. Не понимаю, почему…
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;
}
Буду очень благодарен за помощь… замучился…
Простой
Средний
