html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>导航栏</title>

		<link rel="stylesheet" href="css/test.css" />

		<script type="text/javascript" src="js/jquery-1.11.3.min.js" ></script>

	</head>

	<body>

		<div class="nav">

			<ul class="list">

				<li><a href="#">首页</a></li>

				<li><a href="#">职业课程</a>

					<div class="down">

							<a href="#">课程库</a>

                             <a href="#">知识体系图</a>

                             <a href="#">职业路径图</a>

                             <a href="#">系列课程</a>

                    </div>

				</li>

				 <li>

        	         <a href="#">就业学习</a>

                    <div class="down">

            	<a href="#">Web前端开发</a>

                <a href="#">Android开发</a>

                <a href="#">JavaWeb开发</a>

                     </div>

                 </li>

        <li>

        	<a href="#">极客社区</a>

            <div class="down">

            	<a href="#">wiki</a>

                <a href="#">技术问答</a>

                <a href="#">社群</a>

                <a href="#">资源分享</a>

            </div>

         </li>

        <li>

        	<a href="#">极客+</a>

            <div class="down">

                <a href="#">高校合作</a>

                <a href="#">极客人才联盟</a>

            </div>

        </li>

			</ul>

		</div>

	</body>

</html>

　　css

*{padding:0; margin:0;}

li{ list-style:none}

a{ text-decoration:none;}

.nav{ width:100%; height:40px; background:#222; margin-top:100px;}

.nav .list{ width:1000px; height:40px;margin:0 auto;}

.list li{ float:left; position:relative;}

.list li>a{ padding:0 30px; line-height:40px; display:block; color:#aaa; font-size:16px;}

.list li:hover>a{ background:#333; color:#fff;}

.list li:hover .down{ display:block;}

.list li .down{ width:150px; background:#333; position:absolute; top:40px;left:0; display:none;}

.list li .down a{ display:block; line-height:30px; color:#aaa; font-size:14px; padding-left:30px;}

.list li .down a:hover{ color:#fff;}

　　效果：

css实现下拉框导航条的更多相关文章

  1. 仿新浪游戏频道js多栏目全屏下拉菜单导航条

    仿新浪游戏频道js多栏目全屏下拉菜单导航条,新浪,游戏频道,js组件,多栏目,全屏下拉,下拉菜单,导航条.代码下载地址:http://www.huiyi8.com/sc/26765.html更多请访问 ...

  2. css三级下拉的导航栏

    #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: none;}# ...

  3. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  4. jQuery+css模拟下拉框模糊搜索的实现

    html: @*输入框*@ <div> <input type="text" style="width: 85%; height: 34px;" ...

  5. checkbox勾选事件,JQ设置css，下拉框JQ选中

    <input id="CheckMainCompany" type="checkbox"/> $(function() { $("#Che ...

  6. 带搜索框的jQuery下拉框插件

    由于下拉框的条数有几十个,于是打算找一个可以搜索查找功能的下拉框,刚开始在网上看了几个,都是有浏览器兼容性问题,后来看到这个“带搜索框的jQuery下拉框美化插件 searchable”,看演示代码简 ...

  7. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  8. 使用checkbox实现纯CSS下拉框

    在这个例子中,我们会看到一个纯CSS制作的下拉框.主要是要用到了HTML元素的checkbox 和CSS3选择器,并没有用到JavaScript.例子如下: Click to Expand Link ...

  9. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

随机推荐

  1. gulp为css,js添加版本号

    由于cdn缓存,更改样式后会有一段时间不生效,解决方法就是给css,js加上版本号效果如下: 1.安装gulp插件 npm install --save-dev gulp-rev (version:9 ...

  2. 人生苦短_我用Python_configparser/yaml对配置文件读取/写入操作_010

    第一,我们先开始安装yaml库,configparser是自带库,yaml库是针对读取yml文件,configparser现阶段我只用于读取conf文件 首先:1)对象文件为:data.yml,下面的 ...

  3. SCJP读书之知识点：

    1:实例变量和局部变量 实例变量:是在类中进行声明的,可以有public,private等修饰符进行修饰. 局部变量:在方法中进行声明,生命周期就是方法开始,到方法结束.但是可以进行对象的引用来调用. ...

  4. 安装windows10和fedora23双系统的一些注意事项

    在安装双系统windows10和fedora的过程中遇到了很多的问题,博主也是在慢慢的摸索中最后莫名其妙的成功的安装双系统. 当然,幸亏博主机智的记住了中间的一些细节,所以大致上的有一些注意事项希望能 ...

  5. linux0.11内核源码——进程各状态切换的跟踪

    准备工作 1.进程的状态有五种:新建(N),就绪或等待(J),睡眠或阻塞(W),运行(R),退出(E),其实还有个僵尸进程,这里先忽略 2.编写一个样本程序process.c,里面实现了一个函数 /* ...

  6. v-show与v-if的区别

    v-show有dom节点像display:none,而v-if隐藏的则没有dom节点.两个共同点都可以显隐

  7. Fraction Comparision

    题目链接 题意:输入x,a,y,b求x/a和y/b的大小,范围long long int 思路:因为不想用精度,嫌麻烦,所以用了个巧方法.先求x/a和y/b整形的大小,如果相等,再求(x%a)*b和( ...

  8. 2018-2019-2 20175105王鑫浩《Java程序设计》实验三 《敏捷开发与XP实践》

    实验三 <敏捷开发与XP实践> 实验报告封面 课程:Java程序设计 班级:1751班 姓名:王鑫浩 学号:20175105 指导教师:王鑫浩 实验日期:2019年4月29日 实验时间:- ...

  9. LintCode之奇偶分割数组

    题目描述: 我的分析:题目要求将奇数放在偶数的前面,没有要求将奇数或偶数排序,因此我可以设置两个指针,一个(i)指向数组第一个数字,另一个(j)指向数组的最后一个数字,因为奇数要放在前面,所以从后往前 ...

  10. spring cloud gateway 拦截request Body

    在接入Spring-Cloud-Gateway时,可能有需求进行缓存Json-Body数据或者Form-Urlencoded数据的情况. 由于Spring-Cloud-Gateway是以WebFlux ...