前端案例：DIV+CSS下拉菜单

<!DOCTYPE html>

<html>

<head>

<title>css下拉菜单</title>

</head>

<body>

<div>CSS下拉菜单</div>

<ul>

<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >DIVCSS</a><br />

</div>

</li>

<a href="http://www.baidu.com" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >HTML入门</a>

</div>

</li>

</div>

</li>

</div>

</li>

</ul>

</div>

</body>

</html>

CSS样式：

body,ul,li{

background-color:white;

font-size:12px;

font-family:Arial, Helvetica, sans-serif;

margin:0px;

padding:0px;

}

color:#000000;

text-decoration:none;

}

body{text-align:center;}

li{

display:inline;

list-style:none;

list-style-position:outside;

text-align:center;

font-weight:bold;

float:left;

}

.list a:link{

color:#336601;

text-decoration:none;

float:left;

width:100px;

padding:3px 5px 0px 5px;

}

.list a:visited{

color:#336601;

text-decoration:none;

float:left;

width:100px;

padding:3px 5px 0px 5px;

}

.list a:hover{

color:white;

float:left;

padding:3px 3px 0px 20px;

width:88px;

text-decoration:none;

background-color:#539D26;

}

.list a:active{

color:white;

float:left;

padding:3px 3px 0px 20px;

width:88px;

text-decoration:none;

background-color:#BD06b4;

}

#nav{

width:600px;

height:30px;

margin:0 auto;

padding:0px 5px;

text-align:center;

clear:both;

}

.list{

line-height:20px;

text-align:left;

padding:4px;

font-weight:normal;

}

.menu1{

width:120px;

height:auto;

margin:6px 4px 0px 0px;

border:1px solid #9CDD75;

background-color:#F1FBEC;

color:#336601;

padding:6px 0px 0px 0px;

cursor:hand;

overflow-y:hidden;

filter:Alpha(opacity=70);

-moz-opacity:0.7;

}

.menu2{

width:120px;

height:18px;

margin:6px 4px 0px 0px;

background-color:#F5F5F5;

color:#999999;

border:1px solid #EEE8DD;

padding:6px 0px 0px 0px;

overflow-y:hidden;

cursor:hand;

}

案例效果：

前端案例：DIV+CSS下拉菜单

前端案例：DIV+CSS下拉菜单

继续阅读

前端和后台是如何交互的？

怎样使用SpringMVC控制页面

Spring MVC 接收多个实体参数

CSS中伪类和伪元素的区别

Vue项目 - 单文件组件和Vue中的路由

左耳朵耗子：程序员如何拿到年薪60万的岗位？

没救了! 困扰程序员一辈子的5个魔咒, 改掉比登天还难！

[转]如何成长为一名全栈工程师全栈工程师

underscore模板功能的使用和学习

CSS之折叠菜单

web开发之前后端渲染

JavaScript的那些坑之事件代理事件代理事件阶段

ACS基本配置-权限等级管理

vue （vue2.0）使用总结(从大体结构总结)

父子组件间传值的实现父子组件间传值的实现

vue搭建过程及出现问题