Menu not working in IE_问答_开发者_运维开发者技术经验分享

I'm trying to re-build (note, I am primarily an application developer, know very little so far about web development beyond HTML) a website for the family business, and am running into a bit of trouble so far. The CSS menu system I have built works fine in Firefox, but in Internet Explorer, none of the menu items appear when the mouse hovers above the main bar items. The main files involve开发者_JS百科d are at http://www.preferencepools.com/test/ for the page, http://www.preferencepools.com/test/default.css for the main CSS, and http://www.preferencepools.com/test/menu_style.css for the css that is supposed to control the menus. Can anyone tell me what I'm doing wrong? I don't have much time to study before we need to get some other changes out, and I'd like to get this menu out at the same time. Thanks.

Depending on your version of IE, it may not support the :hover psudo-class in the way you're expecting. This has been solved by many developers before you, and if might humbly suggest you rely on that expertise to do the work for you.

http://www.htmldog.com/articles/suckerfish/dropdowns/

This gives you the way to create simple dropdowns that degrade properly, work across all major browsers (IE, Opera, Safari, Firefox), and its very lightweight (12 lines of javascript).

I looked into your issue and I am not sure what is exactly happening. Before looking at your site I assumed the issue was only in IE6 and 7 which usually do have issues. However, it looks like they also do not work in IE8. Unfortunately, it might be easy to fix your issue in IE8 but it will be much harder in IE6 & 7 because of a lot of backwards compatibility issues. Instead of banging your head into the wall I would suggest you try something like the Spry Menu controls found here. They will do everything you are looking for very quickly and easily and they already have backwards compatibility built in.

Versions of IE <6, or IE7+ in quirks mode, will not understand :hover. IE6 is another story (you may wish to use JavaScript to ensure it works equally on all browsers), but with IE7+ you need to use a doctype switch to put IE into standards mode, where it will respect :hover;

After looking at your HTML it seems you have a few extra html and body tags. Try this updated code and see it it helps:

    <html>
<head>
<meta name="keywords" value="swimming pools, pools,
inground pools, spas, hot tubs, aboveground pools, underground pools,
pool chemicals, spa chemicals, hot tub chemicals, Roseburg, oregon,
douglas county, BioGuard, Spaguard, soft swim, Dimension One, Fort
Wayne, Baqua spa, baquacil, sun star, dough boy, seaspray,  sim pools,
splash pools, k-d pools, endless pools, swim spas, muskin pools, spa
covers, soft sided pools, garden leisure pools, swimming, summer,
Sunair, awnings, vinyl liners, swimming pool liners, aboveground liners,
replacement liners, liners, plasimayd, premier, discovery, hayward,
stayrite, pac fab, pentair, pool covers, safe-t-cover, cover pools,
solar blankets, solar reels, swimming pool pumps, pumps, swimming pool
filters, filters, swimming pool heater, heater, DE filter, sand filters,
filters, pool toys, toys, backyard, hot water, chemicals, algae, cloudy
water, pool problems, spa problems, pool trouble, spa trouble, water
problems, water trouble, water testing, free water testing, pool
testing, spa testing, spa maintenance, pool maintenance, new pools, pool
dealer, aboveground pool dealer, inground pool dealer, underground pool
dealer, spa dealer, hot tub dealer, hot tub problems, hot tub
maintenance">
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<title>Preference Pools & Spas</title>
<link rel="stylesheet" type="text/css" href="menu_style.css" />
</head>
<body style="padding:0;margin:0">
<div id="water">

    <div id="header">
        <h1 class="pptitle">
            <img src="images/pool.gif" alt="pool.gif" class="textalign">
            &nbsp;Preference Pools & Spas llc
        </h1>
        <br/>
        <ul id="navigation-1">
            <li><a href="./" accesskey="1" title="Home">Home</a></li>

            <li>
                <a href="#" accesskey="2" title="Pools">Pools</a>
                <ul class="navigation-2">
                    <li><a href="aboveground.php">Above Ground</a></li>
                    <li><a href="inground.php">In-Ground</a></li>
                    <li><a href="fiberglass.php">Viking Fiberglass</a></li>
                    <li><a href="neverending.php">Neverending</a></li>

                </ul>
            </li>
            <li>
                <a href="#" accesskey="3" title="Spas">Spas</a> 
                <ul class="navigation-2">
                    <li><a href="hotsprings.php">Hot Springs</a></li>
                    <li><a href="tiger.php">Tiger River</a></li>
                    <li><a href="solana.php">Solana</a></li>

                    <li><a href="hotspot.php">Hot Spot</a></li>
                    <li><a href="tidalfit.php">Tidal Fit</a></li>
                </ul>
            </li>
            <li>
                <a href="#" accesskey="4" title="Pool Chemicals">Pool Chemicals</a> 
                <ul class="navigation-2">
                    <li><a href="pchlorine.php">Chlorine</a></li>

                    <li><a href="psoftswim.php">Softswim</a></li>
                    <li><a href="psalt.php">Mineral Generation</a></li>
                    <li><a href="psilver.php">Silver</a></li>
                </ul>           
            </li>
            <li>
                <a href="#" accesskey="5" title="Spa Chemicals">Spa Chemicals</a>   
                <ul class="navigation-2">

                    <li><a href="sbromine.php">Bromine</a></li>
                    <li><a href="ssoftsoak.php">Soft Soak</a></li>
                    <li><a href="ssilver.php">Silver</a></li>
                </ul>
            </li>
            <li>
                <a href="#" accesskey="6" title="Service">Service</a>   
                <ul class="navigation-2">

                    <li><a href="svpool.php">Pool Service</a></li>
                    <li><a href="svspa.php">Spa Service</a></li>
                </ul>
            </li>
            <li>
                <a href="#" accesskey="7" title="Equipment">Equipment</a>   
                <ul class="navigation-2">
                    <li><a href="epool.php">Pool Equipment</a></li>

                    <li><a href="espa.php">Spa Equipment</a></li>
                </ul>
            </li>
            <li>
                <a href="#" accesskey="8" title="Liners and Covers">Liners and Covers</a>   
                <ul class="navigation-2">
                    <li><a href="liners.php">Pool Liners</a></li>
                    <li><a href="cpool.php">Pool Covers</a></li>

                    <li><a href="cspa.php">Spa Covers</a></li>
                </ul>
            </li>
            <li>
                <a href="#" accesskey="9" title="Company Info">Company Info</a> 
                <ul class="navigation-2">
                    <li><a href="about.php">About Us</a></li>
                    <li><a href="contact.php">Contact Us</a></li>

                </ul>
            </li>
            <!--<li>
                <a href="#" accesskey="0" title=""></a> 
                <ul class="navigation-2">
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </li>-->
        </ul>
    </div>
