問題計算絕對格

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. */ 
}