1 reply [Last post]
zepterfd
Offline
newbie
VA
Last seen: 14 years 21 weeks ago
VA
Joined: 2004-12-18
Posts: 5
Points: 0

I have been working on a web site for my school that uses a rollover horizontal dropdown menu for its navigation. I have built off code taken from http://www.alistapart.com/articles/horizdropdowns/. The original was made with one collum, but i needed multiple ones. I figured out what i needed and i seemed like everything was working fine. And it did work fine, but there was noticeable lag in the rollovers in IE. I tested the page out on firefox and it worked fine, having no rollover lag at all. Its hard to explain, but if you don't understand here is a link to the web site I'm working on http://jrhs.ccpsnet.net/. The navigation is on the left side. The single collumed rollover menus work fine for me in IE, its the 4 collumed ones that don't (such as the Clubs and Athletics). Here is the code to my menu, I am using 4 style sheets and one java script for the page, so here are the other ones incase you want to see:
http://jrhs.ccpsnet.net/body.css
http://jrhs.ccpsnet.net/drop_down.js
http://jrhs.ccpsnet.net/dept.css
http://jrhs.ccpsnet.net/menu.css
http://jrhs.ccpsnet.net/style.css

The CSS for the menu:

body {
font: normal 11px Verdana;
}
	
ul li {
	position: relative;
	}
	
li ul {
	position: absolute;
	left: 138px;
	top: 0;
	display: none;
}

ul li a {
	display: block;
	text-decoration: none;
	color: #fff;
	background: #6C3172;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
}

li.sub {	
	background: #6C3172;
	padding-bottom:2px;
	border-bottom: 0px solid #ccc;
	border-left:1px solid #ccc;
	border-top:1px solid #ccc;
	color:#fff;
	font-weight:bold;
	text-decoration:underline;
	text-align:center;
}

ul li a:hover {  
background: #199344; 
color: #fff;
}

li ul li a { 
	padding: 2px 5px;
	color: #fff;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 139px;
	border-bottom: 1px solid #ccc;
}

li.filler {
	display: block;
	text-decoration: none;
	color: #fff;
	background: #6C3172;
	padding: 5px;
	border: 1px solid #ccc;
	border-bottom: 0;
	width:127px;
	height:7px;
}

ul.expand {
vertical-align:text-top;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
* html li.sub { width: 137px; }
* html ul.expand {margin-top: -50px;}
* html li.filler {	width:139px; padding: 2px;}
/* End */

li:hover ul, li.over ul { 
	display: block; 
	color: #fff;
}
a.flarf {
	font-weight: bold;
	color: #fff;
}

#navi {
	float:left;
	margin-top: 150px;
}

And the HTML for the Menu:

    <ul id="navi">
    <li><a href="#" class="flarf">General</a> 
      <ul>
        <li><a href="index.php">Main</a></li>
        <li><a href="jrhs_mission.php">Mission</a></li>
      </ul>
    </li>
    <li><a href="#" class="flarf">Faculty</a> 
      <ul>
        <li><a href="administration_index.php">Administration</a></li>
        <li><a href="email_index.php">E-mail Addresses</a></li>
        <li><a href="support_index.php">Support Staff</a></li>
      </ul>
    </li>
    <li><a href="#" class="flarf">Departments</a> 
      <ul>
        <li><a href="cte_index.php">Career & Technical Education</a></li>
        <li><a href="english_index.php">English</a></li>
        <li><a href="exceptional_index.php">Exceptional</a></li>
        <li><a href="finearts_index.php">Fine Arts</a></li>
        <li><a href="math_index.php">Mathematics</a></li>
        <li><a href="pe_index.php">Health & PE</a></li>
        <li><a href="science_index.php">Science</a></li>
        <li><a href="ss_index.php">History</a></li>
        <li><a href="wlanguages_index.php">World Languages</a></li>
      </ul>
    </li><li>
    <a href="#" class="flarf">Clubs</a> 
    <ul>
      <li><a><strong>A-F</strong></a></li>
      <ul>
        <li><a><strong>F-M</strong></a></li>
        <ul>
          <li><a><strong>N-Z</strong></a></li>
          <li><a href="cl_nahs.php">NAHS</a></li>
          <li><a href="cl_nhs.php">NHS</a></li>
          <li><a href="cl_ptsa.php">PTSA</a></li>
          <li><a href="cl_quillandscroll.php">Quill and Scroll</a></li>
          <li><a href="cl_rapidchiefs.php">Rapid Chiefs</a></li>
          <li><a href="cl_rapideyemovement.php">Rapid Eye Movement</a></li>
          <li><a href="cl_rapidfaithbible.php">Rapid Faith</a></li>
          <li><a href="cl_rapidmotion.php">Rapid Motion</a></li>
          <li><a href="cl_robotics.php">Robotics</a></li>
          <li><a href="cl_sca.php">SCA</a></li>
          <li><a href="cl_seniorclass.php">Senior Class</a></li>
          <li><a href="cl_sophomoreclass.php">Sophomore Class</a></li>
          <li><a href="cl_spanish.php">Spanish Club</a></li>
          <li><a href="cl_wlhs.php">WLHS</a></li>
          <li><a href="cl_writersguild.php">Writers Guild</a></li>
         <li><a>&nbsp;</a></li>
        </ul>
        <li><a href="cl_fencingclub.php">Fencing Club</a></li>
        <li><a href="cl_forensicsclub.php">Forensics Club</a></li>
        <li><a href="cl_frenchclub.php">French Club</a></li>
        <li><a href="cl_freshmenclass.php">Freshmen Class</a></li>
        <li><a href="cl_frisbeeteam.php">Frisbee Team</a></li></li>
        <li><a href="cl_germanclub.php">German Club</a></li>
        <li><a href="cl_gsa.php">GSA</a></li>
        <li><a href="cl_historyclub.php">History Club</a></li>
        <li><a href="cl_interactclub.php">Interact Club</a></li>
        <li><a href="cl_juniorclass.php">Junior Club</a></li>
        <li><a href="cl_keyclub.php">Key Club</a></li>
        <li><a href="cl_latinclub.php">Latin Club</a></li>
        <li><a href="cl_marketingclub.php">Marketing Club</a></li>
        <li><a href="cl_minorityexpressions.php">Minority Expressions</a></li>
        <li><a href="cl_modelun.php">Model UN</a></li>
        <li><a href="cl_mualphatheta.php">Mu Alpha Theta</a></li>
      </ul>
      <li><a href="cl_academicteam.php">Academic Team</a></li>
      <li><a href="cl_acs.php">ACS</a></li>
      <li><a href="cl_artphotoguild.php">Art & Photo Guild</a></li>
      <li><a href="cl_asta.php">ASTA</a></li>
      <li><a href="cl_athleticboosters.php">Athletic Boosters</a></li>
      <li><a href="cl_bandboosters.php">Band Boosters</a></li>
      <li><a href="cl_betaclub.php">Beta Club</a></li>
      <li><a href="cl_chessclub.php">Chess Club</a></li>
      <li><a href="cl_choralboosters.php">Choral Boosters</a></li>
      <li><a href="cl_crewclub.php">Crew Club</a></li>
      <li><a href="cl_debateclub.php">Debate Club</a></li>
      <li><a href="cl_dramaclub.php">Drama Club</a></li>
      <li><a href="cl_fbla.php">FBLA</a></li>
      <li><a href="cl_fca.php">FCA</a></li>
      <li><a href="cl_fccla.php">FCCLA</a></li>
  <li><a>&nbsp;</a></li>
      
    </ul></li>
    <li><a href="#" class="flarf">Athletics</a> 
      <ul>
        <li><a><strong>Fall</strong></a></li>
        <ul>
          <li><a><strong>Winter</strong></a></li>
          <ul>
            <li><a><strong>Spring</strong></a></li>
            <ul>
              <li><a><strong>Promoters</strong></a></li>
              <li><a href="at_cheer.php">Cheerleading</a></li>
              <li><a href="at_motion.php">Rapid Motion</a></li>
              <li><a href="at_thunder.php">Rapid Thunder</a></li>
   <li><a>&nbsp;</a></li>   <li><a>&nbsp;</a></li>   <li><a>&nbsp;</a></li>   <li><a>&nbsp;</a></li>
            </ul>
            <li><a href="at_btennis.php">Boys Tennis</a></li>
            <li><a href="at_baseball.php">Baseball</a></li>
            <li><a href="at_bsoccer.php">Boys Soccer</a></li>
            <li><a href="at_gsoccer.php">Girls Soccer</a></li>
            <li><a href="at_gtennis.php">Girls Tennis</a></li>
            <li><a href="at_odtrack.php">Outdoor Track</a></li>
            <li><a href="at_softball.php">Softball</a></li>
          </ul>
          <li><a href="at_indoortrack.php">Indoor Track</a></li>
          <li><a href="at_wrestling.php">Wrestling</a></li>
          <li><a href="at_bbball.php">Boys Basketball</a></li>
          <li><a href="at_gbball.php">Girls Basketball</a></li>
          <li><a>&nbsp;</a></li>
          <li><a>&nbsp;</a></li>
<li><a>&nbsp;</a></li>
       
        </ul>
        <li><a href="at_bvball.php">Boys Volleyball</a></li>
        <li><a href="at_crosscountry.php">Cross Country</a></li>
        <li><a href="at_football.php">Football</a></li>
        <li><a href="at_fhockey.php">Field Hockey</a></li>
        <li><a href="at_gvball.php">Girls Volleyball</a></li>
        <li><a href="at_golf.php">Golf</a></li>
        <li><a>&nbsp;</a></li>
      </ul>
    </li>
    <li><a href="#" class="flarf">Resources</a> 
      <ul>
        <li><a href="ccc_index.php">College & Career Center</a></li>
        <li><a href="guidance_index.php">Guidance</a></li>
        <li><a href="library_index.php">Library</a></li>
        <li><a href="http://www.aws.com/wx.asp?id=mdljr" target="_blank">Current 
          Weather</a></li>
        <li><a href="http://wwbtads.com/news/schoolclose.htm" target="_blank">School 
          Closings</a></li>
      </ul>
    </li>
  </ul>

If anyone has any ideas about why the lag might be appearing only in IE and a way to fix it i'd greatly appreciate your comments. Also, feel free to critique the web site as much as you want, the more input the better. Thanks everyone for your help,

P.S - Is there anyway to define a LI to always be on top? Such as in a page like this: http://jrhs.ccpsnet.net/ccc_career.php When u hover over Clubs or Athletics u see the text LI in the page on top of the menu, it looks kind of funny. Is there a command i can use to say "put this li always on top"?.

bowers01
Offline
newbie
Last seen: 12 years 50 weeks ago
Joined: 2008-10-05
Posts: 1
Points: 0

Did you fix it?

Hi,
Did you end up fixing this? i have the same problem.
Cheers