何使用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 ...
随机推荐
- cocos2dx 3.1从零学习(三)——Touch事件(回调,反向传值)
第三讲 Touch 前面两篇我们学习的内容,足够我们做一款简单的小游戏.也能够说,我们已经入门了,能够蹒跚的走路了. 本篇将解说cocos2dx中非常重要的touch回调机制.你肯定记得第一章做定时器 ...
- HDUJ 1754 I Hate It
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- Spting使用memcached
applicationContext.xml配置文件: <?xml version="1.0" encoding="UTF-8"?> <bea ...
- android——ObjectAnimator动画
在新的android sdk中谷歌为我们提供了新的动画实现方式.化繁为简.将以前的animation动画进一步封装,使用起来更加方便. 先来看XML文件: <RelativeLayout xml ...
- Cisco密码恢复
1.利用超级终端连接路由器,重新启动路由器,按CTRL+BREAK进入ROM监控模式 注:配置寄存器(2B)第六位控制是否读取NVRAM中的配置文件 2.修改配置寄存器:2600系列:1): con ...
- InvokeRequired方法和Invoke函数
c#中禁止跨进程直接访问控件,为了解决这个问题,出现了InvokeRequried属性,当一个控件的InvokeRequried属性值为真时,说明有控件外的线程想要访问它.这时便会调用到Invoke方 ...
- R - 一只小蜜蜂...(第二季水)
Description 有一只经过训练的蜜蜂只能爬向右侧相邻的蜂房,不能反向爬行.请编程计算蜜蜂从蜂房a爬到蜂房b的可能路线数. 其中,蜂房的结构如下所示. ...
- jquery操作session的方法
jquery.session.js使用 //此方法在java中不能使用 // jquery.session.js 简单使用方法 添加数据 $.session.set('key', 'value ...
- struts2开发经验小结(method="{1}"等)
这里的{1}表示接收前面action里通过通配符传来的值,例如你配置的是<action name="*Crud" class="example.Crud" ...
- php 函数之 )_each()list()implode()explode()in_array()
<?php /* implode() 把数组组合成字符串 explode() 把字符串分割成数组 in_array() 检测内容是否在数组中 each()把数组元素拆分成新的数组 list() ...