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无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
实例讲解使用CSS实现多边框和透明边框的方法
Sep 08 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
HTML5如何为形状图上颜色怎么绘制具有颜色和透明度的矩形
Jun 23 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
HTML5和CSS3实例教程总结(推荐)
Jul 18 HTML / CSS
浅谈关于html5中图片抛物线运动的一些心得
Jan 09 HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
CSS实现九宫格布局(自适应)的示例代码
Feb 12 HTML / CSS
CSS子盒子水平和垂直居中的五种方法
Jul 23 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
详解Html5项目适配系统深色模式方案总结
Apr 14 #HTML / CSS
css3实现背景图片半透明内容不透明的方法示例
CSS3 实现的图片悬停的切换按钮
Apr 13 #HTML / CSS
纯CSS实现酷炫的霓虹灯效果
CSS3实现三角形不断放大效果
css3实现背景图片颜色修改的多种方式
Apr 13 #HTML / CSS
You might like
第1次亲密接触PHP5(1)
2006/10/09 PHP
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
解决微信授权回调页面域名只能设置一个的问题
2016/12/11 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
2014/01/16 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python简单实现获取当前时间
2016/08/27 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
python进程间通信Queue工作过程详解
2019/11/01 Python
python Yaml、Json、Dict之间的转化
2020/10/19 Python
Python使用Pygame绘制时钟
2020/11/29 Python
计算机专业学生求职信分享
2013/12/15 职场文书
先进党支部事迹材料
2014/01/13 职场文书
银行员工辞职信范文
2014/01/20 职场文书
村党支部换届选举方案
2014/05/02 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
孝老爱亲模范事迹材料
2014/05/25 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
原生JS封装vue Tab切换效果
2021/04/28 Vue.js