Dropdown using CSS - php

Question

I am making a dropdown menu on one of my menu item.
ie: | Home | About | Store | Contact |
I want to create a dropdown menu for say About page...but Whenever I try to add
<div id="snaznav"> Home
<ul>
<li>About
<ul>
<li><a href="#">Submenu1</li>
<li><a href="#">Submenu2</li>
<li><a href="#">Submenu3</li>
</ul>
</li>
</ul></div>
Every next menu item gets disturbed as:
Home | About
Store |
Contact |
I dont know..where the problem is?
My CSS code is:
#snaznav {
float:left;
height:42px;
top:151px;
width:670px;
}
#snaznav a {
float:left;
height:41px;
display:block;
}
#home {
background:url(http://www.abc.com/home.gif) no-repeat transparent;
background-position:0 -2px!important;
width:77px;
}
#about {
background:url(http://www.abc.com/about.gif) no-repeat transparent;
background-position:-78px -2px!important;
width:104px;
}
#store {
background:url(http://www.abc.com/storegif) no-repeat transparent;
background-position:-307px -2px!important;
width:82px;
}
#contactus {
background:url(http://www.abc.com/contact.gif) no-repeat transparent;
background-position:-388px -2px!important;
width:131px;
}
If you need anything to know, just say me !!

Answer 1

Can you rewrite your HTML Code this way:
HTML:
<div id="snaznav">
<ul>
<li>Home</li>
<li>
About
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
</ul>
</div>​
So that the CSS you can apply this way:
CSS:
#snaznav ul {border-bottom: 1px solid #999;}
#snaznav ul li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
#snaznav ul > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
#snaznav ul li a:hover {background: #ccc; border: 1px solid #999;}
#snaznav ul > li {display: inline-block; position: relative; border: 1px solid #fff;}
#snaznav ul > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
#snaznav ul > li:hover ul {display: block;}
#snaznav ul > li ul li {display: block;} /* Vertical Menu */
#snaznav ul > li ul li {display: inline-block;} /* Horizontal Menu */​
Fiddle: http://jsfiddle.net/VmHXb/1/ (Vertical) http://jsfiddle.net/VmHXb/3/ (Horizontal)