CSS3实现的水平标题菜单


Posted in HTML / CSS onApril 14, 2021

实现代码

html

<nav class="dropdownmenu">
  <ul>
    <li><a href="http://www.jochaho.com/wordpress/">HOME</a></li>
    <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">ABOUT</a></li>
    <li><a href="#">Articles on HTML5 & CSS3</a>
      <ul id="submenu">
        <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li>
        <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li>
        <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li>
      </ul>
    </li>
    <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li>
    <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li>
  </ul>
</nav>

CSS3

.dropdownmenu ul, .dropdownmenu li {
	margin: 0;
	padding: 0;
}
.dropdownmenu ul {
	background: gray;
	list-style: none;
	width: 100%;
}
.dropdownmenu li {
	float: left;
	position: relative;
	width:auto;
}
.dropdownmenu a {
	background: #30A6E6;
	color: #FFFFFF;
	display: block;
	font: bold 12px/20px sans-serif;
	padding: 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
.dropdownmenu li:hover a {
	background: #000000;
}
#submenu {
	left: 0;
	opacity: 0;
	position: absolute;
	top: 35px;
	visibility: hidden;
	z-index: 1;
}
li:hover ul#submenu {
	opacity: 1;
	top: 40px;	/* adjust this as per top nav padding top & bottom comes */
	visibility: visible;
}
#submenu li {
	float: none;
	width: 100%;
}
#submenu a:hover {
	background: #DF4B05;
}
#submenu a {
	background-color:#000000;
}

以上就是CSS3实现的水平标题菜单的详细内容,更多关于CSS3 标题菜单的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
使用CSS3代码绘制可爱的Hello Kitty猫
Aug 03 HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 HTML / CSS
css3中transition属性详解
Sep 02 HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 HTML / CSS
有关HTML5中背景音乐的自动播放功能
Oct 16 HTML / CSS
HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码
Apr 10 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
Jan 25 HTML / CSS
CSS中妙用 drop-shadow 实现线条光影效果
Nov 11 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 HTML / CSS
浅谈css清除浮动(clearfix和clear)的用法
May 21 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
详解Html5项目适配系统深色模式方案总结
Apr 14 #HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
You might like
php的一个登录的类 [推荐]
2007/03/16 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jquery表单对象属性过滤选择器实例分析
2015/05/18 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
为什么要使用Vuex的介绍
2019/01/19 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中字符串的处理技巧分享
2016/09/17 Python
Python3结合Dlib实现人脸识别和剪切
2018/01/24 Python
解决pycharm运行出错,代码正确结果不显示的问题
2018/11/30 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
使用OpenCV-python3实现滑动条更新图像的Canny边缘检测功能
2019/12/12 Python
python pandas移动窗口函数rolling的用法
2020/02/29 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
网站美工岗位职责
2014/04/02 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
MATLAB 如何求取离散点的曲率最大值
2021/04/16 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
python的html标准库
2022/04/29 Python
MySQL 语句执行顺序举例解析
2022/06/05 MySQL