0

固定幅と絶対位置 ul を持つ垂直メニューを作成しました

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

しかし問題は、固定幅と右を使用したくないということです。jsでul内のh2クラスの幅に依存する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スキルを持っているのを手伝ってください:)

4

1 に答える 1

0

これを試してみてください：

.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. */
}
于 2013-02-08T13:56:30.120 に答える