기울어 진 텍스트없이 기울어 진 메뉴 항목을 얻으려고합니다. 가까이 왔지만 2 단계 항목이 이상하게 계단식으로 연결되어 있습니다

Question

li 항목을 기울이면 'transform'을 사용한 다음 span의 반대 변환을 수행하여 텍스트를 곧게 만듭니다.

jQuery를 사용하여 텍스트 주위에 span을 추가해야했습니다. 왜냐하면 직장에서 사용해야하는 CMS가 자동으로 메뉴를 작성하기 때문에 HTML 내에 어떤 클래스 나 span을 추가 할 수 없기 때문입니다.

내가 원하는 것을 달성하기에 이르렀지만, 어떤 이유로 드롭 다운 메뉴 항목이 계단식으로 나타납니다.

어떻게 해결할 수 있습니까? 여기

내가 무슨 짓을했는지 있습니다 : 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; 
} 

Answer 1

이인가 당신이 조금 필요할 수 있습니다 (드롭 다운의 위치를 ​​달성하고자하고 조정)? http://jsfiddle.net/jzKHD/

최상위 항목에 대한 스큐도 아래로 ul 드롭의 경계에 영향을 미치는 - 당신이 아래로 li 각 드롭 후 "unskewing"이야, 당신은 ul 전체 unskew 실제로해야하는 반면 :

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 : 세 번째 수준의 탐색에서 제대로 작동하려면 변환을 하위 선택기를 사용하는 첫 번째 드롭 다운에만 적용되는 별도의 규칙으로 옮기십시오. 그래서 위의 스타일 세트 대신 같을 것이다 :

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; 
} 

바이올린 여기 : http://jsfiddle.net/ns832/를 (다시 말하지만, 나는 간격 문제를 무시했다, 그들은 해결하기 위해 희망 쉽게 충분합니다.)