javascript - 计算绝对 div 的问题

Question

我创建了具有固定宽度和绝对位置 ul 的垂直菜单

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

但问题是我不想使用固定宽度和权利。我想根据 ul 中的 h2 类宽度和 js 计算 ul 的宽度和右侧。示例：现在怎么样：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 技能 :)

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