1、HTML布局（使用ul）：
<body> <ul> <li class="list" id="lis"> <a href="#" id="link">微博</a> <ul id="ul1"> <li><a href="#">评论</a></li> <li><a href="#">私信</a></li> <li><a href="#">@我</a></li> </ul> </li> </ul> </body>
要实现下滑列表，当鼠标移动到下滑列表时，列表还能显示，就必须将列表包含在绑定事件里面
2、CSS样式
1、ul有默认的内外边距要去除
2、li有默认的列表样式要去掉
3、a不是区块元素，需要变成区块元素
ul{ padding:0; margin:0;} li{ list-style:none;} .list{ width:120px; height:30px; border:1px solid red;} .list a{ line-height:30px; text-align:center; display:block; text-decoration:none; color:#000; background:#f1f1f1;} ul ul{ width:120px; border:1px solid #333; background:#FFC; display:none;} ul ul li{ text-align:center; line-height:30px;} ul ul li a{ text-decoration:none; color:blue;} ul ul li a:hover{ color:#0C0; background:#90C;}
注解：
1、希望把某个元素移除你的视线：
1、display:none; 显示为无
2、visibility:hidden; 隐藏
3、width height 将宽高设置为0
4、透明度() 将透明度设置为百分百
5、left top
6、拿一个白色DIV盖住它
7、margin负值
------------
3、js实现下滑列表原理
<script type="text/javascript"> window.onload = function(){ var lin = document.getElementById("link"); var li = document.getElementById('lis'); var ul = document.getElementById('ul1'); li.onmouseover = show; li.onmouseout = hide; function show(){ ul.style.display = "block"; lin.style.background = 'yellow'; } function hide(){ ul.style.display = "none"; lin.style.background = '#f1f1f1'; } } </script>
注解：
1、JS中如何通过id获取元素：
document get element by id 'link'
docuemnt.getElementById('link');
2、事件：鼠标事件、键盘事件、系统事件、表单事件、自定义事件……
onclick
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove 就像是鼠标抚摸一样的事件
……
onload 加载完以后执行……
window.onload = 事情
img.onload
body.onload
……
3、如何添加事件：
元素.onmouseover
4、函数：可以理解为-命令，做一些事~~
function abc(){ // 肯定不会主动执行的！
……
}
1、直接调用：abc();
2、事件调用：元素.事件 = 函数名 oDiv.onclick = abc;
function (){} 匿名函数
元素.事件 = function (){};
5、测试：
alert(1); 带一个确定按钮的警告框
alert('ok'); 'ok' 字符串
alert("ok");
6、变量：
var li = document.getElementById('lis');
var num = 123;
var name = 'leo';