Меню в шапке

[svetel]

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

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

 

[Garri]

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

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

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

[svetel]

да. именно вопрос как сделать этот элемент меню

[Garri]

как-то так

#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;
}

[svetel]

как-то так

#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;

}

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