www.webdeveloper.com
Results 1 to 9 of 9

Thread: Drop down menu

  1. #1
    Join Date
    Apr 2006
    Posts
    65

    Drop down menu

    This code works well in FF but not in IE, why? and how could
    I work this right in IE.

    css
    div#listmenu ul li ul {display:none;}
    div#listmenu ul li:hover ul {display:block; }
    xhtml
    <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>
    <li><a href="#">What's New</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body>

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    IE doesn't recognize :hover for anything but anchors.

  3. #3
    Join Date
    Apr 2006
    Posts
    65
    and so how do I do it in anchor? you mean the <a> tag?

  4. #4
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Yes. A couple of tactics are to use mouseover/mouseout on the <li> or a behavior fix for IE.

    http://www.vladdy.net/demos/iepseudoclassesfix.html

  5. #5
    Join Date
    Apr 2006
    Posts
    65
    Quote Originally Posted by ray326
    Yes. A couple of tactics are to use mouseover/mouseout on the <li> or a behavior fix for IE.

    http://www.vladdy.net/demos/iepseudoclassesfix.html
    I dont know where did I go wrong, and so I simply add this to css

    div#listmenu ul li:hover ul {display:block; behavior: url('IEFixes.htc');}
    the file is already there and still wont work .

  6. #6
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    I don't know, I don't mess with this stuff but a quick glance at Vladdy's page made it look like the selector had to be something like,

    ul, li { behavior: url('IEFixes.htc') }
    div#listmenu ul li:hover ul, div#listmenu ul li.hover ul { display:block }

  7. #7
    Join Date
    Apr 2006
    Posts
    65
    Hi ray,

    The code works! but it over lapse the link Customer in IE and works fine still in FF.

    here's the complete code(I simple mess the code from Charles Wyke-Smith stylin with CSS)

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Untitled Document</title>

    <
    style type="text/css">
    body {font-familyverdanaarialsans-seriffont-size:100behavior:url(css/csshover.htc);}
    * {
    margin:0padding:0;} 

    ulli behavior:url(css/csshover.htc);} /*updated file from Charles Wyke-Smith and so the hover works in IE*/

    div#listmenu ul {margin:0 0 0 30px;
        
    }
    div#listmenu li {
        
    float:left;    
        
    position:relative
        list-
    style-type:none;    
        
    background-color:#FFA; 
        
    border-right:1px solid #069;     
        
    }
    div#listmenu li:first-child {
        
    border-left:1px solid #069; 
        
    }
    div#listmenu li:hover { 
        
    background-color:#FFF;
        
    }
    div#listmenu a {
        
    padding:0 6px
        
    text-decoration:none;    
        
    color:#069;    
        
    }
    div#listmenu a:hover {
        
    color:#F33;
        
    }


    div#listmenu ul li ul {
        
    margin:0
        
    position:absolute
        
    width:10em
        
    left:-1px
        }
    div#listmenu ul li ul li {
        
    width:100%; 
        
    border-left:1px solid #069;     border-bottom:1px solid #069;
        
    border-right:1px solid #069;
        
    }
    div#listmenu ul li ul li:first-child {
        
    border-top:1px solid #069; 
        
    }

    div#listmenu ul li ul {display:none;} 
    div#listmenu ul li:hover ul {display:block;} 
    </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>
            <
    li><a href="#">What's New</a></li>
          </ul>
      </li>
      </ul>
    </div>
    </body>
    </html> 

  8. #8
    Join Date
    Apr 2003
    Posts
    240
    You can also use this dash of JavaScript. Just make sure you add the ID referenced in the script to match the ID of the menu, and then reference the class that the script creates in your stylesheet.

    Code:
    menuHover = function() {
    		var navRoot = document.getElementById("menu").getElementsByTagName("li");
    		for (var i=0; i<navRoot.length; i++) {
    			navRoot[i].onmouseover=function() {
    				this.className+=" menuHover";
    			}
    			navRoot[i].onmouseout=function() {
    				this.className=this.className.replace(new RegExp(" menuHover\\b"), "");
    			}
    		}
    }
    if (window.attachEvent) window.attachEvent("onload", menuHover);
    Your unordered list would have to have an ID attribute of "menu" added to the <ul> tag, and you will have to replace div#listmenu ul li:hover ul {display:block; } with #menu li.menuHover ul {display:block;} in your stylesheet.

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Remove this:
    if (window.attachEvent) window.attachEvent("onload", menuHover);
    use a simple changing of className function called onload;
    Code:
    function hov(){
    var navRoot = document.getElementById('menu').getElementsByTagName('li');
    		for (var i=0; i<navRoot.length; i++) {
    			navRoot[i].onmouseover=function() {
    				this.className='menuHover';
    			}
    			navRoot[i].onmouseout=function() {
    				this.className='menuOut';
    			}
    		}
    }
    onload=hov;

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles