代码区项目交易流程

Trying to achieve skewed menu items without skewed text. Came close but 2nd tier ...


I used ' transform ' to skew the li items, then opposite transform on the span s to straighten out the text.

I had to use jQuery to add the span s around the text because the CMS I have to use at work automatically creates the menu, so I can't add any classes or span s within the HTML.

I have come close to achieving what I want, but the drop down menu items are cascading for some reason.

How can I fix this?

Here is what I've done: http://jsfiddle.net/y5w8m/1/

<div id="menu"> <ul id="nav"> <li class="current first"><a href="#"><span>Home</span></a> <ul> <li><a href="#"><span>drop 1</span></a> <ul> <li><a href="#"><span>drop 2</span></a></li> <li><a href="#"><span>drop 2</span></a></li> </ul> </li> <li><a href="#"><span>drop 1</span></a></li> <li><a href="#"><span>drop 1</span></a></li> <li><a href="#"><span>drop 1</span></a></li> </ul> </li> <li><a href="#"><span>Services</span></a></li> <li class="last"><a href="#"><span>Contact Us</span></a> <ul> <li><a href="#"><span>drop 2</span></a></li> <li><a href="#"><span>drop 2</span></a></li> </ul> </li> </ul> </div>

CSS:

/* Main Navigation */ #menu { background: #528aaf; position: relative; margin-top: 5px; z-index: 400; } ul#nav { margin: 0; padding: 0; width: auto; } ul#nav > li { float: left; padding: 0; list-style: none; list-style-image: none; display: inline-block; position: relative; transform: skew(-25deg); -webkit-transform: skew(-25deg); -moz-transform: skew(-25deg); -ms-transform: skew(-25deg); -o-transform: skew(-25deg); } ul#nav li a { background: none repeat scroll 0 0 #2D5B79; color: #FFFFFF; display: block; font-family: Arial; font-size: 11px; line-height: 32px; padding: 0 35px; text-align: left; text-decoration: none; text-transform: uppercase; } ul#nav li a span { transform: skew(25deg); -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); display:block; } ul#nav li.current a, ul#nav li a:hover { background: #c68c67; } ul#nav li ul { /* second-level lists */ position: absolute; width: 200px; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0px; padding: 0px; } ul#nav li ul li a, ul#nav li.current ul li a { background: #2F2F2F; border-bottom: 1px solid #666; color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px; transform: skew(25deg); -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); display:block; } ul#nav li ul li, ul#nav li ul li span { transform: skew(0deg); -webkit-transform: skew(0deg); -moz-transform: skew(0deg); -ms-transform: skew(0deg); -o-transform: skew(0deg); display:block; } ul#nav li ul li a:hover, ul#nav li.current ul li a:hover, ul#nav li ul li.current a { /* second level dropdown button hover state */ background: #c68c67; color: #fff; } ul#nav li ul li ul { margin: -30px 0 0 220px; } ul#nav li:hover ul li ul, ul#nav li:hover ul li ul li ul, ul#nav li.sfhover ul li ul, ul#nav li.sfhover ul li ul li ul { left: -999em; } ul#nav li:hover ul, ul#nav li ul li:hover ul, ul#nav li ul li ul li:hover ul, ul#nav li.sfhover ul, ul#nav li ul li.sfhover ul, ul#nav li ul li ul li.sfhover ul { /* lists nested under hovered list items */ left: auto; }

Problem courtesy of: talena6

Solution

Is this what you're wanting to achieve (the positioning of the drop downs may need a bit of tweaking)? http://jsfiddle.net/jzKHD/

The skew on the top level items is also affecting the bounds of the drop down ul -- you're then "unskewing" each drop down li , whereas you should actually unskew the whole ul :

ul#nav li ul { /* second-level lists */ border: 1px solid black; position: absolute; width: 200px; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0px; padding: 0px; /* This transform was moved here from the next rule */ -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); transform: skew(25deg); } ul#nav li ul li a, ul#nav li.current ul li a { background: #2F2F2F; border-bottom: 1px solid #666; color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px; display:block; /* The transform in the previous rule was originally here */ }

EDIT: To make it work correctly with the third level nav, move the transform into a separate rule that only affects the first drop down (using child selectors). So the set of styles above would instead look like this:

ul#nav li ul { /* second-level lists */ position: absolute; width: 200px; left: -999em; /* using left instead of display to hide menus because display: none isnt read by screen readers */ margin: 0px; padding: 0px; } /* This rule will only affect the first drop down, and be ignored by subsequent ones. */ ul#nav > li > ul { -webkit-transform: skew(25deg); -moz-transform: skew(25deg); -ms-transform: skew(25deg); -o-transform: skew(25deg); transform: skew(25deg); } ul#nav li ul li a, ul#nav li.current ul li a { background: #2F2F2F; border-bottom: 1px solid #666; color: #fff; font-size: 12px; line-height: 1.3; padding: 7px 10px; display:block; }

Fiddle here: http://jsfiddle.net/ns832/ (Again, I've ignored the spacing issues, they should be hopefully easy enough to fix.)

Solution courtesy of: Zaid Crouch

本文数据库(综合)相关术语:系统安全软件

点击收藏

LAST Magisk on T1 Updating Packer Builds to Use Managed Disks NEXT