css3标题,CSS3实现的水平标题菜单

实现效果：

实现代码

html

• 脚本之家
• jb51
• Articles on HTML5 & CSS3
  • Difference between SVG vs. Canvas
  • New features in HTML5
  • Creating links to sections within a webpage
• News
• Contact Us

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 标题菜单的资料请关注脚本之家其它相关文章！