SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div has to be attached for hack to work?

    In this code using the Peter Nederlof www.xs4all.nl hack to show the hover effect on an li tag it seems it only works with the div#menulist. When I change it to #menulist it won't work??? I thought it doesn't matter if we use #menulist or div#menulist samething right?

    div#listmenu li:hover {background-color: #FFFFFF; /*sets the background of the menu items */}

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use #menu li:hover all the time in my dropdown menus, and I (almost) never have any problems getting the effect I want to work.

    Care to provide some example code for the project you are working on (or even better, a link to the full, complete Web page)?

  3. #3
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok attached is the zip with the hack to make the hover work. In the code below you can see in the body a path to it.

    Now if you look at: #listmenu li:hover {background-color: #FFFFFF; /*sets the background of the menu items */}

    it won't work but add the div in front of it and it does?


    HTML 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" lang="en" xml:lang="en">
    <head>
    <title>Horizontal menu demo</title>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="en-us" />
    
    <!--LIST-BASED MENUS WITHOUT IDs OR CLASSES ON THE LIST ELEMENTS-->
    <!-- tested in NN7, Opera, Firefox, IE6, IE5.5, IE5, on Windows and Safari and IE5 on Mac -->
    
    <style type="text/css">
    body {font-family: verdana, arial, sans-serif; font-size:100%; behavior:url(css/csshover.htc);}
    * {margin:0; padding:0;} 
    
    /* the horizontal menu starts here */
    div#listmenu {
    	width:100%; 	/* makes the div full width */
    	border-top:1px solid #069;	/* draws line on top edge of div */
    	border-bottom:1px solid #069;	 /* draws line on bottom edge of div */
    	font-size:.8em;	/* SET FONT-SIZE HERE */
    	background-color:#CCF; /* colors the div */
    	margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
    	float:left;
    	}
    #listmenu ul {margin:0 0 0 30px;}
    * html #listmenu ul {float:left; border-left:1px solid #069; margin-left:15px;}
    * html a {display:block;}
    #listmenu ul li ul {margin:0; width:10em;}
    #listmenu li {float:left; background-color:#FFA; list-style:none; border-right:1px solid #069;}
    #listmenu li:hover {background-color: #FFFFFF; /*sets the background of the menu items */
    	}
    #listmenu li:first-child {border-left:1px solid #069;}
    #listmenu a {text-decoration:none; color:#069; padding:0 6px;}
    #listmenu a:hover {color:#F33;}
    
    /* the horizontal menu ends here */
    /* END OF LIST-BASED MENU */
    </style>
    
    </head>
    <body>	
    <div id="listmenu">
     <ul>
      <li><a href="#">Customers</a>
      	<ul> <!-- drop down menu items -->
    		<li><a href="#">Our Services</a></li>
    		<li><a href="#">FAQs</a></li>
    		<li><a href="#">Sign Up</a></li>
    		<li><a href="#">Support</a></li>
    		</ul>
    		</li>
      <li><a href="#">Members</a></li>
      <li><a href="#">Dealers</a></li>
      <li><a href="#">Distributors</a></li>
      </ul>
    </div>
    </body>
    </html>
    Attached Files Attached Files

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would move "listmenu" to the <ul> tag below the <div> and then replace all references of div#listmenu ul with #listmenu, that should solve your problem (and if you ever decide to use a dash of javascript to make your dropdown menu work with MSIE 5, 5.5 and 6, you already have an ID name that you can use to reference the menu's list items).

  5. #5
    SitePoint Zealot
    Join Date
    Jun 2006
    Posts
    139
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks


Bookmarks

Posting Permissions

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