Amazing dropdown menu

[james438]

Ah, thanks for explaining.

[molendijk]

Crazykld69, I tried the code you posted in # 6. It has the same issue as the samsug and kathmandu for certain links in a very small window (240 px, 320px). You could deal with the image(s) by sizing it/them with percentages. As for text blocks (that open after the mouse hovers over a link), see this code and this blog.

[Bornfree]

Hi Guys,

I just need a little help. The text in the menu, i need it to be in the middle of the menu background image. (vertical align-centre). I cannot seem to figure that out. Can you please help me? Here is the link to my test page. http://www.elsema.com/menutest1.html

[jscheuer1]

Around line 121 in elsema.com/cs/global.css:

#ul_menu1 > li{
	float:left;
	height:35px;
	z-index:999;
	margin-left: 1px; /* Sets the space between each of the tabs */
	padding:7px 30px 0px 30px;
	background:url(../images/menubdr.jpg) right top no-repeat;
	
	
   
	
	
}

Make the change (red) in the highlighted line.

And, if the gap between the headers and the drop downs bothers you (I think it looks good), around line 145:

#ul_menu1 > li > div {
	display:none;
	margin:auto;
	position:absolute;
	z-index:999;
	background-color:#012e56; /* Changes background color */
	border:1px solid black; /*changes border color */
	margin-top:10px;
	border-radius:10px;
	margin-left: -20px;
	padding: 3px;
	max-width:100%;
	cursor: default;
	min-width: 200px;
	text-align: center;
	color: black; /*Color inside the div */
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Bornfree]

OMG, So easy. Thank you once again jscheuer1. Just another small issue. If you look closly, in the dropdown menu there is a small black dot in the top right hand corner. Can't seem to get rid og that. I guess its in the code somewhere.

[Bornfree]

Oops! found the mistake. Got it sorted. Thank you for all the help.

[Bornfree]

Ok i have another glitch. When mouseover the menu, the dropdown starts from the position of the menu on which you have your mouse, so when i go to the one on the right hand side, the dropdown gets vertical. Can i have it so that it always horizontal and move to the left if there is not enought room on the right? If you see this page http://www.elsema.com/menutest1.html and take mouse over the menu on the right you will see it.

[jscheuer1]

Unless I misunderstand, that's not a glitch. I believe that's the default layout for the menu. To get what I think you're saying you want, again in the global.css file, this time around line 140, add the two highlighted lines:

#ul_menu1 > li > div {
	display:none;
	margin:auto;
	position:absolute;
	z-index:999;
	background-color:#012e56; /* Changes background color */
	border:1px solid black; /*changes border color */
	margin-top:10px;
	border-radius:10px;
	left: 30px;
	margin-left: -30px;
	margin-right: 0px;
	padding: 3px;
	max-width:100%;
	cursor: default;
	min-width: 200px;
	text-align: center;
	width: 953px;
	color: black; /*Color inside the div */
}

[Bornfree]

Thanks jscheuer1. The menu seems to stick to the left. Can it be made so that it appears on the center of the menu (whichever the mouse is on)? Please have a look at menu two. The right side comes in. It looks funny. Can it be that the whole dropdown is centered but still within the page width.

Also on menu two and menu three the image does not change on mouseover. Where am i missing the code?

[jscheuer1]

That might take a little time to work out. I thought you just wanted them all left aligned.

Anyways, the reason the rollover only works on the first one is that there can only be one element with an id of img1 on the page. If you have more than one the code will either throw an error (older browsers) or pick the first one and use that. The latter must be what's happening. The rollover is working but the image that's changing cannot be seen. I just tested it and I can control the images on Menu One from Menu Two.

Each div whose image that you're changing must have it's own unique id and be referenced as such in the rollover events.

Like, on Menu Two you could have img1a, img2a, ect.