代碼沒報(bào)錯 但是為什么二級菜單的高度停在3px就不動了呢?求解各位大神~~~~
<!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 charset="utf-8" />
? ? <title></title>
? ? <style type="text/css">
? ? ? ? .top-nav
? ? ? ? {
? ? ? ? ? ? font-size: 14px;
? ? ? ? ? ? font-weight: bold;
? ? ? ? ? ? list-style: none;
? ? ? ? }
? ? ? ? .top-nav li
? ? ? ? {
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-right: 1px;
? ? ? ? }
? ? ? ? .top-nav li a
? ? ? ? {
? ? ? ? ? ? line-height: 34px;
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? background: #3f240e;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? display: block;
? ? ? ? ? ? width: 80px;
? ? ? ? ? ? text-align: center;
? ? ? ? }?
? ? ? ? .top-nav ul:after,.top-nav ul:before{
? ? ? ? ? ? content:"";
? ? ? ? ? ? display:block;
? ? ? ? ? ? height: 0;
? ? ? ? }
? ? ? ? .top-nav ul:after{
? ? ? ? ? ? clear:both;
? ? ? ? }
? ? ? ? .top-nav ul
? ? ? ? {
? ? ? ? ? ? zoom:1;
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? /* display: block; */
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? position: absolute;
? ? ? ? ? ? height: 0;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .top-nav ul li{
? ? ? ? ? ? float:left;
? ? ? ? }
? ? ? ??
? ? ? ? .top-nav li a:hover
? ? ? ? {
? ? ? ? ? ? background: url(http://img1.sycdn.imooc.com//5461b50d0001e28000010034.jpg) 0 0 repeat-x;
? ? ? ? }
? ? ? ? .note
? ? ? ? {
? ? ? ? ? ? color: #3f240e;
? ? ? ? ? ? display: block;
? ? ? ? ? ? background: url(http://img1.sycdn.imooc.com//5461b50d0001e28000010034.jpg) 0 0 repeat-x;
? ? ? ? }
? ? ? ? .corner
? ? ? ? {
? ? ? ? ? ? display: block;
? ? ? ? ? ? height: 11px;
? ? ? ? ? ? background: url(http://img1.sycdn.imooc.com//5461b5620001410d00170011.jpg) 31px 0 no-repeat;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? var t; //將這里的定義放在函數(shù)中聲明 將產(chǎn)生抖動(未清理定時(shí)器)
? ? ? ? window.onload = function () {
? ? ? ? ? ?//鼠標(biāo)經(jīng)過時(shí)的效果
? ? ? ? ? ?//bug: 鼠標(biāo)多次快速移動 導(dǎo)致子菜單抖動 ok 抖動未清除setTimeout
? ? ? ? ? ? var Lis = document.getElementsByTagName("li");
? ? ? ? ? ? for(var i=0,len=Lis.length; i<len; i++){ ?
? ? ? ? ? ? ? ? Lis[i].onmousemove = function(){
? ? ? ? ? ? ? ? ? ? var u = document.getElementById('mnuUL');
? ? ? ? ? ? ? ? ? ? //var tmove,tleave;?
? ? ? ? ? ? ? ? ? ? if(u!=undefined)
? ? ? ? ? ? ? ? ? ? ? ? clearTimeout(t);
? ? ? ? ? ? ? ? ? ? ? ? ChangeH(u.id,1);
? ? ? ? ? ? ? ? } ?
? ? ? ? ? ? ? ? Lis[i].onmouseleave = function () {
? ? ? ? ? ? ? ? ? ? var u = document.getElementById('mnuUL');
? ? ? ? ? ? ? ? ? ? if (u != undefined)?
? ? ? ? ? ? ? ? ? ? ? ? clearTimeout(t);
? ? ? ? ? ? ? ? ? ? ? ? ChangeH(u.id,-1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? function ChangeH(id, count) {
? ? // ?根據(jù)ID找到ulList,同時(shí)得到其高度
? ? ? ? ? ? var ulList = document.getElementById(id);
? ? ? ? ? ? var h = ulList.offsetHeight;
? ? ? ? ? ? //var t = null;
? ? ? ? ? ? clearTimeout(t);
? ? ? ? ? ? h += count;
? ? ? ? ? ? if (count > 0) {
? ? ? ? ? ? ? ? if (h <= 42) {
? ? ? ? ? ? ? ? ? ? // ?將高度賦值給ulList,同時(shí),不斷調(diào)用本函數(shù)
? ? ? ? ? ? ? ? ? ? ulList.style.height = h + "px";
? ? ? ? ? ? ? ? ? ? //tmove = setTimeout("ChangeH('" + id + "',1)", 10);
? ? ? ? ? ? ? ? ? ? t = setTimeout("ChangeH('" + id + "',1)", 10);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? if (h > 0) {
? ? ? ? ? ? ? ? ? ? // ?將高度賦值給ulList,同時(shí),不斷調(diào)用本函數(shù)
? ? ? ? ? ? ? ? ? ? ulList.style.height = h + "px";
? ? ? ? ? ? ? ? ? ? //tleave = setTimeout("ChangeH('" + id + "',-1)", 10);
? ? ? ? ? ? ? ? ? ? t = setTimeout("ChangeH('" + id + "',-1)", 10);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? else {
? ? ? ? ? ? ? ? ? ? //ulList.style.display = "none";
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? </script>
</head>
<body>
? ? <ul class="top-nav">
? ? ? ? <li><a href="#"><span class="note">慕課網(wǎng)</span></a> </li>
? ? ? ? <li><a href="#">課程大廳</a> </li>
? ? ? ? <li><a href="#">學(xué)習(xí)中心</a>
? ? ? ? ? ? <ul id="mnuUL">
? ? ? ? ? ? ? ? <span class="corner"></span>
? ? ? ? ? ? ? ? <li><a href="#">前端課程 </a></li>
? ? ? ? ? ? ? ? <li><a href="#">手機(jī)開發(fā)</a> </li>
? ? ? ? ? ? ? ? <li><a href="#">后臺編程</a></li>
? ? ? ? ? ? </ul>
? ? ? ? </li>
? ? ? ? <li><a href="#">關(guān)于我們</a></li>
? ? </ul>
? ??
</body>
</html>
2016-07-01
在我這里是正常顯示的。
你換個瀏覽器試試唄。