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 相关文章推荐
a标签的css样式四个状态
Mar 09 HTML / CSS
CSS3 Backgrounds属性相关介绍
May 11 HTML / CSS
CSS3中引入多种自定义字体font-face
Jun 12 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
CSS3动画和HTML5新特性详解
Aug 31 HTML / CSS
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
Dec 09 HTML / CSS
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
Mar 15 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 HTML / CSS
html5移动端价格输入键盘的实现
Sep 16 HTML / CSS
canvas实现烟花的示例代码
Jan 16 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 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
php查询操作实现投票功能
2016/05/09 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
PHP 实现缩略图
2021/03/09 PHP
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
使用angular写一个hello world
2015/01/23 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
javascript ASCII和Hex互转的实现方法
2016/12/27 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python如何测试stdout输出
2020/08/10 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
Hotels.com中国区:好订网
2016/08/18 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
事业单位辞职信范文
2014/01/19 职场文书
服务理念标语
2014/06/18 职场文书
离职报告格式
2014/11/04 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库