html简单实现下拉菜单
主要用到的知识ul和li标签 ul li 是一个组合：是无序列表标签，在实际中用的非常多，
与之对应的是有序列表：ol li
li是不能单独使用，必须在于ul之中的
ul是块级元素，能直接定义宽高，而li是行级元素，不能直接定义高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下拉框</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
} #nav {
width: 600px;
height: 40px;
margin: 0 auto;
} #nav ul {
list-style: none;
} #nav ul li {
float: left;
line-height: 40px;
text-align: center;
position: relative;
} #nav ul li a {
text-decoration: none;
color: #000;
display: block;
padding: 0px 10px;
} #nav ul li a:hover {
color: #FFF;
background: #333
} #nav ul li ul {
position: absolute;
display: none;
} #nav ul li ul li {
float: none;
line-height: 30px;
text-align: left;
} #nav ul li ul li a {
width: 100%;
} #nav ul li ul li a:hover {
background-color: #06f;
} #nav ul li:hover ul {
display: block
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">Oracle</a></li>
<li><a href="#">MySQL</a></li>
<li><a href="#">Python</a></li>
<li><a href="#">mongodb</a></li>
<li><a href="#">redis</a></li>
</ul>
</li>
<li><a href="#">个人中心</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div> </body>
</html>
html简单实现下拉菜单的更多相关文章
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- 在AJAX里 使用【 XML 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用XML返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 在AJAX里 使用【 JSON 】 返回数据类型 实现简单的下拉菜单数据
在AJAX里 使用JSON返回数据类型 实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...
- jquery实现最简单的下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用js写的简单的下拉菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html下拉菜单的实现
这是简单的下拉菜单 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- 【Excle】动态更新数据下拉菜单
现在我们制作了一个简单的下拉菜单,如下: 但是随着公司的逐渐扩大,部门也变得多了,目前我是把数据范围写死的 ,所有每次添加一个部门,就得修改数据范围,那么现在我们不想修改这个范围了,想让他每次添加部门 ...
- jq+css+html简单实现导航下拉菜单
相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了,直接上code. Html部分 <div class="_nav"> <ul id=&qu ...
- html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架
简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...
随机推荐
- php settype（）和gettype（）
gettype()是获得变量的类型,settype()函数用来配置或转换变量类型.成功返回 true 值,其它情形返回 false 值.参数 var 为原来的变量名,参数 type 为下列的类型之一: ...
- js addeventlistener 刮刮贴
<!doctype html><html><head><meta charset="utf-8"><title>无标题文 ...
- [Swift通天遁地]三、手势与图表-(6)创建包含三条折线的线性图表
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- Windows（7/8/10）搭建Elasticsearch 6.x版本
今天公司用到了Elasticsearch ,记录一下单机版搭建的流程. 首先我们来看下什么是Elasticsearch : ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分 ...
- JAVA中list,set,map与数组之间的转换详解
package test; import java.util.*; /** * Created by ming */ public class Test { public static void ma ...
- jsp里post和get的乱码解决问题
6.乱码问题01:<%reques.setCharacterEncoding("utf-8");%> 02:get请求乱码 001.:String 编码之后的字符串 = ...
- [ HAOI 2010 ] 最长公共子序列
\(\\\) \(Description\) 求两个长度\(\le5000\)的大写字母串的\(LCS\)长度及个数,定义两\(LCS\)中某一字符在两序列出现位置有一处不同就视为不同. \(\\\) ...
- CF615C Running Track
思路: kmp + 二分. 实现: #include <iostream> #include <cstdio> #include <algorithm> #incl ...
- Educational Codeforces Round 42 (Rated for Div. 2)
A. Equator(模拟) 找权值的中位数,直接模拟.. 代码写的好丑qwq.. #include<cstdio> #include<cstring> #include< ...
- 【PostgreSQL-9.6.3】临时表
PostgreSQL中的临时表分两种,一种是会话级临时表,一种是事务级临时表.在会话级临时表中,数据可以存在于整个会话的生命周期中,在事务级临时表中的数据只能存在于事务的生命周期中.1. 会话级临时表 ...