问题计算绝对格

Question

我创建垂直菜单固定宽度和绝对位置UL

.categories ul.sub { 
position: absolute; 
right: -191px; 
top: 0; 
background: #fff; 
width: 190px;} 

但问题是，我不希望使用固定的宽度和正确的。我想计算ul的宽度和右边，这取决于ul内部带有js的h2类宽度。例如：现在怎么是：http://prntscr.com/rzcvx，我怎么需要：http://prntscr.com/rzd3t

HTML例如：

<div class="categories"> 
<ul class="maincats"> 
    <li> 
     <a class="first"><img/><span>Category Name</span></a> 
     <ul class="sub first"> 
      <li><h2>H2 Title</h2></li> 
      <li>Title</li> 
      <li>Title</li> 
      <li>Title</li> 
      <li>Title</li> 
     </ul> 

    </li> 
</ul></div> 

我什么都没有尝试过呢，我只能用这个js

$(".categories li a").hover(
     function() { 
      $(this).addClass("hover"); 
      $(this).next('ul.sub').show(); 
     }, 
     function() { 
      $(this).removeClass("hover"); 
      $(this).next('ul.sub').hide(); 
     } 


    ); 

    $(".categories ul.sub").hover(
     function() { 
      $(this).prev().addClass("hover"); 
      $(this).show(); 
     }, 
     function() { 
      $(this).prev().removeClass("hover"); 
      $(this).hide(); 
     } 


    ); 

    $(function() { 
     var zIndexNumber = 10; 
     // Put your target element(s) in the selector below! 
     $(".categories ul.sub").each(function() { 
      $(this).css('zIndex', zIndexNumber); 

     }); 
    }); 

请帮助我，我有基本的js skils :)

Answer 1

你可能想试试这个：

.categories ul.sub { 
    position: absolute; 
    right: -100%; /* Not sure if this works, can't test without your html */ 
    top: 0; 
    background: #fff; 
    white-space: nowrap; /* Prevent spaces from wrapping when text's overflowing. */ 
}