CSS 的2级下拉菜单代码

 代码如下 复制代码

<style>
.Nav {
}
.Nav li{
  float:left;
  display:block;
  position:relative;
}
.Nav a{
  float:left;
  display:block;
  position:relative;
  padding:2px 10px 2px 10px;
  font-size:13px;
  text-decoration: none;
}
.Nav li a:hover
{
  color:#ffffff;
  background:#ea0000;
}
.Nav li table {
  display:none;
  border-collapse:collapse;
}
.Nav li:hover table, .Nav a:hover table {
  display:block;
  position:absolute;
  top:18px;
  left:0;
  background:#ea0000;
}
.Nav li:hover table a, .Nav a:hover table a {
  float:none;
  background:#f2f2f2;
  color:#000;
  width:120px;
  border-bottom:1px solid #fff;
}
.Nav li:hover table a:hover, .Nav a:hover table a:hover {
  background:#565656;
  color:#fff;
}
</style>
<div class='Nav'>
<li>
  <a href='#'>产品
  <table><tr><td>
    <a href='#1'>内容管理系统</a>
    <a href='#2'>竞争情报系统</a>
  </td></tr></table>
  </a>
</li>
<li>
  <a href='#'>客户服务
  <table><tr><td>
    <a href='#1'>技术支持</a>
    <a href='#2'>留言反馈</a>
    <a href='#3'>在线帮助</a>
  </td></tr></table>
  </a>
</li>
</div>
 
时间： 2024-07-29 21:42:50

CSS 的2级下拉菜单代码的相关文章

jQuery简单实现两级下拉菜单效果代码_jquery

本文实例讲述了jQuery简单实现两级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款两级下拉菜单,jquery插件版,在IE6/IE7/IE8下运行良好,在本示例中,菜单仅显示了四组,不过原理是一样的,菜单较长的话直接复制其中一组就行了,直到满足你的应用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-2l-slideout-menu-codes/ 具体代码如下: <!DOCTYPE html PUBL

纯CSS导航条下拉菜单代码

提示:您可以先修改部分代码再运行 纯CSS导航条下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

css 下拉菜单代码

提示:您可以先修改部分代码再运行 css 下拉菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

一个用纯CSS制作的网页下拉菜单

网页特效代码实例:一个用纯CSS制作的网页下拉菜单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[ <!ELEMENT a (#PCDATA | table)* > ]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang

css结合js制作下拉菜单的具体实现

 这篇文章主要介绍了css结合js制作下拉菜单的具体实现,需要的朋友可以参考下  代码如下: <%@page pageEncoding="utf-8"  contentType="text/html;charset=utf-8" %>    <HTML>  <HEAD>  <title>WebForm5</title>    <style>/* Root = Horizontal, Second

CSS技巧分享：如何用css制作横排二级下拉菜单

原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大家来制作横排二级下拉菜单,让我共同来学习吧. 首页我们打看dreamweaver或其它编辑器,创建一个名为nav的导航菜单 <div class="nav"> <ul> <li><a href="#">栏目一</a&

jquery实现漂亮的二级下拉菜单代码_jquery

本文实例讲述了jquery实现漂亮的二级下拉菜单代码.分享给大家供大家参考.具体如下: 这里介绍一款基于jquery实现的网站下拉菜单,黑色风格,很漂亮,本菜单需要点击主菜单后的小三角符号才下拉出二级菜单,并不是有些菜单,是鼠标移上主菜单的时候就滑过,至于哪一种,就看个人的喜好了 先来看看运行效果: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/ 具体代码如下: <!DOCTYPE ht

jQuery实现带动画效果的多级下拉菜单代码_jquery

本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

jQuery结合CSS制作动态的下拉菜单_jquery

当要在一个有限的导航菜单空间放一个大的子菜单时,我们一般采用下拉菜单的形式来弥补空间的不足.本文将带大家用最少的时间,使用jQuery和CSS结合制作一个动态的下拉菜单. XHTML 首先是要在页面的head部分引入jquery库,这是必须的. <script type="text/javascript" src="js/jquery.js"></script> 接着我使用一个无序列表来构建菜单. <ul class="men