Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Recommended Posts

Доброго времени суток!

Как можно сделать вот такое вот меню?

качаете версию 1.4.9 ставите на локалку, открываете фаербаг и копируете, или у вас вопрос по какому-то конкретному элементу?

Надіслати
Поділитися на інших сайтах


как-то так

#menu {
border-bottom: 2px solid #BFA447;
height: 39px;
margin-bottom: 15px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu > ul > li > a {
color: #494D56;
display: block;
font-family: Arial;
font-size: 12px;
font-weight:bold;
line-height: 14px;
margin-bottom: 5px;
padding: 12px 20px;
position: relative;
text-decoration: none;
z-index: 6;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
border-top-right-radius: 5px;
border-top:1px solid #C2CFE0;
border-left:1px solid #C2CFE0;
border-right:1px solid #C2CFE0;


}
#menu > ul > li > a.active{
background:#494D56;
color:#fff;
}
#menu > ul > li:hover > a {
border-top:1px solid #BFA447;
border-left:1px solid #BFA447;
border-right:1px solid #BFA447;
background:#fff;
padding-bottom:14px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
top:40px;
z-index: 5;
padding: 5px;
border:1px solid #BFA447;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #3374FF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #eeeeee;
}
#menu > ul > li > div > ul > li > a {
color: #3374FF;
}

  • +1 1
Надіслати
Поділитися на інших сайтах


как-то так

#menu {

border-bottom: 2px solid #BFA447;

height: 39px;

margin-bottom: 15px;

}

#menu ul {

list-style: none;

margin: 0;

padding: 0;

}

#menu > ul > li {

position: relative;

float: left;

z-index: 20;

}

#menu > ul > li > a {

color: #494D56;

display: block;

font-family: Arial;

font-size: 12px;

font-weight:bold;

line-height: 14px;

margin-bottom: 5px;

padding: 12px 20px;

position: relative;

text-decoration: none;

z-index: 6;

-moz-border-radius-topleft: 5px;

-webkit-border-top-left-radius: 5px;

border-top-left-radius: 5px;

-moz-border-radius-topright: 5px;

-webkit-border-top-right-radius: 5px;

border-top-right-radius: 5px;

border-top:1px solid #C2CFE0;

border-left:1px solid #C2CFE0;

border-right:1px solid #C2CFE0;

}

#menu > ul > li > a.active{

background:#494D56;

color:#fff;

}

#menu > ul > li:hover > a {

border-top:1px solid #BFA447;

border-left:1px solid #BFA447;

border-right:1px solid #BFA447;

background:#fff;

padding-bottom:14px;

}

#menu > ul > li > div {

display: none;

background: #FFFFFF;

position: absolute;

top:40px;

z-index: 5;

padding: 5px;

border:1px solid #BFA447;

-webkit-border-radius: 0px 0px 5px 5px;

-moz-border-radius: 0px 0px 5px 5px;

-khtml-border-radius: 0px 0px 5px 5px;

border-radius: 0px 0px 5px 5px;

}

#menu > ul > li:hover > div {

display: table;

}

#menu > ul > li > div > ul {

display: table-cell;

}

#menu > ul > li ul + ul {

padding-left: 20px;

}

#menu > ul > li ul > li > a {

text-decoration: none;

padding: 4px;

color: #3374FF;

display: block;

white-space: nowrap;

min-width: 120px;

}

#menu > ul > li ul > li > a:hover {

background: #eeeeee;

}

#menu > ul > li > div > ul > li > a {

color: #3374FF;

}

Благодарю. Именно то что я и искал

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.