用css简单实现二级导航栏

display：none 可以隐藏元素

display：block 不仅可以让行内元素转变成块级元素还可以显示元素

实例

CSS样式

    <style>* {margin: 0;padding: 0;}/* 清除列表的黑点 */ul li {list-style-type: none;}/* 清除a链接的默认下划线 */a {text-decoration: none;}.nav1 {width: 400px;height: 50px;/* 让盒子在浏览器窗口居中方便观看 */margin: 100px auto;}.nav1>li {/* 让一级导航栏左浮动 */float: left;}.nav1 a {/* 将a转为块级元素 */display: block;width: 100px;height: 50px;font: 12px/50px "微软雅黑";color: black;text-align: center;border: 1px solid #bbb;box-sizing: border-box;}.nav2 {/* 隐藏元素 */display: none;}/* 当鼠标滑过li的时候 让元素显示 */.nav1 li:hover .nav2{display: block;}.nav1>li:hover .a1{background-color: #333;color: #fff;}a:hover{background-color: #333;color: #fff;}</style>

html结构

<ul class="nav1"><li><a href="" class="a1">一级导航</a><ul class="nav2"><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="" class="a1">一级导航</a><ul class="nav2"><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="" class="a1">一级导航</a><ul class="nav2"><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="" class="a1">一级导航</a><ul class="nav2"><li><a href="">二级导航</a></li><li><a href="">二级导航</a></li><li><a href="">二级导航</a></li><li><a href="">二级导航</a></li></ul></li></ul>

用css简单实现二级导航栏相关推荐

HTML+CSS 简单的顶部导航栏菜单制作
导航栏的制作: 技术要求: CSS HTML各类标签实现目的: 制作导航栏菜单代码分析: 基本样式清除无序列原点删除下划线删除文字默认居中 a标签设置块级元素伪类选择器对a状态修饰分步实 ...
二级导航栏（html、css)
二级导航栏(html.css) 效果图: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><m ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...
【Web前端二级导航栏】
简单的Web前端二级导航栏示例: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
CSS实现垂直/水平导航栏
文章目录一级基本导航栏怎么显示?导航栏 = 链接列表垂直导航栏水平导航栏二级导航栏垂直二级水平二级动画效果考虑导航栏位置和导航栏下方内容位置行内元素和块级元素的具体区别是什么?in ...
php 3d animation,CSS_纯CSS实现菜单、导航栏的3D翻转动画效果，我曾经向大家展示过闪光的logo - phpStudy...
纯CSS实现菜单.导航栏的3D翻转动画效果我曾经向大家展示过闪光的logo,燃烧的火狐狸,多重嵌套动画等例子,今天,我们将要制作一个简单但非常酷的3D翻转菜单.大家可以先看看实际效果,下面有效果截图 ...
如何用最简洁的css代码写一个导航栏
如何用最简洁的css代码写一个导航栏首先我们在里面通过标签添加一个logo,然后通过标签简单的设置几个导航栏中的内容. 注:标签主要是用于设置超链接. <div><img src= ...
做一个简单的二级导航
如何做一个简单的二级导航现在html的部分就写完了,下面我们通过css来实现二级导航. 先为li标签设置list-style:none;去掉前面的点,为a标签设置text-decoration:no ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...

用css简单实现二级导航栏

用css简单实现二级导航栏相关推荐

最新文章

热门文章