HTML中的导航栏的设计

导航栏中鼠标悬停在那，可以出现下面的效果，那得咋做图片说明

<!DOCTYPE html>







.dropdown{width:70px; height:50px; background: #25C764; top:100px; left:100px; font-size:20px; line-height:40px; text-align:center; } .dropdown ul{height:120px; width:70px; } .dropdown ul li{height:100%; width:100%; background:#25C764; font-size:20px; padding:3px; }

用户
  • 精英团
  • 高校帮

http://www.jq22.com/jquery-info12767

参考这个，也可以直接使用这个。

这不就只单单是鼠标事件么

那要如何做出这样的效果呢

简单做和简单的来说，如果有下拉菜单，你就把下拉的菜单都写好 定位到想让他出现的位置，然后隐藏掉。
然后js使用mouseover事件，当鼠标移入到导航栏时，你让对应的下拉菜单display:block 这个效果就出来了

<!DOCTYPE html>







.dropdown{width:70px;height:50px;background: #25C764;top:100px; left:100px;font-size:20px;line-height:40px; text-align:center;} .dropdown ul{height:120px;width:70px;} .dropdown ul li{height:100%;width:100%;background:#25C764; font-size:20px; padding:3px;}

用户
  • 精英团
  • 高校帮

图片说明