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)
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 :).