首页 > 代码库 > Css Study - 纵向Menu - By html and Css
Css Study - 纵向Menu - By html and Css
http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS
HTML
<div id="leftmenu"> <ul> <li><a href=http://www.mamicode.com/"#">Home</a></li> <li class=‘has-sub‘><a href=http://www.mamicode.com/"#">PRODUCTS</a> <ul> <li class=‘has-sub‘><a href=http://www.mamicode.com/"#">Sub Product1</a> <ul> <li class=‘no-sub‘><a href=http://www.mamicode.com/"#">Sub Product1-1</a> </li> <li class=‘no-sub‘><a href=http://www.mamicode.com/"#">Sub Product1-2</a></li> </ul> </li> <li class=‘no-sub‘><a href=http://www.mamicode.com/"#">Sub Product2</a></li> </ul> </li> </ul> </div>
CSS
<style> /* Starter CSS for Flyout Menu */ #leftmenu { padding: 0; margin: 0; border: 0; } #leftmenu ul, li { list-style: none; margin: 0; padding: 0; } #leftmenu ul { position: relative; z-index: 597; float: left; } #leftmenu ul li { float: left; height: 38px; line-height: 38px; width: 200px; vertical-align: middle; } #leftmenu ul li.hover, #leftmenu ul li:hover { position: relative; z-index: 599; cursor: default; } #leftmenu ul ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%; } #leftmenu ul ul li { float: none; } #leftmenu ul li:hover > ul { visibility: visible; } #leftmenu ul ul { top: 0; left: 100%; } #leftmenu ul li { float: none; } /* Custom Stuff */ #leftmenu { border-radius: 5px; background-clip: padding-box; box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.15); width: 160px; } #leftmenu span, #leftmenu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; border-bottom: solid 1px rgba(0, 0, 0, 0.15); } #leftmenu:after, #leftmenu ul:after { content: ‘‘; display: block; clear: both; } #leftmenu > ul > li ul ul { border-radius: 0 6px 6px 0; background-clip: padding-box; background-color: #ffffff; } #leftmenu ul, #leftmenu li { background-color: #4cb6ea; font-weight: bold; width: 100%; } #leftmenu li { height: 25px; line-height: 25px; } #leftmenu a { color: #ffffff; line-height: 160%; padding: 8px 20px 8px 20px; width: 120px; font-size: 16px; } #leftmenu a:hover { color: #666; background: #ffffff; } #leftmenu ul ul { width: 160px; border: 1px solid #dddddd; background: #ffffff; } #leftmenu ul ul li { background: #ffffff; } #leftmenu ul ul li a { color: #666; } #leftmenu ul ul li a:hover { color: #ff006e; } #leftmenu .has-sub { position: relative; } #leftmenu ul .has-sub a:before { display: block; content: ""; border: 6px solid transparent; border-left-color: #eee; z-index: 2; height: 0; width: 0; position: absolute; right: 12px; top: -2px; } #leftmenu .has-sub:hover a:before { border-left-color: #666; } #leftmenu .has-sub:hover ul li a:before { display: none; } #leftmenu .has-sub:hover .has-sub a:before { display: block; } #leftmenu .has-sub:hover .has-sub:hover a:before { border-left-color: #ff006e; } #leftmenu .has-sub:hover .has-sub:hover ul li a:before, #leftmenu .no-sub a:before, #leftmenu .no-sub:hover a:before { display: none; } </style>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。