PDA

Click to See Complete Forum and Search --> : stuck drop down


colonel5
06-28-2007, 01:51 PM
In IE7 my drop down menu periodically gets stuck, meaning it will appear and then won't go away no matter where you roll your mouse. I can't figure out if it's the css or the javascript.

http://iotsolutions.com

The menu is the purple bar with the different logos on it (HP, Xerox, etc)

Any ideas would be appreciated

Here's the javascript


<script type="text/javascript">
// <![CDATA[

sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}

if (window.attachEvent) {
window.attachEvent("onload", sfHover);
}

// ]]>
</script>
<SCRIPT LANGUAGE='JavaScript'>
function openListBuilder(url)
{
popupWin = window.open(url, 'openWin', "width=400, height=250, scrollbars=yes, resizable=yes");
}
</SCRIPT>


Here's the css


/*CSS for Manufacturer Menu */

ul#Nav,
ul#Nav ul { /* all lists */
width: 800px;
margin: 0;
padding: 0;
list-style: none;
line-height: 13px;
}

a img {
border: none;
}

ul#Nav li.Top a.Top:link,
ul#Nav li.Top a.Top:visited {
display: block;
width: 133px;
height: 34px;
background-color:#FFFFFF;
}

ul#Nav li {
float: left;
/* width: 190px; width needed or else Opera goes nuts */
}

ul#Nav li ul.Section { /* second-level lists */
position: absolute;
background-image:url(../images/hp.jpg);
background-repeat:no-repeat;
border-top: 1px solid white;
margin-top: 0px;
height: 150px;
left: -1000em;
}
ul#nav img {
border: none;
}

ul#Nav li ul.Section1 { /* second-level lists *//*Xerox*/
position: absolute;
background-image:url(../images/xerox.jpg);
background-repeat:no-repeat;
border-top: 1px solid white;
margin-top: 0px;
height: 150px;
left: -1000em;
}

ul#Nav li ul.Section2 { /* second-level lists *//*Lexmark*/
position: absolute;
background-image:url(../images/lexmark.jpg);
background-repeat:no-repeat;
border-top: 1px solid white;
margin-top: 0px;
height: 150px;
left: -1000em;
}

ul#Nav li ul.Section3 { /* second-level lists *//*Ricoh*/
position: absolute;
background-image:url(../images/ricoh.jpg);
background-repeat:no-repeat;
border-top: 1px solid white;
margin-top: 0px;
height: 150px;
left: -1000em;
}

ul#Nav li ul.Section4 { /* second-level lists *//*Brother*/
position: absolute;
background-image:url(../images/brother.jpg);
background-repeat:no-repeat;
border-top: 1px solid white;
margin-top: 0px;
height: 150px;
left: -1000em;
}

ul#Nav li ul.Section5 { /* second-level lists *//*Samsung*/
position: absolute;
background-image:url(../images/samsung.jpg);
background-repeat:no-repeat;
border-top: 1px solid white;
margin-top: 0px;
height: 150px;
left: -1000em;
}

ul#Nav li:hover ul ul,
ul#Nav li.sfhover ul ul {
left: -1000em;
}

ul#Nav li:hover ul,
ul#Nav li.sfhover ul {
left: 1px;
}

ul.Section {
padding: 0px ! important;
width: 798px ! important;
}

ul.Section1 { /*Xerox*/
padding: 0px ! important;
width: 798px ! important;
}

ul.Section2 { /*Lexmark*/
padding: 0px ! important;
width: 798px ! important;
}

ul.Section3 { /*Ricoh*/
padding: 0px ! important;
width: 798px ! important;
}

ul.Section4 { /*Brother*/
padding: 0px ! important;
width: 798px ! important;
}

ul.Section5 { /*Samsung*/
padding: 0px ! important;
width: 798px ! important;
}

ul.Section li.Section {
width: 785px ! important;
padding: 13px;
}


ul.Section1 li.Section { /*Xerox*/
width: 785px ! important;
padding: 13px;
}

ul.Section2 li.Section { /*Lexmark*/
width: 785px ! important;
padding: 13px;
}

ul.Section3 li.Section { /*Ricoh*/
width: 785px ! important;
padding: 13px;
}

