473,396 Members | 1,975 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

li:hover in IE 8

KeredDrahcir
426 256MB
I've created a navigation menu with a drop down sub menu. It all worked perfectly but for some reason, it no longer works in Internet Explorer. I'm using version 8 which is supposed to support the pseudo-classes I need to use.
It still works in Firefox, Safari, Google Chrome and Opera.

I have tried replacing the code with the code I used for other menus and it still doesn't work.

Can anyone help me because it really is a mystery?
Expand|Select|Wrap|Line Numbers
  1. <div id="menu">
  2.   <div class="mainmenu">
  3.     <ul>
  4.       <li>
  5.         <a href='path'>Home</a>
  6.       </li>
  7.       <li>
  8.         <a href='path'>Country Garden</a>
  9.       </li>
  10.       <li>
  11.         <a href='path'>Inner City Garden</a>
  12.       </li>
  13.       <li>
  14.         <a href='path'>Winter Garden</a>
  15.         <ul>
  16.           <li>
  17.             <a href='path'>Featured Products</a>
  18.           </li>
  19.           <li>
  20.             <a href='path'>Best Sellers</a>
  21.           </li>
  22.           <li>
  23.             <a href='path'>Special Offers</a>
  24.           </li>
  25.         </ul>
  26.       </li>
  27.       <li>
  28.         <a href='path'>Water Garden</a>
  29.       </li>
  30.       <li>
  31.         <a href='path'>Window Box</a>
  32.       </li>
  33.     </ul>
  34.   </div>
  35. </div>
  36.  
Expand|Select|Wrap|Line Numbers
  1. .mainmenu{
  2.     clear: both;
  3.     height: 42px;
  4.     margin: 0;
  5.     width: 980px;
  6. }
  7. .mainmenu ul{
  8.     list-style: none;
  9.     margin: 0;
  10.     padding: 0;
  11.     text-align:center;
  12. }
  13. .mainmenu li{
  14.     display: inline-block;
  15.     margin: 0;
  16.     padding: 0;
  17.     z-index:1000;
  18.     height: 42px;
  19.     position: relative;
  20. }
  21. .mainmenu li a{
  22.     display: inline-block;
  23.     height: 33px;
  24.     padding: 9px 25px 0;
  25. .mainmenu ul ul{
  26.     float: left;
  27.     left: 0;
  28.     padding: 5px 0 10px 0;
  29.     position: absolute;
  30.     text-align: left;
  31.     top: 42px;
  32.     width: 200px;
  33.     z-index: 10000;
  34. }
  35. .mainmenu li li{
  36.     clear: both;
  37.     text-align: left;
  38.     height: 30px;
  39. }
  40. .mainmenu ul li ul{
  41.     display:none;
  42. }
  43. .mainmenu li ul li a {
  44.     height: auto;
  45.     padding: 2px 25px;
  46.     width: 150px;
  47. }
  48.  
  49. .mainmenu li ul li a, .mainmenu li.over li a {
  50.     text-decoration: none !important;
  51. }
  52.  
  53. .mainmenu li:hover ul, .mainmenu li.over ul {
  54.     display: block;
  55. }
  56.  
I've taken out any colours or font styles to keep the code as simple as possible.

Any help would be greatly appreciated.

I'd rather just have to change the CSS. I don't really want to change the HTML if I can avoid it.
Apr 27 '12 #1

✓ answered by Rabbit

This is the absolute minimum to get a gradient working with a drop down menu. Start with this and add back in your styles.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>    
  4.     <style>
  5.         #nav{
  6.             list-style:none;
  7.         }
  8.  
  9.         #nav li{
  10.             float:left;
  11.             background-color: #25abec; 
  12.             background-image:-moz-linear-gradient(top,#25abec,#1984b8); 
  13.             background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8)); 
  14.             filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC,endColorStr=#FFFFFF); 
  15.         }
  16.  
  17.         #nav ul{
  18.             position:absolute;
  19.             display:none; 
  20.         }
  21.  
  22.         #nav ul li{
  23.             float:none;
  24.         }
  25.  
  26.         #nav li:hover ul{ 
  27.             display:block;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <ul id="nav">
  33.     <li>
  34.         <a href="#">Home</a>
  35.     </li>
  36.     <li>
  37.         <a href="#">About</a>
  38.         <ul>
  39.             <li><a href="#">The product</a></li>
  40.         </ul>
  41.     </li>
  42.     <li>
  43.         <a href="#">Services</a>
  44.         <ul>
  45.             <li><a href="#">Sevice one</a></li>
  46.             <li><a href="#">Sevice two</a></li>
  47.         </ul>
  48.     </li>
  49. </ul>
  50. </body>
  51. </html>

30 11976
Rabbit
12,516 Expert Mod 8TB
In IE there must be a declared <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.
Apr 27 '12 #2
KeredDrahcir
426 256MB
I ALWYS have
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
at the top of every webpage I do.
Apr 27 '12 #3
Rabbit
12,516 Expert Mod 8TB
Works fine for me in IE 8.
Apr 27 '12 #4
KeredDrahcir
426 256MB
I doesn't work at all for me.
Apr 27 '12 #5
Rabbit
12,516 Expert Mod 8TB
Well, it might just be a setting in your IE. Maybe it's set up to ignore doctypes. Or to use a specific rendering mode. All I know is when I use the code you posted, it works for me in IE8.
Apr 27 '12 #6
KeredDrahcir
426 256MB
If my IE ignored to DOCTYPE it would look different from the other browsers so that is not the option. I've tried this on more than one computer in two different locations.
Is there anything else that could affect it?
Apr 30 '12 #7
Rabbit
12,516 Expert Mod 8TB
If that's the only code in the page, nothing else would affect it. Using the code you posted worked fine for me. So it's most likely a setting on the computers you're testing from.
Apr 30 '12 #8
KeredDrahcir
426 256MB
If thst's the case why does it work with different sites using the same code?
Apr 30 '12 #9
Rabbit
12,516 Expert Mod 8TB
It works for me. You say it doesn't work for you. Fine, but it's not because the code doesn't work. It the code doesn't work, then it wouldn't work for everyone. But that's not the case. It works for some people.

Which means it can be one of two things. Either it's a setting on the machines. Or, you have conflicting code on your page that you did not post.
Apr 30 '12 #10
KeredDrahcir
426 256MB
Thanks. That's what I wanted to know.
Apr 30 '12 #11
KeredDrahcir
426 256MB
I've finally isolated the line which is causing the problem. I was wondering if you could tell me if there is anything wrong with it, or why it might not work.
Expand|Select|Wrap|Line Numbers
  1. .mainmenu li{
  2.     background-color: #25abec;
  3.     background-image:-moz-linear-gradient(top,#25abec,#1984b8);
  4.     background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
  5.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
  6. }
Many thanks.
May 1 '12 #12
Rabbit
12,516 Expert Mod 8TB
The gradient filter overrides the hover selector. You have three options. Either don't use a gradient in IE8 or use a background image with a gradient or use javascript to implement the menu.
May 1 '12 #13
KeredDrahcir
426 256MB
That is incorrect. I've found out what it is doing. The dropdown is confined within the list. If I increase the height of the li tags then you see part of the list. This of course isn't an option but there must be way so overcome that.
May 2 '12 #14
Rabbit
12,516 Expert Mod 8TB
This is the absolute minimum to get a gradient working with a drop down menu. Start with this and add back in your styles.
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>    
  4.     <style>
  5.         #nav{
  6.             list-style:none;
  7.         }
  8.  
  9.         #nav li{
  10.             float:left;
  11.             background-color: #25abec; 
  12.             background-image:-moz-linear-gradient(top,#25abec,#1984b8); 
  13.             background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8)); 
  14.             filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC,endColorStr=#FFFFFF); 
  15.         }
  16.  
  17.         #nav ul{
  18.             position:absolute;
  19.             display:none; 
  20.         }
  21.  
  22.         #nav ul li{
  23.             float:none;
  24.         }
  25.  
  26.         #nav li:hover ul{ 
  27.             display:block;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32. <ul id="nav">
  33.     <li>
  34.         <a href="#">Home</a>
  35.     </li>
  36.     <li>
  37.         <a href="#">About</a>
  38.         <ul>
  39.             <li><a href="#">The product</a></li>
  40.         </ul>
  41.     </li>
  42.     <li>
  43.         <a href="#">Services</a>
  44.         <ul>
  45.             <li><a href="#">Sevice one</a></li>
  46.             <li><a href="#">Sevice two</a></li>
  47.         </ul>
  48.     </li>
  49. </ul>
  50. </body>
  51. </html>
May 2 '12 #15
KeredDrahcir
426 256MB
Thanks. That's brilliant. Just to job. I've just got one final question if you don't mind.
It's working fine in Firefox now and is working in IE. Do you know how I get the dropdown just to have a plain background in IE. It does in Firefox.
The dropdown style are:
Expand|Select|Wrap|Line Numbers
  1. .mainmenu ul ul{
  2.     background-color: #187eaf;
  3.     background-image: none !important;
  4. }
  5.  
  6. .mainmenu li li{
  7.     background-color: #187eaf;
  8.     background-image: none !important;
  9. }
  10.  
  11. .mainmenu li li:hover a{
  12.     background-color: #25abec;
  13.     background-image: none !important;    
  14. }
  15.  
May 3 '12 #16
Rabbit
12,516 Expert Mod 8TB
Unfortunately, I don't have firefox here at work. Try posting a new question about that and someone else that has firefox readily available should be able to help.
May 3 '12 #17
KeredDrahcir
426 256MB
Fair enough, I'll do that. Thanks for all your help.
May 3 '12 #18
Rabbit
12,516 Expert Mod 8TB
I just reread that and I misunderstood. I thought you meant it looked wrong in firefox. Setting the background color doesn't seem to work but setting another gradient should work.
Expand|Select|Wrap|Line Numbers
  1.         #nav ul li{
  2.             float:none;
  3.             filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF,endColorStr=#FFFFFF); 
  4.         }
May 3 '12 #19
KeredDrahcir
426 256MB
That did cross my mind and I was thinking you wanted to compare it to Firefox. I'll give that a go. Thanks.

Is it possible to set a best answer and second best answer? I could set answer 19 as the second answer so that answers 16 and 19 which give both pieces of information appear one after the other at the top.
May 4 '12 #20
KeredDrahcir
426 256MB
I was unable to get that to work. Can you spot anything wrong in my code?
Expand|Select|Wrap|Line Numbers
  1. .mainmenu ul ul{
  2.     background-color: #187eaf;
  3.     background-image: none;
  4. }
  5.  
  6. .mainmenu li li{
  7.     float:none;
  8.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf) !important;
  9.     background-color: #187eaf;
  10.     background-image: none;
  11. }
  12. .mainmenu li li:hover a{
  13.     float:none;    
  14.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#25abec);
  15.     background-color: #25abec;
  16.     background-image: none;
  17. }
May 4 '12 #21
Rabbit
12,516 Expert Mod 8TB
Can you post all the styles related to the menu?
May 4 '12 #22
KeredDrahcir
426 256MB
Okay. I've got the styles relating to colour (text colour, backgrounds and borders) and the styles relating to everything else in different css files so I can change the colour theme, easily.
Expand|Select|Wrap|Line Numbers
  1. .mainmenu{
  2.     clear: both;
  3.     height: 42px;
  4.     margin: 0;
  5.     width: 980px;
  6. }
  7. .mainmenu ul{
  8.     font-family: arial, 'times new roman', verdana, georgia, tahoma,  sans-serif;
  9.     list-style: none;
  10.     margin: 0;
  11.     padding: 0;
  12.     text-align:center;
  13. }
  14. .mainmenu li{
  15.     display: inline-block;
  16.     margin: 0;
  17.     padding: 0;
  18.     z-index:1000;
  19.     height: 42px;
  20. }
  21. .mainmenu li a{
  22.     display: inline-block;
  23.     font-size: 13px;
  24.     font-weight: 700;
  25.     height: 33px;
  26.     padding: 9px 25px 0;
  27.     text-decoration: none;
  28. .mainmenu li:hover{
  29. }
  30. .mainmenu ul ul{
  31.     float: left;
  32.     padding: 5px 0 10px 0;
  33.     position: absolute;
  34.     text-align: left;
  35.     width: 200px;
  36.     z-index: 1;
  37.     display: none;
  38. }
  39. .mainmenu li li{
  40.     clear: both;
  41.     text-align: left;
  42.     height: 30px;
  43.     float: none
  44. }
  45. .mainmenu li li:hover {
  46. }
  47.  
  48. .mainmenu li ul li a {
  49.     font-size: 1em;
  50.     font-weight: normal;
  51.     height: auto;
  52.     padding: 2px 25px;
  53.     text-transform: none;
  54.     width: 150px;
  55.     background-image: none !important;
  56. }
  57.  
  58. .mainmenu li ul li a, .mainmenu li.over li a {
  59.     text-decoration: none !important;
  60. }
  61.  
  62. .mainmenu li:hover ul, .mainmenu li.over ul {
  63.     display: block;
  64. }
  65.  
Expand|Select|Wrap|Line Numbers
  1. .mainmenu{
  2.     background-color: #25abec;
  3.     background-image:-moz-linear-gradient(top,#25abec,#1984b8);
  4.     background-image:-webkit-linear-gradient(#25abec,#1984b8);
  5.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);    
  6. }
  7. .mainmenu li{
  8.     background-color: #25abec;
  9.     background-image:-moz-linear-gradient(top,#25abec,#1984b8);
  10.     background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
  11.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
  12. }
  13. .mainmenu li a{
  14.     color:#ffffff;
  15. .mainmenu li:hover a{
  16.     background-image:-moz-linear-gradient(top,#23a3e1,#187eaf);
  17.     background-image:-webkit-gradient(linear,left top,left bottom,from(#23a3e1),to(#187eaf));
  18.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#23a3e1,endColorStr=#187eaf);    
  19. }
  20.  
  21. .mainmenu ul ul{
  22.     background-color: #187eaf;
  23.     background-image: none;
  24. }
  25.  
  26. .mainmenu li li{
  27.     float:none;
  28.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf) !important; 
  29.     background-color: #187eaf;
  30.     background-image: none;
  31. }
  32. .mainmenu li li:hover a{
  33.     float:none;
  34.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#25abec); 
  35.     background-color: #25abec;
  36.     background-image: none;
  37. }
  38.  
May 8 '12 #23
Rabbit
12,516 Expert Mod 8TB
This is overriding your other style.
Expand|Select|Wrap|Line Numbers
  1. .mainmenu li:hover a{ 
  2.     background-image:-moz-linear-gradient(top,#23a3e1,#187eaf); 
  3.     background-image:-webkit-gradient(linear,left top,left bottom,from(#23a3e1),to(#187eaf)); 
  4.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#23a3e1,endColorStr=#187eaf);
  5. }
Change this:
Expand|Select|Wrap|Line Numbers
  1. .mainmenu li li{ 
  2.     float:none; 
  3.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf) !important;  
  4.     background-color: #187eaf; 
  5.     background-image: none; 
to this
Expand|Select|Wrap|Line Numbers
  1. .mainmenu li li, .mainmenu li:hover li a{ 
  2.     float:none; 
  3.     filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf);  
  4.     background-color: #187eaf; 
  5.     background-image: none; 
May 8 '12 #24
KeredDrahcir
426 256MB
Brilliant it sorts out the dropdown menu. The only think that doesn't work is the hover of the submenu.
Is there anything up with the last statement?
May 8 '12 #25
Rabbit
12,516 Expert Mod 8TB
Did you take out the !important? You have to take it out. Otherwise that overrides your other hover style.
May 8 '12 #26
KeredDrahcir
426 256MB
Good point. I missed that. It works perfectly. Many, many, many thanks.
All you time has been much appreciated.
May 8 '12 #27
Rabbit
12,516 Expert Mod 8TB
Not a problem. Good luck.
May 8 '12 #28
KeredDrahcir
426 256MB
Will there be any problems if I add float: left to the .mainmenu li style?
I just noticed that it wasn't working in IE 8 compatability mode which is "supposed" to be IE 7. float: left will fix it an apart from the dropdown menus fixed it in IE 6 as well.
Do you know if it will cause any other problems?
Aug 16 '12 #29
Rabbit
12,516 Expert Mod 8TB
I don't have a lot of browers at work to test that out on. We only get IE here. You can make the change and check it in your set of browsers.
Aug 16 '12 #30
KeredDrahcir
426 256MB
It has caused a problem. I fixed it on a different site and found that the menu wasn't making full use of the page width was important for the design on that site. I need to find another solution.
You don't know any way of making sure the list displays horizontally in IE 7 do you? The code will be similar to what I've already posted.
Aug 17 '12 #31

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Peter Schlenker | last post by:
In a navigation panel I try to place a bullet before each entry when the link is hovered at (see http://www.shambhala.de). Mozilla does it like expected, but IE doesn't - any ideas? <a...
5
by: toylet | last post by:
Attached is some css codes for a website. It has 3 parts: top-bar, side-bar (on the left) and main-body. The top-bar has a mouseover menu called top-menu implemented via ul:hover. When the mouse...
6
by: mike | last post by:
I wonder if someone would be kind enough to enlighten me about the use of the > character in a stylesheet. E.g. li:hover > ul {display: block;} I think I know what the > achieves by looking at...
13
by: windandwaves | last post by:
Hi Folk Just a bit of help here for newbies who want their menus to look nicer. I am sure that many of you make menus like this <ul id="menu"> <li><a href="page1.html">option 1</a></li>...
4
by: bne | last post by:
Hi, My brain's a bit fried on this one. I'm using the li:hover method to display sub menus at http://dev.hyl.co.uk/guide4life/. All works swimmingly in FF, however IE7 loses the hover (and so...
3
by: noize | last post by:
I have found other bugs related to using hover is CSS with IE, but I cannot find a fix for my issue. I have checked it in both IE 6 & 7 with the same results. I have built a drop-down menu using...
4
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks...
1
by: praveenb000 | last post by:
Hi every one, I designed a web page, having horizontal menu using UL and LI tags; I need to be set rollover effect for a menu items. whenever user hover on a menu item, the entire...
2
by: neovantage | last post by:
Hey all, I have integrated UL, Li base dropdown menu but it is bevaing abnormal in IE. Can somebody have a look on my code and help me out to fix the problem. Here is the Link of my website. ...
0
by: buzzard724 | last post by:
Ul li drop down menu works in FF not quite in IE Thank you for looking at this. The page is generated dynamically by php, js and jquery. The drop down menu ul- reports-li - works fine in FF. In...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.