在淘宝，京东等其他网页上我们能够看到，当鼠标移上去的时候，能够使其下面出现其它选项，现在就演示一下这种功能
主要是用到css里面的display，以及鼠标触发的事件onmouseover（），和onmouseout()方式，在加上css样式的设置和标签之间额使用就能实现。
具体如下：
1，为了很好的控制，采用了列表的样式，并且在设置css样式时很方便
2，采用了标签的样式，能够让鼠标移上去对其他的有反应
具体的js函数写的功能：
html部分的代码：
-
最新新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
-
新浪新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
-
社会新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
-
最新新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
除了上面很重要css的设置也很重要，如下：
#newsid1 { list-style:none; } #newsid1 li ul{ list-style:none; margin:0px; padding:0px; } #newsid1 li{ float:left; width:220px; text-align:center; background-color:#80ff00; } #newsid1 li a{ color:#8080ff; text-decoration:none; text-align:center; line-height:30px; } #newsid1 li a:hover{ color:#400080; background-color:#ffffff; } #newsid1 li ul li{ line-height:30px; color:#ff8040; background-color:#808000;; } #newsid1 li ul{ display:none; }
效果图 1：鼠标没有移上去时候
效果图 2 ：
完整代码：
Menufloat.html #newsid1 { list-style:none; } #newsid1 li ul{ list-style:none; margin:0px; padding:0px; } #newsid1 li{ float:left; width:220px; text-align:center; background-color:#80ff00; } #newsid1 li a{ color:#8080ff; text-decoration:none; text-align:center; line-height:30px; } #newsid1 li a:hover{ color:#400080; background-color:#ffffff; } #newsid1 li ul li{ line-height:30px; color:#ff8040; background-color:#808000;; } #newsid1 li ul{ display:none; }
- 最新新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
- 新浪新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
- 社会新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
- 最新新闻
- 最新新闻内容摘要《机密》1
- 最新新闻内容摘要《机密》2
- 最新新闻内容摘要《机密》3
- 最新新闻内容摘要《机密》4
- 最新新闻内容摘要《机密》5
