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.
30  12002  Rabbit 12,516
Recognized Expert Moderator MVP
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.
Rabbit 12,516
Recognized Expert Moderator MVP
Works fine for me in IE 8.
I doesn't work at all for me.
Rabbit 12,516
Recognized Expert Moderator MVP
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?
Rabbit 12,516
Recognized Expert Moderator MVP
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?
Rabbit 12,516
Recognized Expert Moderator MVP
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.
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 href="http://www.shambhala.de/reisen/kailash.php"
title=""><span class="bullet"><img
src="http://www.shambhala.de/media/grafik/arrow_small.gif" width="9"
height="9"/> </span>Tibet</a><br/>
|
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 pointer hovers over the top-menu, the bottom margin of
the top-bar expands downwards. How could I make the hover menu to stack
on top of the main-body, not expanding the bottom margin of the top-bar?
I believe it has something to do with...
|
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 a page that uss it,
but I can't find an explanation anywhere. It would appear to be valid
css as a page which uses it
(http://www.meyerweb.com/eric/css/edge/menus/demo.html) validates, but
I can't find it mentioned in the CSS2 spec. (I'm not...
|
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>
<li><a href="page2.html">option 2</a></li>
<li><a href="page3.html">option 3</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 the
sub menu) when you mouse over items further down the sub menu list.
This only seems to happen when the sub menu is over the text of a
paragraph (try further down the page eg: "Confidentiality" - it
works!?)
| | |
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 CSS and a touch of Javascript, by combining a couple tutorials I found online. The bug is when you mouse-over the menu in IE, the sub-menu pops out, but will disappear when you mouse-over it, but it doesn't happen everytime. Sometimes, it works...
|
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 on one of the details in the main blue section. This only occurs in IE6. IE7 and FF work correctly.
The URL to the page is:
http://www.coralap.com/dies281css.aspx
Steps to reproduce:
1. Mouse over the top menu and verify the hover works.
2....
|
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 item(including anchor tag text) has to change to another color,
but since iam using anchor tag in LI tag, the text in the menu item is not changing color when i hover on the menu item(LI). (but changing color when i hover on the anchor tag Text).
But i...
|
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.
*Note: It is working fine in Safari and Firefox Mozilla but creating problem in IE
And here is the HTML code.
<span class="preload1"></span>
<span class="preload2"></span>
|
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 IE7 the menu displays and if I am very very careful with how I move the mouse I can sometimes manage to catch the submenu - particularly the first time the page is displayed. Usually the menu disappears before I can mouse over it. I guess this is...
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| | |
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
|
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
