• 0

CSS Dropdown help - no IE7 support?


Question

site in question: SunriseHairDesign.com

Using unordered lists (UL LI) with CSS for navigation drop-downs and a menu of services. It works perfectly in IE8, Chrome, FF, Safari, etc., etc. I knew it wouldn't work in IE6 (Using alpha-tran PNGs, etc), but I thought it would work in IE7 at the least. In IE7, the drop-down menus show up under text and you can't move your mouse to many other options. On the Services page, the mouseover changes the colors of the cells. It works great in IE8 and standards-based browsers, but in IE7, it's all sorts of messed up.

I'd really appreciate some insight into what I'm doing wrong. Here is some code:

Navigation CSS (Partial):

/* *****************NAVIGATION******************** */
#navi { position: relative; float: left; clear: right; width: 896px; left: 50%; margin-left: -448px; padding: 2em 0 2em 0; list-style: none; }
#nav, #nav ul { padding: 0; margin: 0; list-style: none; line-height: 1; z-index: 9999; }
#nav a { display: block; width: 12.8em; color: transparent; }
#nav li { float: left; width: 12.8em; }
#nav li ul { position: absolute; width: 12.8em; left: -999em; }
#nav li:hover ul, #nav li.sfhover ul { left: auto; }
#nav li ul ul { margin: -2.5em 0 0 12.8em; }
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; }
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto; }
#nav_sl { background: url(images/nav/sl.png); width: 12.8em; height: 3em; }
#nav_sl:hover { background: url(images/nav/sl_o.png); }
#nav_se { background: url(images/nav/se.png); width: 12.8em; height: 3em; }
#nav_se:hover { background: url(images/nav/se_o.png); }
#nav_gc { background: url(images/nav/gc.png); width: 12.8em; height: 3em; }
#nav_gc:hover { background: url(images/nav/gc_o.png); }

The menu:

<div id="navi">
        	<ul id="nav">
            	<li><a href="/index2.php"><div id="nav_sl"></div></a>
                	<ul>
                    	<li><a href="/pages/localsupport"><div id="nav_gb"></div></a>
                        	<ul>
                            	<li><a href="/pages/locksoflove"><div id="nav_ll"></div></a></li>
                            </ul>
                        </li>
                        <li><a href="/pages/policies"><div id="nav_po"></div></a></li>
                        <li><a href="/pages/map/"><div id="nav_md"></div></a></li>
                    </ul>
                </li>                              
            	<li><a href="/pages/services"><div id="nav_se"></div></a>
                	<ul>
                    	&lt;li&gt;&lt;a href="/pages/services/index.php#color"><divnav_cs"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#haircuts"><divnav_hc"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#special"><divnav_ss"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#perms"><divnav_pm"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/services/index.php#waxing"><divnav_wx"&gt;&lt;/div&gt;&lt;/a&gt;
                        &lt;li&gt;&lt;a href="/pages/extensions"&gt;&lt;div id="nav_et"&gt;&lt;/div&gt;&lt;/a&gt;
                    &lt;/ul&gt;
                &lt;/li&gt;
				&lt;li&gt;&lt;a href="/pages/color"&gt;&lt;div id="nav_co"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/experts"&gt;&lt;div id="nav_ex"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/products"&gt;&lt;div id="nav_pr"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/giftcert"&gt;&lt;div id="nav_gc"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/pages/contact"&gt;&lt;div id="nav_cn"&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;/div&gt;

The Table CSS:

#srvtable { width: 35em; float: left; color: #FFF; display:table; }
#prdtable { width: 50em; float: left; color: #FFF; display:table; }
#srvtable ul, #prdtable ul { display:table-row; width: 100%; }
#srvtable ul li { display: table-cell; padding: .5em; width: 8%; text-align: center; }
#prdtable ul li { display: table-cell; padding: .5em; }
#srvtable ul li.title { font-weight: bold; font-size: 2em; background: url(images/tblhead.jpg) repeat-x top left; color: #FFF; text-align: center; height: 1em; width: auto; }
#srvtable ul.odd, #prdtable ul.odd { font-size: 1.6em; background: #211005; }
#srvtable ul.even, #prdtable ul.even { font-size: 1.6em; background: #401c05; }
#srvtable ul.odd:hover li, #srvtable ul.even:hover li, #prdtable ul.odd:hover li, #prdtable ul.even:hover li { background: #b66527; }
ul.even li a, ul.odd li a, ul.even li a:visited, ul.odd li a:visited { color: #FFF; text-decoration: none; }

The Table (partial):

&lt;div id="srvtable"&gt;
&lt;br /&gt;
&lt;ul&gt;
    &lt;li class="title"&gt;&lt;a name="color"&gt;Color Services&lt;/a&gt;&lt;/li&gt;
    &lt;li class="title"&gt;From&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Full Foils&lt;/li&gt;
    &lt;li&gt;$84&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Partial Foils&lt;/li&gt;
    &lt;li&gt;$74&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Color Retouch&lt;/li&gt;
    &lt;li&gt;$64&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Initial Color&lt;/li&gt;
    &lt;li&gt;$64&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Additional Color (per color)&lt;/li&gt;
    &lt;li&gt;$20&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Overlays &amp; Add-on Color&lt;/li&gt;
    &lt;li&gt;$20&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;&lt;10 Foils (per foil)&lt;/li&gt;
    &lt;li&gt;$7&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Cap Highlights&lt;/li&gt;
    &lt;li&gt;$43&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="odd"&gt;
    &lt;li&gt;Corrective Color (by consultation only)&lt;/li&gt;
    &lt;li&gt;per hr.&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="even"&gt;
    &lt;li&gt;Men's Color&lt;/li&gt;
    &lt;li&gt;$43&lt;/li&gt;
&lt;/ul&gt;
&lt;ul&gt;
    &lt;li class="title"&gt;&lt;a name="haircuts"&gt;Hair Cuts&lt;/a&gt;&lt;/li&gt;
	&lt;li class="title"&gt;From&lt;/li&gt;
&lt;/ul&gt;

&lt;/div&gt;

Thanks!

Link to comment
https://www.neowin.net/forum/topic/892764-css-dropdown-help-no-ie7-support/
Share on other sites

3 answers to this question

Recommended Posts

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Seem like they are seeking for a one size fits all. You have power users and "what's a computer" generation growing up on phones, tablets, and Chromebooks.
    • Guessing it was profitable enough inserting prompted apps vs the hate it generated.
    • Also good for Debugging or troubleshooting your game.. i dont get it why nvidia app or amd does not show this data.. if steam can do it..
    • Microsoft reportedly planning to lay off thousands of employees, mostly in sales by Usama Jawad Back in May 2025, Microsoft decided to lay off 3% of its workforce, which amounted to roughly 6,000 employees. It claimed that this decision allowed it to implement better organizational changes in a "dynamic marketplace". Now, a new report claims that the Redmond tech firm is planning to lay off thousands more next month. Citing unnamed sources, Bloomberg reports that as the company continues investing heavily in its AI ventures, it is about to announce layoffs of thousands of workers as early as next month. This reduction in workforce will primarily affect sales teams, but they won't be the only ones affected. That said, the sources did mention that the timing for this announcement may change. This move, if true, won't be entirely surprising. In April 2025, Microsoft announced that it will be relying more on third-party firms to sell its software to small- and medium-sized customers. It's currently unclear how many employees will be impacted by this change, but even if the layoff percentage is in the single digits, it would still be significant as it would be impacting the professional careers of thousands. The May 2025 layoffs primarily impacted engineering and product teams. The other major round of layoffs prior to this was the decision to eliminate 10,000 jobs back in January 2023. Those represented 5% of the total workforce at that time, with numerous teams, including the one leading Mixed Reality (MR) efforts, being heavily impacted. It is interesting to note that if the timing of the announcement for layoffs is accurate, it would be soon after Microsoft closes its fiscal year at the end of June 2025. Although we'll get financial reports for the latest quarter soon after too, one has to wonder what the human cost of profit is, as Microsoft continues to report billions of dollars in revenue every quarter. Source: Bloomberg (paywall)
  • Recent Achievements

    • First Post
      Fuzz_c earned a badge
      First Post
    • First Post
      TIGOSS earned a badge
      First Post
    • Week One Done
      slackerzz earned a badge
      Week One Done
    • Week One Done
      vivetool earned a badge
      Week One Done
    • Reacting Well
      pnajbar earned a badge
      Reacting Well
  • Popular Contributors

    1. 1
      +primortal
      704
    2. 2
      ATLien_0
      285
    3. 3
      Michael Scrip
      214
    4. 4
      +FloatingFatMan
      194
    5. 5
      Steven P.
      131
  • Tell a friend

    Love Neowin? Tell a friend!