Question

我写了一个小的通用菜单，需要帮助弄清楚为什么二级链接总是显示在第一级链接的右侧。代码有点长，所以这里是jsfiddle。

这基本上是发生了什么。

                <nav>
                    <ul>
                        <li><a href='#'>Link 1</a></li>
                        <li>
                            <a href='#'>Link 2</a>
                            <ul>
                                <li><a href='#'>Sub Link 1</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href='#'>Link 3</a>
                            <ul>
                                <li><a href='#'>Sub Link 1</a></li>
                            </ul>
                        </li>
                        <li><a href='#'>Link 4</a></li>
                        <li><a href='#'>Link 5</a></li>
                        <li><a href='#'>Link 6</a></li>
                        <li><a href='#'>Link 7</a></li>
                        <li><a href='#'>Link 8</a></li>
                        <li>
                            <a href='#'>Link 8</a>
                            <ul>
                                <li><a href='#'>Sub Link 1</a></li>
                            </ul>
                        </li>
                    </ul>
                </nav>

链接2和链接2子链接悬停在右侧。我希望Link 8 Sub Link向左悬停。现在它超出了包装div的范围。理想情况下，如果右侧有足够的空间（256px），则将鼠标悬停在右侧。如果没有，请向左悬停。最右边的顶部链接应该有左侧的子链接。

Answer 1

试试这个http://jsfiddle.net/zx8oyx2n/6/

HTML

<ul class="left" >
 <li><a href='#'>Sub Link 1</a>
   </li>
    </ul>

CSS

.left{
 right:0;
}

Answer 2

我用过

 nav ul li:last-child ul { right: 0; }

因为我并不真正关心IE8或更少。

CSS链接悬停定位问题

2 个答案: