html - CSS菜单中的最后一个菜单项落到下一行

Question

感谢您花时间看我的问题。我正在以下网站上工作：

http://lighting-originals.myshopify.com/pages/contact-us/

如您所见，页面顶部有一个菜单，由一些带有下拉菜单的项目组成，有些则没有。由于某种原因，最后一个菜单项落到了下一行。我最后放哪个项目或它是否有下拉菜单似乎没有什么区别。

有人对我如何解决这个问题有任何想法吗？

谢谢！

Answer 1

style.css 行号 266更新吧

#top-menu li.last a {
border: none;
border-radius: 0 4px 4px 0;
position: relative;
right: 295px;
top: 34px;
}

更新代码

#top-menu li.last a {
    border: none;    
    }

Answer 2

删除以下样式的相对位置：-

#top-menu li.last a {
border: none;
border-radius: 0 4px 4px 0;
position: relative;  //Remove this
right: 295px;
top: 34px;
}

您的最后一个li及其div在适当的位置，但a在 div 内的定位将其包裹起来。它应该只适用于从上述样式中删除位置。

这会导致后续的 Div 结束。

<div class="has-dropdown">
              <a href="/pages/brands" class="clearfix">
                <span class="nav-label">Shop By Brand</span>
                <span class="nav-arrow" style="top: 16px;"></span>
              </a>
              <ul style="top: 37px; display: none;">

                <li><a href="/collections/elk">Elk</a></li>

              </ul>
            </div>