mowen10
01 Nov 2011, 07:25 AM
Hi, I seem to be having problems with the way my dropdown menu is displayed in Internet Explorer. I have added the following code in my file:
<div id="navigation"><!--BEGIN NAVIGATION-->
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="aboutus.php">About Us</a>
<ul>
<li><a href="link1.php">Link 1</a></li>
<li><a href="link2.php">Link 2</a></li>
<li><a href="link3.php">Link 3</a></li>
<li><a href="link4.php">Link 4</a></li>
<li><a href="link5.php">Link 5</a></li>
<li><a href="link6.php">Link 6</a></li>
<li><a href="link7.php">Link 7</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="link11.php">Link 11</a></li>
<li><a href="link12.php">Link 12</a></li>
<li><a href="link13.php">Link 13</a></li>
<li><a href="link14.php">Link 14</a></li>
</ul>
</ul>
</div>
</li>
The following is the stylesheet that I have:
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
margin-top:20px;
margin-left:25px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:15px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#000;
background:#fff;
text-decoration:none;
font-size: 11px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color:#3c4b51;
text-transform:uppercase;
}
#nav a:hover{
color:#fff;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#cbccce; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(0,0,0,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#cbccce;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#ee1d25;
}
For some reason this shows up fine in Opera and Mozilla but internet explorer shows an extra grey bit after i have highlighted a selection for example Link1.
If somebody could please help me fix this, would really appreciate it.
Thanks in advance.
<div id="navigation"><!--BEGIN NAVIGATION-->
<ul id="nav">
<li><a href="index.php">Home</a></li>
<li><a href="aboutus.php">About Us</a>
<ul>
<li><a href="link1.php">Link 1</a></li>
<li><a href="link2.php">Link 2</a></li>
<li><a href="link3.php">Link 3</a></li>
<li><a href="link4.php">Link 4</a></li>
<li><a href="link5.php">Link 5</a></li>
<li><a href="link6.php">Link 6</a></li>
<li><a href="link7.php">Link 7</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="link11.php">Link 11</a></li>
<li><a href="link12.php">Link 12</a></li>
<li><a href="link13.php">Link 13</a></li>
<li><a href="link14.php">Link 14</a></li>
</ul>
</ul>
</div>
</li>
The following is the stylesheet that I have:
/*------------------------------------*\
NAV
\*------------------------------------*/
#nav{
list-style:none;
margin-top:20px;
margin-left:25px;
/* Clear floats */
float:left;
width:100%;
/* Bring the nav above everything else--uncomment if needed.
position:relative;
z-index:5;
*/
}
#nav li{
float:left;
margin-right:15px;
position:relative;
}
#nav a{
display:block;
padding:5px;
color:#000;
background:#fff;
text-decoration:none;
font-size: 11px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
color:#3c4b51;
text-transform:uppercase;
}
#nav a:hover{
color:#fff;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#cbccce; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(0,0,0,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#nav ul li{
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background:#cbccce;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
background:#ee1d25;
}
For some reason this shows up fine in Opera and Mozilla but internet explorer shows an extra grey bit after i have highlighted a selection for example Link1.
If somebody could please help me fix this, would really appreciate it.
Thanks in advance.