bovan/IE6jQueryDropDown.html

## IE6jQueryDropDown.html
<!doctype html>
<html>
  <head>
    <title>IE6 test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
    body {
        font-size: 18px;
        line-height: 2;
    }
    a {
        color: #fff;
        font-weight: bold;
    }
    ul, li {
        margin: 0;
        padding: 0;
        list-style-type: none;
        background-color: #000;
    }
    .header {
        width: 600px;
        margin: 0 auto;
    }
    .nav {
        text-align: center;
        margin: 0 auto;
        width: 100px;
        position:relative;
    }
    #menu {
        position:absolute;
        top: 0;
        right:0;
    }
    .nav ul li ul {
        display:none;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script>
    $(document).ready(function(){
        $('.nav > ul > li').live('mouseover mouseout', function(e) {

        if(e.type == 'mouseover')
            $('ul', this).show();
        else
            $('ul', this).hide();

        });
    });
    </script>
  </head>
  <body>
      <div class="header">
          <p>This is a dropdown menu.</p>
          <p>In FF3.6, Chrome7,IE8 and IE8 w/compatibility view you can also hover
             over the subitems and they will stay open.</p>
          <p>By putting .nav to position:relative, and #menu to position:absolute,
             it also started working in IE6.</p>
      </div>
      <div class="nav">
          <ul id="menu">
              <li>
                  <a href="#">TopMenu</a>
                  <ul>
                      <li>
                          <a href="#">SubMenu</a>
                      </li>
                      <li>
                          <a href="#">SubMenu2</a>
                      </li>
                  </ul>
              </li>
          </ul>
      </div>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>IE6 test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style type="text/css">
	body {
	font-size: 18px;
	line-height: 2;
	}
	a {
	color: #fff;
	font-weight: bold;
	}
	ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: #000;
	}
	.header {
	width: 600px;
	margin: 0 auto;
	}
	.nav {
	text-align: center;
	margin: 0 auto;
	width: 100px;
	position:relative;
	}
	#menu {
	position:absolute;
	top: 0;
	right:0;
	}
	.nav ul li ul {
	display:none;
	}
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script>
	$(document).ready(function(){
	$('.nav > ul > li').live('mouseover mouseout', function(e) {

	if(e.type == 'mouseover')
	$('ul', this).show();
	else
	$('ul', this).hide();

	});
	});
	</script>
	</head>
	<body>
	<div class="header">
	<p>This is a dropdown menu.</p>
	<p>In FF3.6, Chrome7,IE8 and IE8 w/compatibility view you can also hover
	over the subitems and they will stay open.</p>
	<p>By putting .nav to position:relative, and #menu to position:absolute,
	it also started working in IE6.</p>
	</div>
	<div class="nav">
	<ul id="menu">
	<li>
	<a href="#">TopMenu</a>
	<ul>
	<li>
	<a href="#">SubMenu</a>
	</li>
	<li>
	<a href="#">SubMenu2</a>
	</li>
	</ul>
	</li>
	</ul>
	</div>
	</body>
	</html>