Question

我有this navigation here，我需要让子菜单与topmenu锚文本对齐。

我可以通过使用css将整个内部ul向左移动来实现。但每个li元素的数量都不同。由于我的锚点需要与li一样大，我在文本周围创建了一个范围，我的计划是测量它与父级的距离并将该数字应用于内部ul的left属性。这就是我到目前为止所做的：

    jQuery(document).ready(function(){
      menuAlign();
    });

    function menuAlign(){
      $('nav.main-nav > ul > li:not(.small)').each(function(){
        var self = $(this);
        var innerMenu = self.children('ul');
        var posOffset = self.children('.pos').position();
        innerMenu.css( "left", posOffset.left );
      });
    }

我在这行innerMenu.css( "left", posOffset.left );上收到错误说：

未捕获的TypeError：无法读取未定义的属性“left”

我做错了什么？有没有办法用CSS实现这个目标？

Answer 1

从margin移除nav.main-nav > ul > li > ul可能会对您有所帮助。的 FIDDLE 即可。我还在padding添加了一些nav.main-nav > ul > li > ul > li。

＆＃13;

.clearfix:after {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
body {
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
  /* trick for navigation */
}
nav.main-nav > ul {
  padding: 0;
  background-color: #f6a000;
  border-bottom: 1px solid #fff;
}
nav.main-nav > ul > li {
  display: inline-block;
  position: relative;
  z-index: 100;
  width: 30%;
  height: 60px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  border-right: 1px solid #fff;
  float: left;
}
nav.main-nav > ul > li.small {
  width: 2%;
}
nav.main-nav > ul > li > a {
  width: 100%;
  height: 100%;
  display: block;
  text-align: center;
  line-height: 60px;
  font-size: 16px;
  color: #fff;
}
nav.main-nav > ul > li > ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  padding: 0;
  _margin: 0 -1000em;
  z-index: 101;
  visibility: hidden;
  opacity: 0;
  background-color: #F67900;
  list-style: none;
}
nav.main-nav > ul > li:hover {
  background-color: #F67900;
}
nav.main-nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}
nav.main-nav > ul > li > ul > li {
  padding: 20px;
}
nav.main-nav > ul > li > ul > li > a {
  color: #fff;
  font-size: 16px;
}
nav.main-nav > ul > li:hover .drop {
  font-weight: bold;
}

＆＃13;

<nav class="main-nav">
  <ul class="clearfix">
    <li> <a href="#"><span class="pos">about us</span></a>

      <ul>
        <li><a href="#">who we are</a>
        </li>
        <li><a href="#">what we do</a>
        </li>
        <li><a href="#">where we are</a>
        </li>
        <li><a href="#">other information</a>
        </li>
      </ul>
    </li>
    <li> <a href="#"><span class="pos">accomodation</span></a>

      <ul>
        <li><a href="#">apartments</a>
        </li>
        <li><a href="#">hotels</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Answer 2

我略微更改了您的menuAlign()功能，因为我认为span正在class="pos＆＃34;在它实际上的另一个地方。希望它以改进的方式工作:-) fiddle

function menuAlign() {
    $('nav.main-nav > ul > li:not(.small)').each(function () {
        var self = $(this);
        var innerMenu = self.children('ul');

        var parent = innerMenu.parent();

        var posLeft = parent.find(".pos").position().left;

        innerMenu.css("left", posLeft);
    });
}

用jQuery无法获得跨度位置

2 个答案: