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中的content属性使用示例
Jul 20 HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 HTML / CSS
Html5页面在微信端的分享的实现方法
Aug 30 HTML / CSS
利用html5 file api读取本地文件示例(如图片、PDF等)
Mar 07 HTML / CSS
HTML5 File API改善网页上传功能
Aug 19 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
Html5与App的通讯方式详解
Oct 24 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
使用CSS实现黑白格背景效果
Jun 01 HTML / CSS
Li list-style-image 图片垂直居中实现方法
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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php microtime获取浮点的时间戳
2010/02/21 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
multiSteps 基于Jquery的多步骤滑动切换插件
2011/07/22 Javascript
js截取固定长度的中英文字符的简单实例
2013/11/22 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
Python 自由定制表格的实现示例
2020/03/20 Python
浅谈html5 响应式布局
2014/12/24 HTML / CSS
会计电算化专业求职信
2014/06/10 职场文书
实习生工作证明范本
2014/09/14 职场文书
校长四风对照检查材料
2014/09/27 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
网吧管理制度范本
2015/08/05 职场文书
个人售房合同协议书
2016/03/21 职场文书
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL