设定Li高度的问题

mimouzao 2012-04-19 09:11:50



<!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 runat="server">

<title>scrollTest</title>

<style type="text/css">

.div {	

	border-right: #00ffff 1px solid;

	border-top: #00ffff 1px solid;

	border-left: #00ffff 1px solid;

	border-bottom: #00ffff 1px solid;

}

 <!--

  

ul {

  margin: 0;

  padding: 0;

  list-style: none;

  border-right: 1px solid #ccc;

   font: normal 12px verdana;

  }

  

ul li ul {

  margin: 0;

  padding: 0;

  list-style: none;

  border-bottom: 1px solid #ccc;

  }

  

ul li {

  position: relative;

  float:left;

  width: 80px;

  text-align:center;

  }

  

ul li ul li {

  position: relative;

  float:inherit;

  }

  

li ul {

  position: absolute ;

  left: 0px; 

  top: 24px;

  display: none;



  }

/* Styles for Menu Items */

li a:hover{

    background: #146C9C;

    color: #fff;

  }



ul li a {

  display: block;

  text-decoration: none;

  color: #777;

  background: #fff; /* IE6 Bug */

  padding: 5px;

  border: 1px solid #ccc; /* IE6 Bug */

  border-right:0;

  height:12px;

  }

  

ul li ul li a {

  display: block;

  text-decoration: none;

  color: #777;

  background: #fff; /* IE6 Bug */

  padding: 5px;

  border: 1px solid #ccc; /* IE6 Bug */

  border-bottom:0;

  border-right:0;

  }

  

/* Holly Hack. IE Requirement \*/

* html ul li { float: left; height: 1%; }

* html ul li a { height: 1%; }

/* End */

li:hover ul, li.over ul { display: block; } /* The magic */

-->

</style>



<script type="text/javascript" language="javascript">



    // JavaScript Document

    startList = function () {

        if (document.all && document.getElementById) {

            navRoot = document.getElementById("nav1");

            for (i = 0; i < navRoot.childNodes.length; i++) {

                node = navRoot.childNodes[i];

                if (node.nodeName == "LI") {

                    node.onmouseover = function () {

                        this.className += " over";

                    }

                    node.onmouseout = function () {

                        this.className = this.className.replace(" over", "");

                    }

                }

            }

        }

   }

    window.onload = startList;



  </script>



</head>

<body >

<form id="frm1" runat="server">



<ul id="nav1"style="margin-top:15px; margin-left:70px">

        <li id="01"><a href="#">nothing is impossible</a>

            <ul>

                <li><a href="#">History</a></li>

                <li><a href="#">Team</a></li>

                <li><a href="#">Offices</a></li>

            </ul>

        </li>

        <li id="02"><a href="#">test2</a>

            <ul>

                <li><a href="#">History</a></li>

                <li><a href="#">Team</a></li>

                <li><a href="#">Offices</a></li>

            </ul>

        </li>

        <li id="03"><a href="#">test3</a>

            <ul>

                <li><a href="#">apple</a></li>

                <li><a href="#">juice</a></li>

                <li><a href="#">peach</a></li>

            </ul>

        </li>

        <li id="04" style="border-right: 1px solid #ccc;"><a href="#">test4</a>

            <ul>

                <li><a href="#">United</a></li>

                <li><a href="#">France</a></li>

                <li><a href="#">USA</a></li>

                <li><a href="#">Australia</a></li>

            </ul>

        </li>

    </ul>



</form>



</body>

</html>