li:hover in IE 8

Collapse
X
Collapse
 
  • Page of 3
  • Time
  • Show
Clear All
new posts
Previous 1 2 3 template Next
  • KeredDrahcir
    Contributor
    • Nov 2009
    • 426
    #1

    li:hover in IE 8

    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?
    Code:
    <div id="menu">
  <div class="mainmenu">
    <ul>
      <li>
        <a href='[I]path[/I]'>Home</a>
      </li>
      <li>
        <a href='[I]path[/I]'>Country Garden</a>
      </li>
      <li>
        <a href='[I]path[/I]'>Inner City Garden</a>
      </li>
      <li>
        <a href='[I]path[/I]'>Winter Garden</a>
        <ul>
          <li>
            <a href='[I]path[/I]'>Featured Products</a>
          </li>
          <li>
            <a href='[I]path[/I]'>Best Sellers</a>
          </li>
          <li>
            <a href='[I]path[/I]'>Special Offers</a>
          </li>
        </ul>
      </li>
      <li>
        <a href='[I]path[/I]'>Water Garden</a>
      </li>
      <li>
        <a href='[I]path[/I]'>Window Box</a>
      </li>
    </ul>
  </div>
</div>
    Code:
    .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.
    Tags: None
    • Rabbit
      Recognized Expert MVP
      • Jan 2007
      • 12517
      #2
      In IE there must be a declared <!DOCTYPE> for the :hover selector to work on other elements than the <a> element.

        Comment

        • KeredDrahcir
          Contributor
          • Nov 2009
          • 426
          #3
          I ALWYS have
          Code:
          <!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.

            Comment

            • Rabbit
              Recognized Expert MVP
              • Jan 2007
              • 12517
              #4
              Works fine for me in IE 8.

                Comment

                • KeredDrahcir
                  Contributor
                  • Nov 2009
                  • 426
                  #5
                  I doesn't work at all for me.

                    Comment

                    • Rabbit
                      Recognized Expert MVP
                      • Jan 2007
                      • 12517
                      #6
                      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.

                        Comment

                        • KeredDrahcir
                          Contributor
                          • Nov 2009
                          • 426
                          #7
                          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?

                            Comment

                            • Rabbit
                              Recognized Expert MVP
                              • Jan 2007
                              • 12517
                              #8
                              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.

                                Comment

                                • KeredDrahcir
                                  Contributor
                                  • Nov 2009
                                  • 426
                                  #9
                                  If thst's the case why does it work with different sites using the same code?

                                    Comment

                                    • Rabbit
                                      Recognized Expert MVP
                                      • Jan 2007
                                      • 12517
                                      #10
                                      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.

                                        Comment

                                        • KeredDrahcir
                                          Contributor
                                          • Nov 2009
                                          • 426
                                          #11
                                          Thanks. That's what I wanted to know.

                                            Comment

                                            • KeredDrahcir
                                              Contributor
                                              • Nov 2009
                                              • 426
                                              #12
                                              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.
                                              Code:
                                              .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.

                                                Comment

                                                • Rabbit
                                                  Recognized Expert MVP
                                                  • Jan 2007
                                                  • 12517
                                                  #13
                                                  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.

                                                    Comment

                                                    • KeredDrahcir
                                                      Contributor
                                                      • Nov 2009
                                                      • 426
                                                      #14
                                                      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.

                                                        Comment

                                                        • Rabbit
                                                          Recognized Expert MVP
                                                          • Jan 2007
                                                          • 12517
                                                          #15
                                                          This is the absolute minimum to get a gradient working with a drop down menu. Start with this and add back in your styles.
                                                          Code:
                                                          <!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>

                                                            Comment

                                                            Previous 1 2 3 template Next
                                                            Working...