Why is this image unable to be viewed properly as a <ul> background?
===

[What I want to achieve.][1]

The white background image cannot be inserted into the `ul` navbar properly. The drop shadow and inner glow effect of the white background cannot be seen after insertion. 

[What is seen after Insertion.][2]

Html and CSS below.

   <!doctype html>

	<html>
		<head>
			<meta charset="UTF-8"/>
			<title> Foodstant Delivery </title>
			<link rel="stylesheet" type="text/css" media="screen" href="stylo.css" />
			<link rel="shortcut icon" href="images/favicon.ico" />
		</head>

	<body>
		<div id="container">

		<div id="navbar">
				<ul>
					<li class="OP"><a  href="Orders.html">Your Order</a></li>
					<li class="MP"><a  href="Menu.html">Menu</a></li>
					<li class="CUP"><a  href="ContactUs.html">Contact Us</a></li>
					<li class="JP"><a  href="Jobs.html" target="_blank">Jobs</a></li>
					<li class="TCP"><a  href="TC.html">Terms & Conditions</a></li>
				</ul>	
			</div>
		</div>
 
	</body>	

	</html> 

CSS :

	* {
		margin: 0;
		padding:0;
	}

	#navbar {
		background:url('images/navbarbg1.jpg');
		position: absolute;
		top: 300px;
		left: 150px;
		font-size: 26px;
	}

	#navbar ul li {		
			float:left;
			padding:0 60px 0 0; 
			list-style-type:disc;
			}

	#navbar ul li.OP {
			list-style-image:url('images/order.png');
	}	

	#navbar ul li.MP {
			list-style-image:url('images/menulogo2.png');
	}

	#navbar ul li.CUP {
			list-style-image:url('images/contact.png');
	}

	#navbar ul li.JP {
			list-style-image:url('images/Pen.png');
	}

	#navbar ul li.TCP {
			list-style-image:url('images/pin.png');
	}


  [1]: http://i418.photobucket.com/albums/pp270/ravenoz_bucket/navbarw.png "What I want to achieve"
  [2]: http://i418.photobucket.com/albums/pp270/ravenoz_bucket/wis1.png