Results 1 to 2 of 2

Thread: Dropdown Style Error

  1. #1
    Join Date
    Mar 2011
    Posts
    47

    Dropdown Style Error

    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:

    HTML Code:
    <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:

    Code:
    /*------------------------------------*\
    	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.

  2. #2
    Join Date
    Sep 2011
    Posts
    46
    Your HTML syntax is incorrect. Just run it through the W3 Validator to see where you go wrong. If that doesn't cure it, read this tutorial, because your CSS looks pretty messy, too: Create a Drop-down/Fly-out Menu with CSS.

Similar Threads

  1. style definition in linked style sheet
    By terecsi in forum Web Design, HTML Reference and CSS
    Replies: 0
    Last Post: 11 Sep 2010, 07:29 PM
  2. "this" operator error or "style.left" error not sure
    By gman1103 in forum Client & Server Side Scripting (PHP, ASP, JavaScript)
    Replies: 1
    Last Post: 26 Feb 2009, 08:53 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •