issues with horizontal menu - html

Question

I have a weird problem with my horizontal drop down menu. Please find the code below.
My HTML Menu part looks like follows -
<div id="page-wrap">
<ul class="dropdown">
<li><img src="images/home.png" border="0"></li>
<li><img src="images/aboutus.png" border="0"></li>
<li><img src="images/profile.png" border="0">
<ul id="submenu">
<li id="firstItem"><img src="images/submenu_center_top.png"></li>
<li>Support Team</li>
<li id="lastItem"><img src="images/submenu_bottom.png"></li>
</ul>
</li>
<li><img src="images/activities.png" border="0">
<ul id="sub_menu">
<div><img src="images/submenu_center_top.png">
<li>Nutrition & Tips</li>
<div><img src="images/submenu_bottom.png"></div>
</ul>
</li>
<li><img src="images/shiningstars.png" border="0"></li>
<li><img src="images/testimonials.png" border="0"></li>
<li><img src="images/gallery.png" border="0">
<ul id="sub_menu">
<div><img src="images/submenu_center_top.png">
<li>Photo Gallery</li>
<li>Audio Visual Gallery</li>
<li>In Press</li>
<li>Articles</li>
<div><img src="images/submenu_bottom.png"></div>
</ul>
</li>
<li><img src="images/eventsnews.png" border="0">
<ul id="submenu">
<div><img src="images/submenu_center_top.png">
<li>Upcoming Events</li>
<div><img src="images/submenu_bottom.png"></div>
</ul>
</li>
<li><img src="images/contactus.png" border="0"></li>
</ul>
</div>
And my CSS file contains the following code:
#page-wrap {
width: 1004px; margin: 0;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
ul.dropdown {
position: relative;
}
ul.dropdown li {
font-weight: normal; float: left; zoom: 1; /*background: #ccc; */
}
ul.dropdown a:hover {
color: #fff;
}
ul.dropdown a:active {
color: #ffa500;
}
ul.dropdown li a {
display: block;
padding: 0px 0px 0px 0px;
/*border-right: 1px solid #333;
color: #000;*/
}
ul.dropdown li:last-child a {
border-right: none;
} /* Doesn't work in IE */
ul.dropdown li.hover, ul.dropdown li:hover {
background: #1C1C1C;
/*color: white;*/
position: relative;
}
ul.dropdown li.hover a {
color: black;
} /*LEVEL TWO*/
ul.dropdown ul {
width: 200px;
visibility: hidden;
position: absolute;
width: 100%;
top: 100%;
/*margin-left: -90px;*/
left: 0;
}
ul.dropdown ul li {
font-weight: normal;
font-size: 12px;
background: #333333;
color: #969696;
/*border-bottom: 1px solid #ccc;*/
border-left: 5px solid #969696;
border-right: 5px solid #969696;
/*float: left;*/
}
/* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a {
border-right: none;
width: 100%;
display: inline-block;
} /*LEVEL THREE*/
ul.dropdown ul ul {
left: 100%;
top: 0;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
#firstItem, #lastItem {
background: none;
border-left: none;
border-right: none;
}
.sub_menu {
float: center;
}
I have been getting weird results both in IE 8 and Chrome too. The alignment is just not happening. Can somebody pleas ehlp? I am relatively new to HTMl and CSS.
Thanks in advance!

Answer 1

There are a lot of different things going on here.
The simplest answer for you though, for your alignment issues, is that your ul#sub_menu has padding.
Zero out the padding with this:
.sub_menu { padding: 0px; }
[Update: Your html should use class="sub_menu" instead of id="sub_menu". Your html is invalid if you have more than 1 element with the same id]
A common practice these days is to start your CSS file with a bunch of "resets". This will change the default padding and margin for a bunch of common tags to 0, so that you don't end up with spacing issues when you don't desire them. For example, some resets I normally employ:
body, div, ul, ol, li, p, h1, h2, h3
{ padding: 0px; margin: 0px; }
Other things that might help you, that I notice in your code:
float: center is not valid. The only valid values are: left, right, both, none, inherit
ul.dropdown ul ul does not reference anything. You only have 2 levels of ul, but this selector references 3 ul deep. You probably got this CSS from a drop down menu example. If you don't need a 3rd level of drop downs, it's best to remove this CSS so as not to confuse yourself in the future.
visibility: hidden, visibility: visible, I suggest using display: none and display: block. The reason is, that visibility: hidden still takes up space on the page, even though it is invisible. display: none however, does not render the DOM element at all, and it will not take up page space
You have <div> elements as direct child elements of the <ul> tag in some of your sub-menu's. Only <li> elements are allowed as direct children
You have some elements named sub_menu and some named submenu. You need to have consistent names if you want the styles to be applied correctly.
Here is a jsFiddle with your code, and all the changes I mentioned. I added width to your li and background colors to help see what was going on.