何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢?
下面为大家分享一下我的经验
方法步骤:
第一步 :
首页我们打开Sublime Text或其它编辑器,创建一个名为nav的导航菜单
<div class="nav">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
如下图所示:
第二步:
现在我们为nav添加样式,首先去掉默认的margin和padding,
再去掉<ul>< li>标签的list-style样式和<a>标签的默认下划线。
接下来再添加适当的样式(根据实际需要添加)进行美化,如一下样式:
页面预览效果如图所示:
第三步:
像这样,一个菜单横向菜单就建好了,下面我们给栏目一,栏目二,栏目三,添加二级下拉菜单
代码如下:
<div class="nav">
<ul>
<li><a href="#">栏目一</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目二</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目三</a>
<ul>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
<li><a href="#">二级栏目</a></li>
</ul>
</li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul>
</div>
第四步:
添加完二级栏目后,现在我们开始添加css样式,
首先给<li>标签下的<ul>标签添加相对定位,
再去除之下<li>标签的做浮动样式,再适当修改<a>标签,如一下样式:
代码如下:
.nav ul li ul {
position:absolute;
}
.nav ul li ul li {
float:none;
}
.nav ul li ul li a {
border-right:none;
border-top:1px dotted #ccc;
background:#f5f5f5;
}
页面刷新效果如图:
第五步:
接下来我们隐藏掉二级下来菜单,并给它添加鼠标滑动效果,使得当鼠标滑动到主栏目时,二级下来菜单显示,样式如下:
.nav ul li ul {
position:absolute;
display:none;
}
.nav ul li ul li {
float:none;
}
.nav ul li ul li a {
border-right:none;
border-top:1px dotted #ccc;
background:#f5f5f5;
}
.nav ul li:hover ul{
display:block;
}
再次预览效果,如下图所示:
第六步:
至此,横向二级下拉菜单就制作完成了,这里附加上全部代码,以方便各位朋友参考,感谢各位朋友的浏览。
何使用CSS写出一个下拉菜单。的更多相关文章
- 怎样用css写出一个下拉菜单
<style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 bo ...
- 一个用css写出来的下拉菜单
1 <style> 2 /* css*/ 3 #body{ 4 float: left; 5 } 6 #xialakuang{ 7 background-color:#f9f9f9; 8 ...
- 纯CSS实现二级导航下拉菜单--css的简单应用
思想:使用css的display属性控制二级下拉菜单的显示与否.当鼠标移动到一级导航菜单的li标签时,显示二级导航菜单的ul标签.由于实现起来比较简单,所以在这里直接给出了参考代码. 1.纯CSS二级 ...
- CSS技巧分享:如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- css用hover制作下拉菜单
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
- swift 第九课 用tableview 做一个下拉菜单Menu
写到这里的时候,自己这个项目已经完成了一半左右,项目进度自己还是挺满意.今天又有一个新的布局,要实现个下拉菜单,刚开始写的时候,觉得会很容易,后来发现也是小错不断, 我想自己限制的自己属于写博客的初期 ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
- 纯css和js版下拉菜单
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css实现hover显示下拉菜单
原理比较简单,首先先隐藏下拉菜单即display:none,当鼠标hover后,设置display:block. <style> .menu-title { postion: relati ...
随机推荐
- 让你的javascript函数拥有记忆功能,降低全局变量的使用
考虑例如以下场景:假如我们须要在界面上画一个圆,初始的时候界面是空白的.当鼠标移动的时候,圆须要尾随鼠标移动.鼠标的当前位置就是圆心.我们的实现方案是:假设界面上还没有画圆,那么就新创建一个:假设已经 ...
- Esper学习之六:EPL语法(二)
中秋三天,说闲也不闲,调调工作的代码,倒还解决不少问题.不过也是因为最近工作忙的缘故,Esper被我冷落不少日子了,趁着今天最后一天,赶紧写一篇出来. 从上一篇开始说EPL的语法,主要是关于注解的.今 ...
- react redux 相关技术
React全都是围绕着组件的, 所以React基础也就是:写组件的jsx.组件的生命周期以及组件的属性和状态.jsx,只要是用过html模板的分分钟就能写了: 所谓生命周期就是组件在创建.销毁.更新阶 ...
- C# 调用存储过程传入表变量作为参数
首先在SQLServer定义一个自定义表类型: USE [ABC] GO CREATE TYPE [ABC].[MyCustomType] AS TABLE( ) NOT NULL, ) NULL, ...
- SCII码表 键盘常用ASCII码
ASCII码对照表 在Web开发时,如下的ASCII码只要加上&#和;就可以变成Web可以辨认的字符了在处理特殊字符的时候特别有用,如:' 单引号在数据库查询的时候是杀手,但是如果转换成' ...
- spring 配置和实例
Spring 是一个开源框架.Spring 为简化企业级应用开发而生. 使用 Spring 可以使简单的 JavaBean 实现以前只有 EJB 才能实现的功能.Spring 是一个 IOC(DI) ...
- VS2010编译时出现错误1 error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
需要下载VS2010的补丁包
- [Linked List]Insertion Sort List
Total Accepted: 59422 Total Submissions: 213019 Difficulty: Medium Sort a linked list using insertio ...
- ado.net实现一个通知公告功能
一.建立相应的数据库,此处就不多说了,相信大家都非常了解
- asp.net后台向前端输出js脚本的三种方法
//这个方法最快,因为它会输出到html标签之前 Response.Write("<script type='text/javascript'>alert('这个最快')< ...