Автор Тема: Скругление углов пунктов меню  (Прочитано 4284 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн zosya

  • Новичок
  • *
  • Сообщений: 1
  • +0/-0
    • Просмотр профиля
Скругление углов пунктов меню
« : 03 Июля 2013, 11:11:30 »
Здравствуйте. У меня такой вопрос: у меня есть меню, крайние активные пункты которого слева и справа соответственно должны скругляться. Когда все пункты меню помещаются в одну строку, я делала это с помощью first-child и last-child, а как можно сделать, если пунктов больше?

#menu {
margin-top:40px;
margin-left: 10px;
padding: 0;
list-style-type:none;
position:relative;
display:block;
width: 940px;
float:left;
background: /*url("img/checkbox.png") no-repeat*/ #181e21;
/*background-color: #181e21;*/
z-index: 100;
border-radius: 10px;
}

#menu li {
float:left;
display:block;
position:relative;

}
#menu li a {
display:block;
line-height:55px;
padding:0px 19px;
height:50px;
text-decoration:none;
color:rgb(228, 228, 228);
font-family: 'Courier_New', 'courier new', courier;
font-size: 13px;
text-transform:uppercase;
}

#menu li a:hover {
color:#888d8f;

}

#menu .current_page_item{
background: #2695c1;
display: block;
}

#menu li .current_page_item{
background: #2695c1;
}

#menu .current_page_item:first-child{
border-radius: 8px 0 0 8px;
-moz-border-radius: 8px 0 0 8px;
-webkit-border-radius: 8px 0 0 8px;
behavior: url(wp-content/themes/journalism/PIE/PIE.php);
}

#menu ul {
position:absolute;
display:none;
margin:0;
padding:0 10px 0 10px;
list-style:none;
z-index: 100;


}
#menu ul li {
min-width:170px;
height:50px;

/*border-bottom-style:dotted;
border-bottom-width:1px;
border-bottom-color:#333;*/
}

#menu ul li:first-child a,#menu ul li ul :first-child a {
padding-left:19px;
line-height:50px;
color:#fff;
background: #181e21;
}

#menu ul li a,#menu ul li ul a {
padding-left:19px;
line-height:50px;
color:#fff;
background: url(img/div.png) repeat-x #181e21;
text-transform: capitalize;
}

#menu ul a {
display:block;
height:50px;
padding:0px 5px 0px 5px;
color: #fff;
background-color:#181e21;
border:none !important;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
#menu ul a:active, #menu ul a:hover
{
border:none !important;
}

#menu ul a:active,#menu ul a:hover {
border:none !important;
}
#menu ul a:hover {
text-decoration:none;
color:#888d8f;
}

#menu ul li ul {
margin-left:170px;
position:absolute;
display:none;
padding:0px;
height:auto;
top:0px;
}
#menu ul li ul li {
width:170px;
}

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28