PDA

View Full Version : CSS menu gradient background



donrtowery
Jan 14th, 2009, 06:38 PM
I'm trying to add a gradient background image to my navigation menu but I cant get it to work. Where should I add this and am I using the correct syntax? If someone can help me get the root of the menu squared, I think I can handle the rest.


/* Root = Vertical, Secondary = Vertical */
ul#navmenu,
ul#navmenu li,
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px; /*For KHTML*/
list-style: none;
}

ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
float:left;
position: relative;
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
display: block;
background: grey url(bg1.gif) top left repeat-x;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 100%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
background: #EEE;
color: #666;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul,
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

jcdevelopment
Jan 14th, 2009, 07:05 PM
ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
float:left;
position: relative;
background: grey url(bg1.gif) top left repeat-x;
}


try that.

donrtowery
Jan 14th, 2009, 07:51 PM
still didnt work :/

I tried this also, and still nothing

ul#navmenu li {
display: block !important; /*For GOOD browsers*/
display: inline; /*For IE*/
float: right;
position: relative;
background-image: url(bg1.gif);
background-repeat: repeat-x;
}

jcdevelopment
Jan 14th, 2009, 07:52 PM
are you sure your image path is correct?

nateymax
Jan 15th, 2009, 03:15 AM
Yeah I would double check to make sure it is in the same directory if not it should read more like url(../bg1.gif) or url(../images/bg1.gif)

abduraooft
Jan 15th, 2009, 07:34 AM
Yeah I would double check to make sure it is in the same directory if not it should read more like url(../bg1.gif) or url(../images/bg1.gif)Please post a link to your page.