Buenas, estoy haciendo una web y estoy en la parte del menu donde sera desplegable, el problema que tengo es que no se como colocar un fondo en degrade y con bordes redondeados en parte superior, les dejo el link para que vean la apariencia que quiero del menu.
http://www.munidesanmarcos.gob.pe/huayllabamba/
el primer menu es donde lo estoy trabajando en el segundo menu es una imagen es como quiero que quede con ese mismo ancho y apariencia.
Gracias de antemano por todo les dejo tambien mi css y mi html, necesito que me guien, que me den pautas de como hacerlo y se vea bien en IE como en Firefox
Gracias en verdad
-----------Codigo CSS-------------
UL#navmenu-h {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
WIDTH: 820px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
HEIGHT: 34px
}
UL#navmenu-h LI {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
DISPLAY: inline;
PADDING-LEFT: 0px;
FLOAT: left;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
POSITION: relative;
HEIGHT: 34px
}
UL#navmenu-h UL {
BORDER-RIGHT: 0px;
PADDING-RIGHT: 0px;
BORDER-TOP: 0px;
DISPLAY: none;
PADDING-LEFT: 0px;
LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
BORDER-LEFT: 0px;
WIDTH: 160px;
PADDING-TOP: 0px;
BORDER-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
POSITION: absolute; TOP: 24px
}
UL#navmenu-h UL:unknown {
CLEAR: both;
DISPLAY: block;
VISIBILITY: hidden;
FONT: 1px/0px serif;
HEIGHT: 0px;
content: "."
}
UL#navmenu-h UL LI {
DISPLAY: block! important;
FLOAT: left;
WIDTH: 160px
}
UL#navmenu-h A {
/* BORDER-RIGHT: #ccc 1px solid; */
PADDING-RIGHT: 30px;
BORDER-TOP: #fff 1px solid;
DISPLAY: block;
PADDING-LEFT: 6px;
BACKGROUND: #fff561;
FLOAT: none! important;
PADDING-BOTTOM: 0px;
FONT: bold 12px/22px Arial, Verdana, Helvetica, sans-serif;
/* BORDER-LEFT: #fff 0px solid; */
COLOR: #666;
PADDING-TOP: 0px;
/* BORDER-BOTTOM: #ccc 1px solid; */
HEIGHT: 34px;
TEXT-DECORATION: none
}
UL#navmenu-h A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI:hover A {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI.iehover A {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI:hover LI A {
BACKGROUND: #eee; FLOAT: none; COLOR: #666
}
UL#navmenu-h LI.iehover LI A {
BACKGROUND: #eee; FLOAT: none; COLOR: #666
}
UL#navmenu-h LI:hover LI A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover A {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI.iehover LI A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI.iehover LI.iehover A {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI A {
BACKGROUND: #eee; COLOR: #666
}
UL#navmenu-h LI.iehover LI.iehover LI A {
BACKGROUND: #eee; COLOR: #666
}
UL#navmenu-h LI:hover LI:hover LI A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover A {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI.iehover LI.iehover LI A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI.iehover LI.iehover LI.iehover A {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI:hover LI:hover LI:hover LI A {
BACKGROUND: #eee; COLOR: #666
}
UL#navmenu-h LI.iehover LI.iehover LI.iehover LI A {
BACKGROUND: #eee; COLOR: #666
}
UL#navmenu-h LI:hover LI:hover LI:hover LI A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h LI.iehover LI.iehover LI.iehover LI A:hover {
BACKGROUND: #ccc; COLOR: #fff
}
UL#navmenu-h UL UL {
DISPLAY: none; LEFT: 160px; POSITION: absolute; TOP: 0px
}
UL#navmenu-h UL UL UL {
DISPLAY: none; LEFT: 160px; POSITION: absolute; TOP: 0px
}
UL#navmenu-h LI:hover UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI.iehover UL UL {
DISPLAY: none
}
UL#navmenu-h LI.iehover UL UL UL {
DISPLAY: none
}
UL#navmenu-h LI:hover UL {
DISPLAY: block
}
UL#navmenu-h UL LI:hover UL {
DISPLAY: block
}
UL#navmenu-h UL UL LI:hover UL {
DISPLAY: block
}
UL#navmenu-h LI.iehover UL {
DISPLAY: block
}
UL#navmenu-h UL LI.iehover UL {
DISPLAY: block
}
UL#navmenu-h UL UL LI.iehover UL {
DISPLAY: block
}