</div>

<div align="center">
  <p align="left">Welcome to our home on the web. Please come on in and browse 
    our pages. We are working hard to bring you the best in swimming pool and 
    spa information, service, and chemicals. You can use the menus above to access our catalog of 
    information on pools, spas, and nearly everything that goes with them. Enjoy your stay 
    and don't hesitate to <a href="contact.htm">contact us</a> if necessary.</p>

  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <table width="65%" border="0" cellpadding="10" align="center">
    <tr> 
      <td width="19%"> 
        <div align="center"><a href="http://www.bioguard.com"><img src="logos/bioglogo.gif" width="125" height="100" align="absmiddle" border="0"></a></div>
      </td>
      <td width="17%"> 
        <div align="center"><a href="http://www.spaguard.com"><img src="logos/sglogo.gif" width="112" height="103" align="absmiddle" border="0"></a></div>
      </td>

      <td width="19%"> 
        <div align="center"><img src="logos/seaspraysm.jpg" width="170" height="74" align="absmiddle"></div>
      </td>
      <td width="19%"> 
        <div align="center"><a href="http://www.hotspringsspas.com"><img src="logos/hotsprings25annivlogo.jpg" width="180" height="91" align="absmiddle" border="0"></a></div>
      </td>
    </tr>
  </table>
  <table width="36%" border="0">
    <tr>

      <td width="29%"><a href="http://www.coverpools.com"><img src="logos/cpicorpo.gif" width="112" height="102" align="absmiddle" border="0"></a></td>
      <td width="21%"><a href="http://www.pacificpools.com"><img src="logos/pacific.jpg" width="214" height="117" align="absmiddle" border="0"></a></td>
      <td width="21%"><a href="http://www.technican.ca"><img src="logos/technican.jpg" width="352" height="67" align="absmiddle" border="0"></a></td>
      <td width="50%"><a href="http://www.sunstar.com"><img src="logos/sunstar.gif" width="95" height="86" align="absmiddle" border="0"></a></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <div id="footer">
  <p id="footer">Preference Pools &amp; Spas LLC<br>

    787 W. Harvard Ave.<br>
    Roseburg, Or. 97470<br>
    (541) 672-1970</p>
  <p align="left">&nbsp;</p>
  <p id="footer">Site Design by <a href="mailto:webmaster@preferencepools.com">Tom 
    Andrecht</a></p>
  <p id="footer"><a href="copyright.htm">&copy;Copyright Information Here</a></p>

  </div>

  <div align="center"> 
  </div>
</div>
</body>
</html>