Horizontal drop down menu problems?

HTML & CSS
1

I have been trying to make my horizontal drop down menu appear properly, but haven’t had much luck. Please have look at my html and css, and please tell me how I can fix it? I want the drop down menu to appear directly underneath “Product Range”, not in a line across the screen. Also I need the buttons to be within the horizontal bar, not appearing half inside and half outside the horizontal bar.

HTML and CSS

Thanks in advance.

2

I am unable to view video on this computer, Zarin Denatrose, however thanks for your help anyway.

RyanReese, having overflow:hidden; in the mainMenu class, is the only way I have made the horizontal bar appear in full. Do you know of another way of making the horizontal bar appear in full width and height? Everything else looks good.

3

Sorry we were so slow in responding, saturday night ;).

Do you have any more issues? You indicated you solved them.

4

I have just fixed the things which I needed to solve.

5

One more thing, the each page button appears bigger in height than the horizontal bar. Can someone please help me fix this?

Please see the previous reply as well.

6

The elements all positioning themselves to the right is likely caused by the rule .mainMenu ul li a{ float: left;}
I’d recommend taking a look at this screencast on nettuts: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
It explains how you can do this very easily. you can of course, style it for your needs. I hope this helps!

7

Hi, you are using a bad way of showing it, and you should be hiding it via a negative left margin, and setting that to 0 upon hover, also you had overflow:hiddens which 99% of hte time hides hte dropdowns, so you need a different containing technique (which I Have added)
Plus you need coordinates for the dropdown insstead of setting auto

And the dropdown didn’t have position:absolute so it was in the regular flow of the document.

Try this CSS

<style type="text/css">
<!--
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

body {
	text-align:center; /* center #pageWrapper IE 5.x */
	font:normal 85%/140% arial,helvetica,sans-serif;
	color: #FFF;
}

#pageWrapper {
	width:898px; /* 900px */
	margin:0 auto;
	color: #FFF;
	text-align: left;
	background: #FFF;
}

.mainMenu {
	background:url(images/topnavbg-main.gif) 0 8px no-

repeat;
	padding:8px 16px;
	height:1%; /* holly hack, trip haslayout, wrap 

floats IE */
}

.mainMenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 100%; /* Width of Menu Items */
}

.mainMenu ul li {
	display:inline; 
float:left;
	position: relative;
}

/* Drop down menu */
.mainMenu li ul {
	left: 0;top:100%;
	margin-left:-999em;position:absolute;
}
.mainMenu ul li li{float:none;display:block;}


/* Styles for Menu Items */
.mainMenu ul li a {
	display: block;
	float: left;
	text-decoration: none;
	color: #FFF;
	background: #06C url(images/btndown.gif); /* IE6 

Bug */
	padding: 10px;
}

.mainMenu ul li a:hover {
	display: block;
	text-decoration: none;
	color: #FFF;
	background: #3852E9;
	padding: 10px;
}

/* Holly Hack. IE Requirement \\*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

 /* The magic */
.mainMenu li:hover ul, .mainMenu li.over ul {
margin-left:0;
	background: #06C url(images/btndown.gif);
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
.clearfix{zoom:1;}
-->
</style>