Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

Strange gap between menu items when nested

Hey Guys,

I'm trying to figure out how to solve the problem of a strange gap between my menu items that contain a nested list.  The nested list is a popout menu that is hidden from view using the left: -999em; css command.  The gap only appears when you mouse over the links and activate the popout menu.  

 Here is the code: TIA :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
#nav, #nav ul  {
/* all lists */
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 10em;
background: #fff; /* IE6 Bug */
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px 12px 3px 8px;
}

#nav a.top  {/* This adds a top border to the first item in the list */
display: block;
width: 10em;
background: #fff; /* IE6 Bug */
border-top: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px 12px 3px 8px;      
}
#nav li  {
/* all list items */
width: 10em; /* width needed or else Opera goes nuts */
}
#nav li ul  {
/* second-level lists */
position: absolute;
background: orange;
width: 10em;
margin: -10px 0 0 65px;
display: none;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul {
/* third-and-above-level lists */
margin: -1em 0 0 10em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
 /* lists nested under hovered list items */
left: auto; display: block;
}
</style>
<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>

</head>
<body>
<div id="nav">
  <ul>
  <li><a href="#">NFL</a><ul>
  <li><a href="#">AFC</a></li>
  <li><a href="#">NFC</a></li>
  </ul></li>
  <li><a href="#">Best</a>
   <ul>
   <li><a href="#">Patriots</a></li>
   <li><a href="#">Colts</a></li>
   </ul>
</li>
<li><a href="#">Worst</a>
   <ul>
   <li><a href="#">Rams</a></li>
   <li><a href="#">Falcons</a></li>
   </ul>
</li>
</ul>
</div>
</body>
</html>
0
deek22
Asked:
deek22
  • 2
  • 2
1 Solution
 
jagadeesh_motamarriCommented:
....it looks good in firefox though! Are you having problem only in IE7
0
 
deek22Author Commented:
Yes IE 7 and 6 are the problem
0
 
jagadeesh_motamarriCommented:
ok..see something like this will work for you...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JD Navigation</title>
<style type="text/css">

body
{
     font-family: verdana, helvetica, serif; font-size: 10px;
}
     
#nav, #nav ul
{
     padding: 0px;
     margin: 0;
     width : 160px;
}
     
#nav li
{
     list-style: none;
     padding: 0px;
     position : relative;
     float : left;
     line-height : 1.7em;
     margin-bottom : -1px;
}
     
#nav li ul
{
     position: absolute;
     visibility:hidden;
     left:auto;
     margin-left : 163px;
     margin-top : -1.85em;
}
     
#nav li a
{
     width: 160px;
     w\idth : 150px;
     display : block;
     font-weight: normal;
     color : white;
     text-decoration : none;
     background-color : #697CA9;
     border : 1px solid navy;
     padding : 0 5px;
}
     
#nav li a:hover
{
     color : red;
}


#nav li:hover ul ul, #nav li.sfhover ul ul
{
     visibility:hidden;
}
     
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul
{
     visibility:visible;
}

     
#content
{
     margin-left : 12em;
}

</style>

<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>

</head>


<body>


<ul id="nav">
     <li><a href="/countries.htm">Select your Destination</a>
     <ul>
          <li><a href="/europe.htm">Europe</a>
          <ul>
               <li><a href="/france.htm">France</a></li>
               <li><a href="/greece.htm">Greece</a></li>
               <li><a href="/germany.htm">Germany</a></li>
               <li><a href="/italy.htm">Italy</a></li>
               <li><a href="/portugal.htm">Portugal</a></li>
               <li><a href="/spain.htm">Spain</a></li>
               <li><a href="/roaming-in-the-uk.htm">UK</a></li>
          </ul></li>
          <li><a href="#">North America</a>
          <ul>
               <li><a href="#">USA</a></li>

          </ul></li>
          <li><a href="#">Africa</a>
          <ul>
               <li><a href="#">South Africa</a></li>

          </ul></li>
          <li><a href="#">Asia</a>
          <ul>
               <li><a href="#">China</a></li>
          </ul></li>
          <li><a href="#">Australasia</a>
          <ul>
               <li><a href="#">Australia</a></li>
          </ul></li>
     </ul></li>
     <li><a href="#">Data on the Move</a></li>
     <li><a href="#">Links</a></li>
</ul>

</body>
</html>

Ref: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_21175577.html
0
 
deek22Author Commented:
Thanks Jagadeesh.  The code points me in the right direction.

Thanks again.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now