How to put images between menu items
After over an hour of trial and error, I have figured it out and thought I would share my newly acquired abilities. Lord knows if i've got/had this problem someone else has too.
The trick is to make it your background image on the links within the menu. Getting the positioning can be a little tedious, but that's just the way she goes.
This is the CSS for my menu:
HTML Code:
div#menu1 {
height: 36px;
margin-bottom:0px;
border:none;
background: transparent;
padding:0 0 0 110px !important;
}
div#menu1 ul.rMenu {
background: transparent;
border: none 0px;
padding-right:0px;
}
div#menu1 ul.rMenu li {
padding-left:0px;
}
ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li a:active,
ul.rMenu li {
background-color: transparent !important;
}
div#menu1 ul.rMenu li a,
ul.rMenu li a:hover{
border:none !important;
list-style-type: none;
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
padding:1em 2.5em 1em 1em;
background: url(http://www.montgomerytrees.org/wp-content/uploads/2013/11/menu-slash.jpg) no-repeat right center;
}
#menu-item-37 a{
background-image:none !important;
background:transparent;
padding-right:0;
width:15px;
}
You have to make sure that both the active AND hover link states are included in the CSS with the background image otherwise said image will disappear on hover.
I hope this helps someone!