ul.Section4 li.Section { /*Brother*/
width: 785px ! important;
padding: 13px;
}

ul.Section5 li.Section { /*Samsung*/
width: 785px ! important;
padding: 13px;
}

ul#Nav ul.Section ul {
width: 420px;
height: 90px;
}
ul#Nav ul.Section1 ul { /*Xerox*/
width: 420px;
height: 90px;
}
ul#Nav ul.Section2 ul { /*Lexmark*/
width: 420px;
height: 90px;
}
ul#Nav ul.Section3 ul { /*Ricoh*/
width: 420px;
height: 90px;
}
ul#Nav ul.Section4 ul { /*Brother*/
width: 420px;
height: 90px;
}
ul#Nav ul.Section5 ul { /*Samsung*/
width: 420px;
height: 90px;
}
ul#Nav li.Section li {
width: 210px;
}

ul#Nav li ul.Section li ul li {
display: inline;
border: 0;
padding: 0;
}

ul#Nav li ul.Section li ul a:link,
ul#Nav li ul.Section li ul a:visited {
margin: 0;
padding: 2px 10px 2px 6px;
font-weight: normal;
line-height: 1.3em;
font-size: 11px;
color: #FDFDFD;
text-decoration: none;
white-space: nowrap;
}

ul#Nav li ul.Section1 li ul a:link,
ul#Nav li ul.Section1 li ul a:visited { /*Xerox*/
margin: 0;
padding: 2px 10px 2px 6px;
font-weight: normal;
font-size: 11px;
line-height: 1.3em;
color: #FDFDFD;
text-decoration: none;
white-space: nowrap;
}

ul#Nav li ul.Section2 li ul a:link,
ul#Nav li ul.Section2 li ul a:visited { /*Lexmark*/
margin: 0;
padding: 2px 10px 2px 6px;
font-weight: normal;
font-size: 11px;
line-height: 1.3em;
color: #FDFDFD;
text-decoration: none;
white-space: nowrap;
}

ul#Nav li ul.Section3 li ul a:link,
ul#Nav li ul.Section3 li ul a:visited { /*Ricoh*/
margin: 0;
padding: 2px 10px 2px 6px;
font-weight: normal;
font-size: 11px;
line-height: 1.3em;
color: #FDFDFD;
text-decoration: none;
white-space: nowrap;
}

ul#Nav li ul.Section4 li ul a:link,
ul#Nav li ul.Section4 li ul a:visited { /*Brother*/
margin: 0;
padding: 2px 10px 2px 6px;
font-weight: normal;
font-size: 11px;
line-height: 1.3em;
color: #FDFDFD;
text-decoration: none;
white-space: nowrap;
}

ul#Nav li ul.Section5 li ul a:link,
ul#Nav li ul.Section5 li ul a:visited { /*Samsung*/
margin: 0;
position:relative;
width: 250px;
padding: 2px 10px 2px 6px;
font-weight: normal;
font-size: 11px;
line-height: 1.3em;
color: #FDFDFD;
text-decoration: none;
white-space: nowrap;
}

ul#Nav li ul.Section li ul a:hover,
ul#Nav li ul.Section li ul a:active {
text-decoration: underline;
}

ul#Nav li ul.Section1 li ul a:hover,
ul#Nav li ul.Section1 li ul a:active { /*Xerox*/
text-decoration: underline;
}

ul#Nav li ul.Section2 li ul a:hover,
ul#Nav li ul.Section2 li ul a:active { /*Lexmark*/
text-decoration: underline;
}

ul#Nav li ul.Section3 li ul a:hover,
ul#Nav li ul.Section3 li ul a:active { /*Ricoh*/
text-decoration: underline;
}

ul#Nav li ul.Section4 li ul a:hover,
ul#Nav li ul.Section4 li ul a:active { /*Brother*/
text-decoration: underline;
}

ul#Nav li ul.Section5 li ul a:hover,
ul#Nav li ul.Section5 li ul a:active { /*Samsung*/
text-decoration: underline;
}

#manmenu {
position:absolute;
width: 800px;
height: auto;
left: 190px;
top: 95px;
}