Question

当您将鼠标悬停在“在线预订”上时，我会有一个水平导航菜单。它会下拉菜单中有更多选项。当我将鼠标悬停在下拉选项＆＃39;信用卡＆＃39;我希望菜单显示在旁边（左：100％）。

HTML如下： -

<div id="main-links">

    <div id="main-links-content">

        <ul class="topnav">

            <li><a class="link active" href="index.php">Aberdeen Taxis</a></li>
            <li><a class="link" href="#!">About Us</a></li>
            <li><a class="link" href="#!">Our Services</a></li>
            <li><a class="link" href="#!">Our Tours</a></li>
            <li><a class="link" href="#!">Our Fares</a></li>
            <li><a href="#">Online Booking</a>
                <ul class="dropdown">
                    <li><a href="onlinebooking-ab/login-cash.php">Cash Booking</a></li>
                    <li><a href="onlinebooking-ab/login.php">Account Booking</a></li>
                    <li><a href="onlinebooking-ab/login-guest.php">Credit Card Booking</a>
                        <ul class"sidedrop">
                            <li><a href="#">HTML</a></li>
                            <li><a href="#">CSS</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li><a class="link" href="#!">Contact Details</a></li>
        </ul>

    </div>

</div>

在这里查看完整的JS小提琴：http://jsfiddle.net/mrnaysilva/7A5qe/

我认为目前正在发生的事情是当我将鼠标悬停在信用卡上时＃39;选项，当我将鼠标悬停在“在线预订”状态时，它会生成初始下拉菜单。 - 我不想发生这种情况。

关于如何解决此问题的任何想法？卡住

Answer 1

所以..你必须改变这个css：

#main-links-content .topnav li {
  margin-left:0px !important;
  /*padding-left: 10px;*/
  padding-right: 5px !important;
  border-left: 1px solid #474747;
  display: table-row;
}

#main-links-content ul ul ul {
  left: 100%;
  position: absolute;
  top: 80px;
  /*display: inline;*/
}

Here it is working...

Answer 2

您必须更改下拉样式：

#main-links-content ul ul ul {
  left: 100%;
  position: absolute;
  top: 0;
  /*display: inline;*/
}

Here is a working JSFiddle我表示已应用此行为。

jQuery / CSS - 导航链接侧面菜单

2 个答案: