只用css和html制作二级导航 ===鼠标以上去导航下拉列表

最新推荐文章于 2022-09-04 23:02:06 发布
最新推荐文章于 2022-09-04 23:02:06 发布
阅读量86 收藏
点赞数
原文链接：http://www.cnblogs.com/zhp404/articles/4149580.html
版权



<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css制作二级导航</title>

<style type="text/css">
*{padding:0px;}
body{background-color:#fff;}
ul{list-style:none;}

#nav{width:100%;height:50px;background-color:#999;}
#nav li{float:left;width:100px;height:50px;}
#nav a{color:#FFFFFF;text-decoration:none;display:block;line-height:50px;text-align:center;}
#nav a:hover{background-color:#f00;}
#nav ul.sub{background-color: #999;width: 100px;/*想让二级导航横着排列，改这里的大小*/height:300px;border:solid 0px;}
#nav ul.test{background-color:#ccc;width: 300px;height:50px;}
#nav ul ul{visibility:hidden;}
/*这是关键*/
#nav li:hover ul{visibility:visible;}
/*这是关键*/
</style>
</head>

<body>
<div id="nav" >
    <ul>
        <li><a href="#">首页</a></li>  

        <li><a href="#">你好</a>     
            <ul class="sub test">     
                <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 class="sub">     
                <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 class="sub">     
                <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>  
    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/zhp404/articles/4149580.html

weixin_34297704
关注
css +html实现网站二级导航
lansing_1995的博客
05-22 1796
做了好几个小时，也算有点模样，学到了很多东西，看过的东西还是要多练才能理解的透彻，连接处的白边可以用小白块覆盖，真的很有创意（这是’剽窃’老师的思想了），做的练习还是不太够的感觉，以后应该可以做的快一点。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
二级导航栏制作思路
MarvelousYUAN的博客
09-28 1341
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; text-decoration: none; ...
二级导航的做法
weixin_30606461的博客
07-15 428
效果： html的写法： <!--导航--><header> <nav> <ul> <li><a href="index.html"><img src="../img/header_footer/logo.png" alt=""/></a></li...
二级导航--鼠标悬浮菜单出现二级菜单
weixin_42617075的博客
08-24 6080
二级导航–鼠标悬浮菜单出现二级菜单 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head &gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;鼠标悬浮菜单出现二级菜单&lt;/title &gt; &lt;style&gt; a{ color: #fff; text-de
css实现2级导航菜单
东方雨林_Lin的博客
07-18 1万+
本文用纯CCS实现了一个具有特效的二级导航栏，并详细注释了CSS的实现方法。 演示地址：https://tympanus.net/codrops-playground/SaraSoueidan/RETvk1HZ/editor &lt;!--HTML--&gt; &lt;div class="container"&gt; &lt;ul class="menu"&gt; &lt...
HTML和CSS常用元素
mjkkhjl的博客
04-13 621
网页设计 网站制作到前端开发 Web 1.0时代指的的网站制作，那时候的页面主要是静态页面，仅供用户浏览，而无法提供用户进行交互（无法与服务器进行数据交互）。 而到了Web 2.0时代，已经从网页制作到了前端开发，以前的网页“三剑客”（Fw、Dw、Fl）已经满足不了我们的需求，所以我们要学习新的技术。 分别是：HTML、CSS、JavaScript也是新“三剑客”。 HTML:超文本标记语言，是一门描述型语言。 CSS：层叠样式表，是控制网页外观的一门技术。 JavaScript：是嵌入HTML的一种脚
HTML、CSS知识总结
xzc1453的博客
09-04 603
HTML、CSS知识总结
html 和 css 代码 总结
m0_55170432的博客
04-13 1412
标题
h5(html5)+css3+移动端前端
weixin_58997863的博客
07-12 6436
h5(html5)+css3+移动端前端 知识点详细总结
HTML+CSS总结
m0_62497325的博客
11-21 1142
学习目标 一、网页的相关概念 1.1什么是网页？ 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以 .htm 或 .html 后缀结尾的文件，因此将其俗称为 HTML 文件。 1.2什么是HTML？ 1.HTML 指的是超文本标记语言 (Hyper Text Markup Language) ，它是用来描述网页的一种语言。 2.HTML 不是 一种编程语言，而是一种标记语言 (markup language)。 1.3常用的浏览器 IE
制作简单的二级导航
xiaowu_1997的博客
04-14 919
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one a{ position: relative; z-index: 2; } .one ul{ ...
做一个简单的二级导航
begin_glory的博客
01-23 2176
如何做一个简单的二级导航 现在html的部分就写完了，下面我们通过css来实现二级导航。 先为li标签设置list-style:none;去掉前面的点，为a标签设置text-decoration:none;去掉下划线，为父级元素nav-box设置相对定位position:relative;为子元素nav-box-leva12设置绝对定位position:absolute;然后设置定位并隐藏二级导航，一个简单的二级导航就做好了。 ...
HTML+CSS做二级导航
Mr_zdk的博客
09-19 4054
&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;导航菜单&lt;/title&gt;         &lt;link rel="stylesheet" type="text/css&q
AXURE 如何制作二级导航
qq_40308150的博客
11-10 1961
纯CSS实现二级导航下拉菜单--css的简单应用
热门推荐
zhaiyq的博客
08-07 1万+
思想：使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级导航菜单的li标签时，显示二级导航菜单的ul标签。由于实现起来比较简单，所以在这里直接给出了参考代码。 1、纯CSS二级导航下拉菜单代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8" c...
导航栏的颜色设置
06-30 701
http://www.jianshu.com/p/0acc12c29c1b/comments/1402544
html+css制作二级导航条
gusucheng的博客
09-06 2074
```html <title></title>   <style type="text/css">    *{     margin: 0;     padding: 0;    }  &nbs...
纯CSS制作二级导航
爱前端的程序媛的博客
02-08 711
主要思路： 默认显示一级导航，二级导航隐藏。 当鼠标滑过一级导航时二级导航显示。 主要方法有两种： a. 一开始设置二级导航display为none、鼠标滑过一级导航时，二级导航display b. 给二级导航设置绝对定位，left：-1000px，鼠标滑过一级标题时再设置为left：0. 在这里我只实现了第一种方法。就这样自己还搞了半天，中间出出现了一些有关选择器的问题。 ...
HTML如何实现 导航的二级菜单
ljheee的博客
04-29 6447
HTML如何实现 导航的二级菜单     HTML如何实现 二级菜单     *{margin:0;padding:0;}     a{text-decoration:none;}     a:hover{background-color:#fff;}          header{background:#ee6;         height:80px;
CSS3+HTML5实现下拉导航教程：告别JavaScript
本文将详细介绍如何使用纯HTML5和CSS3来创建下拉导航菜单。通常情况下，下拉导航在网页设计中扮演着导航工具的角色，帮助用户快速访问网站的不同部分。传统的实现方式可能依赖JavaScript，但本文将带你步入CSS3的新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值