apply background image to vertical submenu - html

Question

I have an image I would like to apply to a submenu:
I have added css to apply it but is not working, How can I achieve something like?:
instead of
I have tried to put submenu to the left padding left <ul class="sub-menu" style="padding-left: -30px;"> but it does not work, to apply image I added
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
But that does not work.
Here is html
<div id="menu">
<nav>
<ul style="padding-left: 0px;">
<li>menu 1
</li>
<li>menu 2
<ul class="sub-menu" style="padding-left: -30px;">
<li>1 submenu
</li>
<br/>
<li>2 submenu
</li>
<br/>
<li>3 submenu
</li>
<br/>
<li>4 submenu
</li>
<br/>
</ul>
</li>
<li>menu 3
</li>
<li>menu 4
</li>
<li>menu 5
</li>
<li>menu 6
</li>
<li>menu 7
</li>
</ul>
</nav>
</div>
here is css:
#menu {
width: 100%;
-webkit-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
box-shadow: 0px 1px 1px 0px rgba(250, 250, 250, .5);
padding-top: 15px;
}
hgroup, main, nav {
margin-bottom: 30px;
width: 100%;
background: -moz-linear-gradient(top, #353535 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #353535), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #353535 0%, #222222 100%);
background: -o-linear-gradient(top, #353535 0%, #222222 100%);
background: -ms-linear-gradient(top, #353535 0%, #222222 100%);
background: linear-gradient(top, #353535 0%, #222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#353535', endColorstr='#222222', GradientType=0);
border-top:1px solid #000;
border-bottom:1px solid #000;
}
nav ul {
height: 45px;
margin: 0 auto;
}
nav li {
float: left;
list-style-type:none;
}
nav li a {
display: inline-block;
width:auto;
padding: 0 12px;
height: 45px;
font: bold 14px'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
border-left: 1px solid #444;
border-right: 1px solid #111;
background-color:#2B2B2B;
}
nav li a:hover {
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #444), color-stop(100%, #222));
background: -webkit-linear-gradient(top, #444 0%, #222 100%);
background: -o-linear-gradient(top, #444 0%, #222 100%);
background: -ms-linear-gradient(top, #444 0%, #222 100%);
background: linear-gradient(top, #444 0%, #222 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444', endColorstr='#222', GradientType=0);
}
nav li a:active {
background: #222;
-webkit-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 3px 1px rgba(0, 0, 0, .3);
}
nav li a:active:after {
content:"";
display: block;
width: 100%;
height: 4px;
position: relative;
bottom: 6px;
background: -moz-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5e1f), color-stop(100%, #ff3410));
background: -webkit-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -o-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: -ms-linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
background: linear-gradient(top, #ff5e1f 0%, #ff3410 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5e1f', endColorstr='#ff3410', GradientType=0);
}
#menu ul.sub-menu {
display: none;
position: absolute;
}
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
#menu ul.sub-menu li a {
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: #FFF;
background-color: #b80063;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
HERE IS jsfiddle

Answer 1

Made a couple changes which you can find here:
http://jsfiddle.net/wWx6f/
LexLusa's answer had the right idea but it was incomplete but I do want to give him/her credit. Like he said you can't just add the styling to each li or else the background gets applied to each list item.
You also need to remove this block because you no longer want the borders
/* Removed this because you don't want borders anymore
#menu ul.sub-menu li {
width: 200px;
border-width: 0 1px 1px 1px;
border-style: solid;
}
*/
Another issue that would come up was that because your submenus received the same styling as your main menu, it would get the black/gray box. In order to avoid this, you should make the styling more specific so the styling does not trickle down. You can do this by using the child operator
nav > ul > li > a {
However, you still wanted some of these stylings like the font text and the lineheight, so I simply added them in. I'm sure there is a more elegant solution but for now this works. If you want other stylings you can just add it here too.
/* copied stylings from parent */
#menu ul.sub-menu li a {
font: bold 14px'Arial', sans-serif;
color: #fff;
text-decoration: none;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
line-height: 48px;
text-shadow: 1px 1px 0px #111;
filter: dropshadow(color=#111, offx=1, offy=1);
}

Answer 2

You have to apply the background to the <ul>, not the <li>'s.
Givbe it a min-height to see the full bg-image and don't use the element style with the nagative padding.
#menu ul.sub-menu {
display: none;
position: absolute;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
min-height: 264px;
margin: 0;
padding: 0;
}
Here you go:
http://jsfiddle.net/qGX5U/1/

Answer 3

Have you tried to set the background at the UL level? and then the LI's background: transparent? You could also set the UL background as a cover, like in http://css-tricks.com/perfect-full-page-background-image/?

Answer 4

First of all change this
#menu ul.sub-menu li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}
to
#menu > ul > li {
width: 200px;
background: no-repeat url(http://www.eurekavi.com/amores/images/menu.png);
border-width: 0 1px 1px 1px;
border-style: solid;
}