制作Css垂直导航

代码如下：

index.html

css垂直菜单栏

index.css

body { line-height:1; font-size:13px; font-family:Arial, Helvetica, sans-serif; } p, .tab-content li, h1, h2, h3{ margin-bottom: 10px; } .tab-container h3{ font-size:147%; } #container{ margin: 0 auto; margin-top: 4%; } .tab-container { position: relative; width: 100%; z-index: 0; } .tab-container > div { } .tab-container > div > a { position: relative !important; display: inline-block; font-size: 15px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; margin: 1px; background: #ddd; padding: 20px 55px; -moz-border-radius: 3px; -webkit-border-radius: 0px; border-radius: 3px; -moz-box-shadow: 0 4px 10px -5px #000000; box-shadow: 0 4px 10px -5px #000000; -webkit-box-shadow: 0 4px 10px -5px #000000; width: 50px; height: 10px; text-decoration: none; } .tab-container > div:not(:target) > a { } .tab-container > div:target > a { background: none repeat scroll 0 0 #948a81; text-shadow: 0 1px 0 #4C4648; } .tab-container > div > div { background: #ddd; top: 0; padding: 20px; min-height: 250px; position: absolute; left: 180px; width: 400px; } .tab-container > div:target > div { position: absolute; z-index: 3 !important; }

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！