Drop down menu problem in IE (only of course!)

Hi everyone!

I have a little issue with my drop down menu which I’m using from Dynamic Drive link here -

http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/P30/

The link to the website is here: http://www.weresolucky.com/pc/

This hover menu link is making the whole design be pushed down an inch only in IE. Here is what it looks like:

http://imgur.com/TPrn8

Any information would be great!

I’m also getting this error message when my webpage loads, how do I remove this error? :confused:

http://imgur.com/WbPUH

As for the 2nd error message. It’s because your Javascript is faulty. Head on over there after this and provide them your website and that image of hte error :).

Now onto the first…Never ever ever ever ever use Dynamic Drive scripts. From every script I’ve seen in the past, it’s complete crap :).

The Javascript is probably to blame. Do this. Replace your whole ddstyle.css file (whatever that name is) with this code. I modified it a good bit (it’s not perfect but it’s a heck of a lot better :))

.ddsmoothmenu {	font: bold 12px Verdana;
	background: #e46d18; /*background of menu bar (default state)*/
	width: 90%;
	margin: auto;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	padding: 0px 20px 0px 20px;
}
.ddsmoothmenu ul {
	z-index:100;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li {
	position: relative;
	display: inline;
	float: left;
}
.ddsmoothmenu li.right {
	position: relative;
	display: inline;
	float: right;
	list-style-type: none;
}
.ddsmoothmenu li.right a {
	display: block;
	background: #e46d18; /*background of menu items (default state)*/
	color: white;
	padding: 8px 10px;
	text-decoration: none;
	border-left: 1px solid #fff;
	
}
.ddsmoothmenu li.right a:hover {
	background: #ff8b38; /*background of menu items during onmouseover (hover state)*/
	color: white;
	
}


.ddsmoothmenu .rightselected a{
	background-color: #4f4f4f;
	display: block;
	color: white;
	padding: 8px 10px;
	text-decoration: none;
	border-left: 1px solid #fff;
	position: relative;
	display: inline;
	float: right;
	list-style-type: none;
}


.ddsmoothmenu .selected a{
background-color: #4f4f4f;


}
.ddsmoothmenu ul {
	position: relative;
	display: inline;
	float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a {
	display: block;
	background: #e46d18; /*background of menu items (default state)*/
	color: white;
	padding: 8px 10px;
	border-right: 1px solid #fff;
	text-decoration: none;
	
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
	color: white;
}
.ddsmoothmenu ul li a.selected { /*CSS class that's dynamically added to the currently active menu items' LI A element*/
	background: #ffb682;
	color: fff;
}
.ddsmoothmenu ul li a:hover {
	background: #ffb682; /*background of menu items during onmouseover (hover state)*/
	color: white;
}
.ddsmoothmenu ul li:hover ul
{
	margin:0;
}
.ddsmoothmenu ul li
{
	position:relative;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul {
	position: absolute;
	left: 0;
	margin-left:-999em;
	top:100%;
	
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li {
	display: list-item;


	position:static;
	float: none;
	opacity: 0.9;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul {
	top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a {
	font: normal 13px Verdana;
	width: 160px; /*width of sub menus*/
	padding: 5px;
	margin: 0;
	border-top-width: 0;
	border-bottom: 1px solid #fff;
}
/* Holly Hack for IE \\*/
* html .ddsmoothmenu {
	height: 1%;
} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images  ######### */


.downarrowclass {
	position: absolute;
	top: 12px;
	right: 7px;
}
.rightarrowclass {
	position: absolute;
	top: 6px;
	right: 5px;
}


/* ######### CSS for shadow added to sub menus  ######### */

If you want slow motion hover for it, find a jquery script for it (Jquerys site should have one ready to be gotten) :slight_smile:

Thanks for the reply Ryan, I’ve made a post on their forum and I will take your advice :slight_smile:

Could you tell me what you did with the CSS? So I have an understanding for next time. Thanks

Basically I set coordinates for the Absolutely positioned elements. Also I switched the way you displayed the dropdown. Well, you were relying on JS to do the dropdown, so I added CSS which would make it work without hover. I had to add a few things to make that work, such as position:relative on the top level <li>'s to be a stacking context for the dropdowns <ul>. Then I also added position:static to the dropdowns <li>'s to revert them back to normal since the top level was position:relative;

I think I may have done some little things but taht’s the gist of it :).

Hi again Ryan,

Well I don’t really see what you have done in the view of IE? It still makes the content drop down an inch :frowning:

I said not to use the Javascript but perhaps I should have been more specific :).

Remove the Javascript file for the dropdown.