My second submenu will not drop down

HTML & CSS
1

I’m trying to add a second submenu to this site I’m working on, yet I can’t figure out what I’m doing wrong. When I hover over the “Hazardous Materials” submenu, nothing drops down (over). I’m pretty sure it has to do with the css, so if someone could take a look I would really appreciate it!

Here’s a portion of the HTML. Sorry it’s really messy (I didn’t do most of it).

<div class="menu" id="sections">
    <ul>
      <li>
      <a href="biosafety/index.htm">Biosafety</a>      </li>

          </a> 


      </li>
      
      
      
      
<li>
      <a href="environmental/index.htm"> <span class="invisible"><b>&raquo;</b></span>Environmental
          </a> 
 
      <ul> 
      <li>
      <a href="hazmat/index.htm"><span class="subsubmenu"><b>&raquo;</b></span>Hazardous Materials</a>
      </li>
      
      <ul>
        <li>
        <a href="hazmat/chemical.htm">Chemical Waste</a>        </li>
        <li>
        <a href="hazmat/transport.htm">DOT Training</a>        </li>
        <li>
        <a href="hazmat/hmis.htm">Info Sheets</a>        </li>
        <li>
        <a href="hazmat/msds.htm">M.S.D.S.</a>        </li>
        <li>
        <a href="hazmat/radioactive.htm">Radioactive Waste</a>        </li>
        <li>
        <a href="hazmat/toxic.htm">Toxic Substance Control</a>        </li>
         <li>
        <a href="emergency/rtka.htm">Right-To-Know Act</a></li>
</ul>
   
    <li>
        <a href="environmental/bustr.htm">B.U.S.T.R.</a>        </li>
        <li>
        <a href="environmental/ems.htm">Management Systems</a>        </li>
        <li>
        <a href="http://www.ohio.edu/ecohouse/">OHIO Ecohouse</a>        </li>
        <li>
        <a href="http://www.ohio.edu/sustainability/">Resource Conservation</a>        </li>
      </ul>

      </li>
      
      <li>
        <a href="ergonomics/index.htm">Ergonomics</a>
        </li>

  </div>

And the CSS

.menu { font-size: 13px; font-family:  Arial, sans-serif; }
.menu ul { margin: 0; padding: 0pt; position: relative; z-index: 500; list-style-type: none; width: 255px; }
.menu li { background-color: #f4f3f2; float: left; }
.menu li.current {color: #ffffff; font-weight:normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; background-color: #7c7369;}
.menu li.current a{color:#FFFFFF; border-bottom: 1px solid #7C7369; border-top: 1px solid #7C7369; border-right: 1px solid #7C7369; border-left: none; }
.menu li.current li > a{color:#7c7369; border-bottom: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-left: none;     }
.menu li.current li.current > a{color:#ffffff; border-bottom: 1px solid #7C7369; border-top: 1px solid #7C7369; border-right: 1px solid #7C7369;}
.menu li.current li > a:hover{color:#ffffff; border-bottom: 1px solid #7C7369; border-top: 1px solid #7C7369; border-right: 1px solid #7C7369; border-left: none; }
.menu li.sub { background-color: #ffffff; }
.menu table { position: absolute; border-collapse: collapse; top: 0pt; left: 0pt; z-index: 100; font-size: 1em; margin-top: -1px; }
.menu a{ border-bottom: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6; border-right: 1px solid #E6E6E6; border-left: none; display: block; text-decoration: none; height: 25px;  width: 255px; color: #7c7369; padding-top: 11px; padding-left: 20px; font-weight: normal; font-style: normal; font-variant: normal; text-transform: none; }
.menu b { float: right; margin-right: 5px; }
* html .menu a, * html .menu a:visited { width: 265px; line-height: 1.8em; }
* html .menu a:hover { color: #ffffff; background-color: #7c7369; position: relative; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; border-bottom: 1px solid #7C7369; border-top: 1px solid #7C7369; border-right: 1px solid #7C7369; border-left: none; }
.menu li:hover { position: relative; }
.menu a:active, .menu a:focus { color: #7c7369; background-color: #f4f3f2; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; }
.menu li:hover > a { color: #ffffff; background-color: #7c7369; font-weight: normal; font-style: normal; font-variant: normal; text-decoration: none; text-transform: none; border-bottom: 1px solid #7C7369; border-top: 1px solid #7C7369; border-right: 1px solid #7C7369; border-left: none; }
.menu li ul { visibility: hidden; position: absolute; top: 0px; left: 256px; background-color: transparent; opacity:0; transition: opacity .35s, left .35s; -moz-transition: opacity .35s, left .35s;-webkit-transition: opacity .35s, left .35s; -o-transition: opacity .35s, left .35s; z-index:-1; }
.menu li:hover > ul { visibility: visible; opacity:1; left:276px;}
.menu ul a:hover ul ul { visibility: hidden; opacity:0; transition: opacity .35s, left .35s; -moz-transition: opacity .35s, left .35s;-webkit-transition: opacity .35s, left .35s; -o-transition: opacity .35s, left .35s;}
.menu ul a:hover ul a:hover ul ul { visibility: hidden; opacity:0; transition: opacity .35s, left .35s; -moz-transition: opacity .35s, left .35s;-webkit-transition: opacity .35s, left .35s; -o-transition: opacity .35s, left .35s;}
.menu ul a:hover ul a:hover ul a:hover ul ul { visibility: hidden; opacity:0; transition: opacity .35s, left .35s; -moz-transition: opacity .35s, left .35s;-webkit-transition: opacity .35s, left .35s; -o-transition: opacity .35s, left .35s;}
.menu ul a:hover ul { visibility: visible; opacity:1;}
.menu ul a:hover ul a:hover ul { visibility: visible; opacity:1;}
.menu ul a:hover ul a:hover ul a:hover ul { visibility: visible; opacity:1;}
.menu ul a:hover ul a:hover ul a:hover ul a:hover ul { visibility: visible; opacity:1;}

.subsubhead {
display:inline; float:left;position:relative;
}
.menu ul li ul ul {
display: none;
}

.menu ul li ul ul:hover li {
display: block;
position:absolute;
}

I’m don’t know much about javascript but that may be the issue as well. If so I’m probably screwed.

If I left out information anyone needs let me know please!

2

Do you have a link to the page that makes things way easier.

3

Here: http://www.ohio.edu/riskandsafety/ehs/index.htm

4

I am not completely sure which one you are referring too? When I hover Hazardous Materials I get a sub menu

Edit: I now see what you mean. You are closing the Hazardous Materials :

     <li>
      <a href="hazmat/index.htm"><span class="subsubmenu"><b>&raquo;</b></span>Hazardous Materials</a>
      </li>
5

You don’t even have a sub-sub menu even CODED from what I’m seeing.

6

I see it now. Firebug is stupid.

Anway, you closed off the <li> before the second dropdown ul is started. The sub-sub menu UL needs to be inside the LI

7 
 <li>
      <a href="hazmat/index.htm"><span class="subsubmenu"><b>&raquo;</b></span>Hazardous Materials</a>
      </li>
      
      		<ul>
        <li>
        <a href="hazmat/chemical.htm">Chemical Waste</a>        </li>
        <li>
        <a href="hazmat/transport.htm">DOT Training</a>        </li>
        <li>
        <a href="hazmat/hmis.htm">Info Sheets</a>        </li>
        <li>
        <a href="hazmat/msds.htm">M.S.D.S.</a>        </li>
        <li>
        <a href="hazmat/radioactive.htm">Radioactive Waste</a>        </li>
        <li>
        <a href="hazmat/toxic.htm">Toxic Substance Control</a>        </li>
         <li>
        <a href="emergency/rtka.htm">Right-To-Know Act</a></li>
</ul>

should be

 <li>
      <a href="hazmat/index.htm"><span class="subsubmenu"><b>&raquo;</b></span>Hazardous Materials</a>

      
      		<ul>
        <li>
        <a href="hazmat/chemical.htm">Chemical Waste</a>        </li>
        <li>
        <a href="hazmat/transport.htm">DOT Training</a>        </li>
        <li>
        <a href="hazmat/hmis.htm">Info Sheets</a>        </li>
        <li>
        <a href="hazmat/msds.htm">M.S.D.S.</a>        </li>
        <li>
        <a href="hazmat/radioactive.htm">Radioactive Waste</a>        </li>
        <li>
        <a href="hazmat/toxic.htm">Toxic Substance Control</a>        </li>
         <li>
        <a href="emergency/rtka.htm">Right-To-Know Act</a></li>
</ul>
</li>
8

Thanks guys. I fixed the HTML with both of your suggestions, but it actually still didn’t work.

I went into the css and through trial and error figured out the other issue. This:

display:inline; float:left;position:relative;
}
.menu ul li ul ul {
display: none;
}

.menu ul li ul ul:hover li {
display: block;
position:absolute;
}

Should have been:

display:inline; float:left;position:relative;
}

.menu ul li ul ul:hover li {
display: block;
position:relative;
}

Hopefully that still works when I actually upload it. Thanks again.

9

You’ve tested that to work? I find it odd you’re setting the UL to have the hover. That probably would mean that any of the first dropdown links could trigger the dropdown menu. Only guessing based off the code snippet but your solution is certainly deviant of the normal dropdown methods.

10

I’m not sure exactly what you mean, but you are right, it’s still not working: http://www.ohio.edu/riskandsafety/ehs/index.htm

I based it off of this fiddle before I could upload, but evidently it isn’t very accurate:

Any other ideas? Which tag should I have hover?

EDIT: The freaking thing works on Internet Explorer now. Not Chrome or Firefox though.

11

My post was basically saying that I found it hard to believe you got it workin with that code.

I’m still at work station computer but basically the idea is you hover the LI…like li:hover ul{} which on the LI hover, it targets the dropdown UL and then makes it appear. I wish Icould give specifics but just follow that. I can’t provide specifics.