Html顶部导航栏实现

顶部导航nav栏实现（包括一级菜单，二级菜单）

实现效果：

代码如下~

Html部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>顶部导航栏</title>
</head><body><nav><div class="top"><ul style="text-align: center;"><li><a href="#">一级菜单</a><ul><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul class="tow"><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul class="tow"><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul class="tow"><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul class="tow"><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li><li><a href="#">一级菜单</a><ul class="tow"><li><a href="#">二级菜单</a></li><li><a href="#">二级菜单</a></li></ul></li></ul></div></nav>
</body>
</html>

Css部分：

<style type="text/css"><!--*{margin: 0;padding: 0;}.top{height:4%;width: 100%;margin-top: 5px;margin-left: 0px;position: fixed;top: 0;background: rgb(45,67,120);text-align: center;}.top ul{list-style-type:none;width:100%;height: auto;vertical-align: middle;white-space: nowrap;overflow: hidden;align-content: center;padding: 0;display: inline-block;}.top li{float: left;width:auto;margin-right: 2%;position: relative;overflow: hidden;}.top li a{display: block;color: aliceblue;text-align:centerpadding: 3px;overflow: hidden;text-decoration: none;}.top ul li ul{display: none;width: auto;height: 50;border: 1px solid #F1EBEB;background-color:rgba(94,121,187,1.00);position: relative;}.top ul li ul li{/* 二级菜单li内容的显示 */border: 1;float:none;width: auto;text-align: center;}.top ul li:hover ul{/* 鼠标选中二级菜单内容时 */display: block;       /* 鼠标滑过一级菜单后的显示二级菜单 */background:rgb(45,67,120);}--></style>

Html顶部导航栏实现相关推荐

uniapp添加顶部导航栏并且更换图标
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 开发者通过编写 Vue.js 代码,uni-app 将其编译到iOS.Android.微信小程序等多个平台,保证其正确运行并达到优 ...
react native 之自定义顶部导航栏，实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
【Flutter】顶部导航栏实现 ( Scaffold | DefaultTabController | TabBar | Tab | TabBarView )
文章目录一.Scaffold 组件二.实现顶部导航栏三.DefaultTabController 导航标签控制组件四.TabBar 导航按钮组件五.Tab 标签组件六.TabBarView ...
android开发(49) android 使用 CollapsingToolbarLayout ，可折叠的顶部导航栏
概述在很app上都见过可折叠的顶部导航栏效果.google support v7 提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下: 实现步骤 1. 写 ...
uni-app开发：tabar组件与顶部导航栏（功能开发篇）
uni-app开发:tabar组件与顶部导航栏(含右侧icon点击功能)[结合:案例Demo截图] 一.效果图 · 截图: 二. tabar组件 + 顶部导航栏(含右侧icon点击功能) 组件的代码调 ...
Android开发笔记（二十）顶部导航栏ActionBar
标题栏ActionBar ActionBar是在Android3.0之后引入的,所以Android2.x之前的版本不能直接使用ActionBar.现在ActionBar广泛用做APP的顶部导航栏,它在 ...
Android 资讯类App项目实战第一章滑动顶部导航栏
前言: 正在做一个资讯类app,打算一边做一边整理,供自己学习与巩固.用到的知识复杂度不高,仅适于新手.经验不多,如果写出来的代码有不好的地方欢迎讨论. 该系列的其他文章第二章 retrofit获取 ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
使用 HTML/CSS 实现 Educoder 顶部导航栏
第1关:使用flex布局实现Educoder顶部导航栏容器布局任务描述本关任务:使用flex布局实现容器两端对齐的效果. 效果如下: 相关知识使用flex布局实现左右分开布局的方式有多种: 使用 ...
页面最上方的搜索和logo叫什么_网页顶部导航栏设计总结
网页中顶部导航栏往往是用户进入网站后最先看到的地方,决定着用户对网页的第一印象,其重要性不言而喻. 网页中的header,一般我们称之为顶部导航栏,这里为了行文方便,以下都简称顶部栏.顶部栏对于一个网 ...

Html顶部导航栏实现

实现效果：

Html部分：

Css部分：

Html顶部导航栏实现相关推荐

最新文章

热门文章