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? -
<div id="menu">
-
<div class="mainmenu">
-
<ul>
-
<li>
-
<a href='path'>Home</a>
-
</li>
-
<li>
-
<a href='path'>Country Garden</a>
-
</li>
-
<li>
-
<a href='path'>Inner City Garden</a>
-
</li>
-
<li>
-
<a href='path'>Winter Garden</a>
-
<ul>
-
<li>
-
<a href='path'>Featured Products</a>
-
</li>
-
<li>
-
<a href='path'>Best Sellers</a>
-
</li>
-
<li>
-
<a href='path'>Special Offers</a>
-
</li>
-
</ul>
-
</li>
-
<li>
-
<a href='path'>Water Garden</a>
-
</li>
-
<li>
-
<a href='path'>Window Box</a>
-
</li>
-
</ul>
-
</div>
-
</div>
-
-
.mainmenu{
-
clear: both;
-
height: 42px;
-
margin: 0;
-
width: 980px;
-
}
-
.mainmenu ul{
-
list-style: none;
-
margin: 0;
-
padding: 0;
-
text-align:center;
-
}
-
.mainmenu li{
-
display: inline-block;
-
margin: 0;
-
padding: 0;
-
z-index:1000;
-
height: 42px;
-
position: relative;
-
}
-
.mainmenu li a{
-
display: inline-block;
-
height: 33px;
-
padding: 9px 25px 0;
-
}
-
.mainmenu ul ul{
-
float: left;
-
left: 0;
-
padding: 5px 0 10px 0;
-
position: absolute;
-
text-align: left;
-
top: 42px;
-
width: 200px;
-
z-index: 10000;
-
}
-
.mainmenu li li{
-
clear: both;
-
text-align: left;
-
height: 30px;
-
}
-
.mainmenu ul li ul{
-
display:none;
-
}
-
.mainmenu li ul li a {
-
height: auto;
-
padding: 2px 25px;
-
width: 150px;
-
}
-
-
.mainmenu li ul li a, .mainmenu li.over li a {
-
text-decoration: none !important;
-
}
-
-
.mainmenu li:hover ul, .mainmenu li.over ul {
-
display: block;
-
}
-
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.
This is the absolute minimum to get a gradient working with a drop down menu. Start with this and add back in your styles. - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<head>
-
<style>
-
#nav{
-
list-style:none;
-
}
-
-
#nav li{
-
float:left;
-
background-color: #25abec;
-
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
-
background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC,endColorStr=#FFFFFF);
-
}
-
-
#nav ul{
-
position:absolute;
-
display:none;
-
}
-
-
#nav ul li{
-
float:none;
-
}
-
-
#nav li:hover ul{
-
display:block;
-
}
-
</style>
-
</head>
-
<body>
-
<ul id="nav">
-
<li>
-
<a href="#">Home</a>
-
</li>
-
<li>
-
<a href="#">About</a>
-
<ul>
-
<li><a href="#">The product</a></li>
-
</ul>
-
</li>
-
<li>
-
<a href="#">Services</a>
-
<ul>
-
<li><a href="#">Sevice one</a></li>
-
<li><a href="#">Sevice two</a></li>
-
</ul>
-
</li>
-
</ul>
-
</body>
-
</html>
30 11976
In IE there must be a declared <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.
I ALWYS have - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
at the top of every webpage I do.
Works fine for me in IE 8.
I doesn't work at all for me.
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.
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?
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.
If thst's the case why does it work with different sites using the same code?
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.
Thanks. That's what I wanted to know.
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. -
.mainmenu li{
-
background-color: #25abec;
-
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
-
background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
-
}
Many thanks.
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.
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.
This is the absolute minimum to get a gradient working with a drop down menu. Start with this and add back in your styles. - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-
<head>
-
<style>
-
#nav{
-
list-style:none;
-
}
-
-
#nav li{
-
float:left;
-
background-color: #25abec;
-
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
-
background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#CCCCCC,endColorStr=#FFFFFF);
-
}
-
-
#nav ul{
-
position:absolute;
-
display:none;
-
}
-
-
#nav ul li{
-
float:none;
-
}
-
-
#nav li:hover ul{
-
display:block;
-
}
-
</style>
-
</head>
-
<body>
-
<ul id="nav">
-
<li>
-
<a href="#">Home</a>
-
</li>
-
<li>
-
<a href="#">About</a>
-
<ul>
-
<li><a href="#">The product</a></li>
-
</ul>
-
</li>
-
<li>
-
<a href="#">Services</a>
-
<ul>
-
<li><a href="#">Sevice one</a></li>
-
<li><a href="#">Sevice two</a></li>
-
</ul>
-
</li>
-
</ul>
-
</body>
-
</html>
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: -
.mainmenu ul ul{
-
background-color: #187eaf;
-
background-image: none !important;
-
}
-
-
.mainmenu li li{
-
background-color: #187eaf;
-
background-image: none !important;
-
}
-
-
.mainmenu li li:hover a{
-
background-color: #25abec;
-
background-image: none !important;
-
}
-
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.
Fair enough, I'll do that. Thanks for all your help.
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. - #nav ul li{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FFFFFF,endColorStr=#FFFFFF);
-
}
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.
I was unable to get that to work. Can you spot anything wrong in my code? -
.mainmenu ul ul{
-
background-color: #187eaf;
-
background-image: none;
-
}
-
-
.mainmenu li li{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf) !important;
-
background-color: #187eaf;
-
background-image: none;
-
}
-
.mainmenu li li:hover a{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#25abec);
-
background-color: #25abec;
-
background-image: none;
-
}
Can you post all the styles related to the menu?
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. -
.mainmenu{
-
clear: both;
-
height: 42px;
-
margin: 0;
-
width: 980px;
-
}
-
.mainmenu ul{
-
font-family: arial, 'times new roman', verdana, georgia, tahoma, sans-serif;
-
list-style: none;
-
margin: 0;
-
padding: 0;
-
text-align:center;
-
}
-
.mainmenu li{
-
display: inline-block;
-
margin: 0;
-
padding: 0;
-
z-index:1000;
-
height: 42px;
-
}
-
.mainmenu li a{
-
display: inline-block;
-
font-size: 13px;
-
font-weight: 700;
-
height: 33px;
-
padding: 9px 25px 0;
-
text-decoration: none;
-
}
-
.mainmenu li:hover{
-
}
-
.mainmenu ul ul{
-
float: left;
-
padding: 5px 0 10px 0;
-
position: absolute;
-
text-align: left;
-
width: 200px;
-
z-index: 1;
-
display: none;
-
}
-
.mainmenu li li{
-
clear: both;
-
text-align: left;
-
height: 30px;
-
float: none
-
}
-
.mainmenu li li:hover {
-
}
-
-
.mainmenu li ul li a {
-
font-size: 1em;
-
font-weight: normal;
-
height: auto;
-
padding: 2px 25px;
-
text-transform: none;
-
width: 150px;
-
background-image: none !important;
-
}
-
-
.mainmenu li ul li a, .mainmenu li.over li a {
-
text-decoration: none !important;
-
}
-
-
.mainmenu li:hover ul, .mainmenu li.over ul {
-
display: block;
-
}
-
-
.mainmenu{
-
background-color: #25abec;
-
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
-
background-image:-webkit-linear-gradient(#25abec,#1984b8);
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
-
}
-
.mainmenu li{
-
background-color: #25abec;
-
background-image:-moz-linear-gradient(top,#25abec,#1984b8);
-
background-image:-webkit-gradient(linear,left top,left bottom,from(#25abec),to(#1984b8));
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#1984b8);
-
}
-
.mainmenu li a{
-
color:#ffffff;
-
}
-
.mainmenu li:hover a{
-
background-image:-moz-linear-gradient(top,#23a3e1,#187eaf);
-
background-image:-webkit-gradient(linear,left top,left bottom,from(#23a3e1),to(#187eaf));
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#23a3e1,endColorStr=#187eaf);
-
}
-
-
.mainmenu ul ul{
-
background-color: #187eaf;
-
background-image: none;
-
}
-
-
.mainmenu li li{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf) !important;
-
background-color: #187eaf;
-
background-image: none;
-
}
-
.mainmenu li li:hover a{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#25abec,endColorStr=#25abec);
-
background-color: #25abec;
-
background-image: none;
-
}
-
This is overriding your other style. - .mainmenu li:hover a{
-
background-image:-moz-linear-gradient(top,#23a3e1,#187eaf);
-
background-image:-webkit-gradient(linear,left top,left bottom,from(#23a3e1),to(#187eaf));
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#23a3e1,endColorStr=#187eaf);
-
}
Change this: - .mainmenu li li{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf) !important;
-
background-color: #187eaf;
-
background-image: none;
-
}
to this - .mainmenu li li, .mainmenu li:hover li a{
-
float:none;
-
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#187eaf,endColorStr=#187eaf);
-
background-color: #187eaf;
-
background-image: none;
-
}
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?
Did you take out the !important? You have to take it out. Otherwise that overrides your other hover style.
Good point. I missed that. It works perfectly. Many, many, many thanks.
All you time has been much appreciated.
Not a problem. Good luck.
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?
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.
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
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...
|
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...
|
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...
|
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>...
|
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...
|
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...
|
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...
|
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...
|
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.
...
|
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...
|
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
|
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...
|
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...
|
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,...
|
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,...
|
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...
|
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...
|
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,...
|
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...
| |