写了几遍，都不满意，删了重写，突然就符合我的预想了。
编写的时候要不断的完善自己的思路。选择适合的思路。
BODY:
尽量简化结构。
语义化classname
<body> <div id="menubox" class="menubox"> <div id="menutitle" class="menutitle"> <div class="hr"></div> <div class="mbtext">Menu</div> </div> <ul id="menu" class="menu"> <li class="list"><a href="#">All Select</a></li> <li class="list"><a href="#">BackTop</a></li> <li class="list"><a href="#">Save To Local</a></li> <li class="list"><a href="#">Slide</a></li> <li class="list"><a href="#">Tab</a></li> <li class="list"><a href="#">仿宋</a></li> </ul> </div></body>
CSS:
base.css | common.css | page.css
有层次的编写属性：尺寸 - 位置 - 其他 ps:方便阅读
考虑在浏览器自带的编辑器里编辑，方便预览
<link rel="stylesheet" ype="text/css" href="css/ibase.css" /><style rel="stylesheet" type="text/css">.menubox{width:250px;height:100%;position: absolute;top:0;left:50%;margin-left:-125px;background-color: #F5F5F5;font-family: 'courier new', 'FangSong'; //courier new字体系统自带，默认是关闭状态，右击显示-moz-box-shadow: 0px 0px 20px #000000;-webkit-box-shadow: 0px 0px 20px #000000;box-shadow: 0px 0px 20px #000000;overflow: hidden;}.menutitle{width:100%;height:16px;margin-top:40px;overflow: hidden;text-align: center;color: #000;}.hr{width:200px;height:0;margin-left:25px;margin-top:8px;border-bottom: 1px solid #000;}.mbtext{width:70px;margin-left: 90px;margin-top:-8px;background-color:#F5F5F5;text-align: center;}.menu{margin-top:40px;color: #696969;font-size:15px;text-align: center;}.menu .list{margin-top:20px;padding: 0 0 3px 0;cursor: default;}a{color:#696969;}a:hover{text-decoration: none;color:#000;}.menu .underline{height:0;margin-top: -1px;border-top:1px solid #000;display: none;}</style>JS:
作用域/链
同一个js语句不能混合原声的js和jq.
<script type="text/javascript" src='/images/loading.gif' data-original="js/jquery-1.11.3.min.js"></script><script type="text/javascript">var lis = $("a");for(var i=0; i<lis.length; i++){lis[i].onmouseover = function(){var lineW = $(this).width();var lineL = $(this).position().left;var parent = $(this).parent();var lineClassName = "underline"; //以上变量待整合，到函数或者对象中if(parent.next().attr("class") != lineClassName) parent.after("<li ></li>");var underLine = parent.next();underLine.css("width",lineW);underLine.css("margin-left",lineL);underLine.fadeIn("slow");}lis[i].onmouseout = function(){ var parent = $(this).parent(); var underLine = parent.next(); var lineClassName = "underline"; if(underLine.attr("class") == lineClassName) underLine.fadeOut("slow"); //600毫秒 }}</script>新手一枚，这个目录是为我练习一些做的查询目录。 ps:暂时就想这些。
原标题：MENU jquery效果
关键词：jquery
我知道了 