如何实现带有可变宽度子菜单的css水平菜单

Question

我有一个我想要实现的菜单。它有时可以向下钻取3或4层，因此我正在尝试优化每个菜单占用的空间。我想将每个ul设置为width：auto，唯一的问题是我无法可靠地设置右/左属性以显示下一个子菜单。这是一些代码：

HTML

<ul class="top-level-menu horizontal-multimenu">
    <li><a href="#">L360 Home</a></li>
    <li>
      <a href="#">Liquidity Risk Monitor</a>
      <ul class="second-level-menu">
        <li><a href="#">Indicators</a></li>
        <li><a href="#">Stress Levels</a></li>
      </ul>
  </li>
    <li>
        <a href="#">Sources and Assumptions</a>
        <ul class="second-level-menu">
            <li><a href="#">Source of Funds</a></li>
            <li><a href="#">Funding Assumptions</a></li>
        </ul>
    </li>
    <li>
      <a href="#">Data</a>
      <ul class="second-level-menu">
        <li><a href="#">Transfer</a></li>
        <li><a href="#">Table</a></li>
      </ul>
  </li>
  <li>
    <a href="#">Reports</a>
    <ul class="second-level-menu">
      <li>
        <a href="#">Risk Monitor</a>
        <ul class="subsecond-level-menu">
          <li><a href="#">Scorecard</a></li>
          <li><a href="#">DCG ALCO Data</a></li>
          <li><a href="#">Historical</a></li>
          <li>
            <a href="#">Prior Values</a>
            <ul class="subsecond-level-menu">
              <li><a href="#">Conditional Item</a></li>
              <li><a href="#">Conditional Item</a></li>
              <li><a href="#">Conditional Item</a></li>
              <li><a href="#">Conditional Item</a></li>
              <li><a href="#">Conditional Item</a></li>
              <li><a href="#">Conditional Item</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Stress Reports</a>
        <ul class="subsecond-level-menu">
          <li><a href="#">Footnotes</a></li>
          <li>
            <a href="#">Liquidity Availability Analysis</a>
            <ul class="subsecond-level-menu">
              <li><a href="#">Base Case</a></li>
              <li><a href="#">Level 1</a></li>
              <li><a href="#">Level 2</a></li>
              <li><a href="#">Level 3</a></li>
            </ul>
          </li>

          <li><a href="#">Exexcutive Summary</a></li>
          <li><a href="#">Liquidity Forecast</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Worksheets</a>
        <ul class="subsecond-level-menu">

        </ul>
      </li>
      <li><a href="#">Package Creator</a></li>
      <li>
        <a href="#">Memoranda</a>
        <ul class="subsecond-level-menu">

        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Support</a></li>
</ul>

CSS

/* Menu Styles */

.subsecond-level-menu
{
    position: absolute;
    top: 0;
    right: 999px;
    width: 300px;
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
  transition: opacity .3s;
}

.subsecond-level-menu>li
{
    height: 30px;
    background: #999999;
  padding: 0 1em;
}
.subsecond-level-menu>li:hover { background: #CCCCCC; }

.second-level-menu
{
    position: absolute;
    top: 30px;
    left: 0;
    width: 150px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
}

.second-level-menu>li
{
    position: relative;
    height: 30px;
    background: #999999;
  padding: 0 1em;
}
.second-level-menu>li:hover { background: #CCCCCC; }

.top-level-menu
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.top-level-menu>li
{
    position: relative;
    float: left;
    height: 30px;
    width: /*150px*/auto;
    background: #999999;
    padding: 0 1em;
}
.top-level-menu>li:hover { background: #CCCCCC; }

.top-level-menu li:hover>ul
{
     /*On hover, display the next level's menu */
    display: block;
  right: -300px;
  opacity: 1;
}

/* Menu Link Styles */

.top-level-menu a /* Apply to all links inside the multi-level menu */
{
    font: bold 14px Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    text-decoration: none;
    /*padding: 0 0 0 10px;*/
  margin: 0 auto;

    /* Make the link cover the entire list item-container */
    display: inline;
    line-height: 30px;
}
.top-level-menu a:hover { color: #000000; }
.top-level-menu li{whitespace: no-wrap;}

这应该可行，但所有的.subsecond-level-menu都要求x px宽，所以我知道放在哪里。

你认为将id分配给每个子菜单然后只为每个子菜单指定静态宽度/权限或尝试使用某些javascript来实现它会更好吗？

我已经和js尝试了一段时间，但是在子菜单宽度上似乎并不是这样。如果你好奇的话，这就是我一直在研究的代码：

JS

$(document).ready(function(){
  $('.top-level-menu').find('li').hover(
    function(e){
      $(e.target).css('background-color', 'red');
      var item =  $(this);
      console.log('The child list is considered hidden: ' + $(e.target).children('ul').is(':hidden') + ', Child width: '+$(e.target).children('ul').outerWidth() + 'px');
      $(e.target).children('ul').css({
        'right': (-1 * $(e.target).children('ul').outerWidth()) + 'px',
        'opacity': '1',
        'display': 'block'
      });
    },
    function(e){
      $(e.target).css('background-color', '');
      var item =  $(this),
          emptyCss = {
            'right' : '',
            'opacity' : '',
            'display': ''};
      item.children('ul').css(emptyCss);
    }
  );
});