image nav drop menu help please!

[DJ-FIZZLE]

Hey guys i need some help i created this nav with images and i wanna ad drop menu's to it.

HTML:


<!-- navbar --><ul id="menu"> <li id="logo"><a></a></li> <li id="home"><a href="#"></a></li> <li id="about"><a href="#"></a></li> <li id="store"><a href="#">service</a></li> <li id="service"><a href="#"></a></li> <li id="contact"><a href="#"></a></li> <li id="navbar"><a></a></li> </ul><!-- end of navbar -->



and

CSS:


ul#menu { width:1020px; list-style:none; height:60px; padding: 0 0 0 0; margin: 0 0 0 0;}ul#menu li {display:inline;}

ul#menu li a { height: 60px; float:left; text-indent: -9999px;}
ul#menu li#logo a { width: 304px; background:url(images/menu.png) no-repeat 0 0;}ul#menu li#home a {width:61px;background:url(images/menu.png) no-repeat -304px 0;}ul#menu li#home a:hover {background-position:-304px -60px;}ul#menu li#about a {width:102px;background:url(images/menu.png) no-repeat -365px 0;}ul#menu li#about a:hover {background-position:-365px -60px;}ul#menu li#store a {width:70px;background:url(images/menu.png) no-repeat -467px 0;}ul#menu li#store a:hover {background-position:-467px -60px;}ul#menu li#service a {width:84px;background:url(images/menu.png) no-repeat -537px 0;}ul#menu li#service a:hover {background-position:-537px -60px;}ul#menu li#contact a {width:93px;background:url(images/menu.png) no-repeat -621px 0;}ul#menu li#contact a:hover {background-position:-621px -60px;}ul#menu li#navbar a { width: 306px; background:url(images/menu.png) no-repeat -714px 0;}

[Tuts]

Sorry to be that guy but your code is incomprehensible.

Pop onto JSFiddle, paste your CSS into the CSS box (top right), paste your HTML top left and press TidyUp. That's more readable right? If you press Run, you'll see that the code you provided does nothing, so I'll propose a solution for you that won't necessary match your IDs/classes.

The logic of making a drop down menu is fairly simple.
Within ul#menu li#home (if you want a drop down menu on this list element), you'll need another ul li. So that's a UL LI within a UL LI (http://inception.davepedu.com/). Once the user hovers over li#home, display the inner UL LI.

Here's what I have made - http://jsfiddle.net/4jCzK/3/show/

<div class="JSFiddle">We <i class="icon-heart"></i> JSFiddle, right DJ-Fizzle?</div>
<nav>
<ul>
<li>Home</li>
<li>Projects
<ul>
<li>Web</li>
<li>iOS</li>
<li>Android</li>
<li>BlackBerry</li>
</ul>
</li>
<li>Contact</li>
<li>FAQ</li>
<li>Forum
<ul>
<li>Sign Up</li>
<li>Register</li>
<li>New Posts</li>
<li>Contact Admin</li>
</ul>
</li>
</ul>
</nav>

CSS


html, body {
height: 100%;
margin: 0 auto;
font-family:'Helvetica', sans-serif;
}
nav {
height: 50px;
width: 600px;
background: #000;
background: -webkit-linear-gradient(top, #AAA 0%, #000 75%);
background: -moz-linear-gradient(top, #AAA 0%, #000 75%);
background: -ms-linear-gradient(top, #AAA 0%, #000 75%);
background: -o-linear-gradient(top, #AAA 0%, #000 75%);
background: linear-gradient(top, #AAA 0%, #000 75%);
/* Can't be bothered with IE nor older versions of Safari for a demo */
margin: auto;
}
nav > ul {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
nav > ul > li {
display: inline-block;
width: 20%;
height: 100%;
float: left;
color: #FFF;
text-align: center;
line-height: 50px;
vertical-align: middle;
font-size: 0.75em;
position: relative;
}
div.info {
background: red;
width: 100px;
height: 100px;
}
nav ul li ul {
background: #000;
list-style: none;
margin: 0;
padding: 0;
display: none;
}
nav ul li:hover ul {
display: block;
}


Just realised that by adding the border radius to the nav, it looks rubbish. Hopefully this was what you were after.

[DJ-FIZZLE]

i wanna make it using images though is that possible?