css怎么把横向菜单变纵向_实现简洁漂亮二级菜单的2个实例

在程序开发中，经常用到二级菜单，这里给大家介绍2种：①实现纵向下拉二级菜单实例，②实现横向下拉二级菜单实例。

1、实现纵向下拉二级菜单实例

纵向下拉二级菜单如下图所示：

实现纵向下拉二级菜单实例效果图

具体代码实现如下(主要代码有参考注释)：

二级纵向下拉菜单

*{ margin:0; padding:0;}

ul, li { list-style:none;}

a { text-decoration:none;}

.menuStyle

{

border:1px solid #ccc;

border-right:none;

overflow:hidden;

float:left;

margin:10px 0 0 300px;

}

.menuStyle ul li { float:left;}

.menuStyle ul li a

{

width:120px;

height:40px;

text-align:center;

line-height:40px;

display:block;

border-right:1px solid #ccc;

background:#eee; color:#666;

}

.menuStyle ul li a:hover{ color:#f00; }

/* display:none;控制二级菜单初始不显示 */

.menuStyle ul li ul { position:absolute; display:none;}

.menuStyle ul li ul li { float:none;}

.menuStyle ul li ul li a

{

border-right:none;

border-top:1px dotted #ccc;

background:#f5f5f5;

}

/* display:block;控制二级菜单在鼠标移到菜单项上时显示二级菜单 */

.menuStyle ul li:hover ul{ display:block; }

• 首页

• 数码产品

  • 苹果
  • 华为
  • 小米
  • 魅族

• 家电产品

  • 电视
  • 冰箱
  • 电饭锅
  • 洗衣机

• 汽车产品

  • 宝马
  • 奔驰
  • 宾利
  • 别克
• 游戏产品
• 节能产品
• 快消产品
• 联系我们

2、实现横向下拉二级菜单实例

横向下拉二级菜单如下图所示：

实现横向下拉二级菜单实例效果图

具体代码实现如下(主要代码有参考注释)：

二级横向下拉菜单

*{ margin:0; padding:0;}

ul, li { list-style:none;}

a { text-decoration:none;}

.menuStyle

{

border:1px solid #ccc;

border-right:none;

overflow:hidden;

float:left;

margin:10px 0 0 300px;

}

.menuStyle ul li { float:left;}

.menuStyle ul li a

{

width:120px;

height:40px;

text-align:center;

line-height:40px;

display:block;

border-right:1px solid #ccc;

background:#eee; color:#666;

}

.menuStyle ul li a:hover{ color:#f00; }

/* display:none;控制二级菜单初始不显示 */

.menuStyle ul li ul

{

/* position:absolute;控制二级菜单横向显示，如没有此句或写作float:left;都不能使二级菜单横向显示 */

position:absolute;

display:none;

}

.menuStyle ul li ul li

{

/* float:none;控制二级菜单纵向显示；

float:left;控制二级菜单横向显示 */

float:left;

border:1px solid #ccc;

border-right:none;

}

.menuStyle ul li ul li a

{

border-right:none;

border-top:1px dotted #ccc;

background:#f5f5f5;

}

/* display:block;控制二级菜单在鼠标移到菜单项上时显示二级菜单 */

.menuStyle ul li:hover ul{ display:block; }

• 首页

• 数码产品

  • 苹果
  • 华为
  • 小米
  • 魅族

• 家电产品

  • 电视
  • 冰箱
  • 电饭锅
  • 洗衣机

• 汽车产品

  • 宝马
  • 奔驰
  • 宾利
  • 别克
• 游戏产品
• 节能产品
• 快消产品
• 联系我们

看完代码实现后，大家是不是觉得比较简单呀，赶快来DIY吧。