需要将子悬停菜单显示为其主要父容器的水平位置

Question

我想将子悬停菜单显示为水平，从主要的父容器开始，如此网站http://www.batiosec.ma/

1. “菜单3”宽度与左侧和右侧相同右李。
2. 将子悬停菜单显示为其主要父容器的水平位置。

我的代码如下：
HTML

<div class="container">
<div class="row">
    <nav class="navbar navbar-right">
         <ul>
             <li><a href="">Menu 1</a></li>
             <li><a href="">Menu 2</a></li>
                         <li class="dropdown"><a href="">Menu 3</a>
                                 <ul>
                                     <div class="dropmenu">
                                         <li><a href="">Level 1</a></li>
                                         <li><a href="">Level 1</a></li>
                                         <li><a href="">Level 1</a></li>
                                         <li><a href="">Level 1</a></li>
                                         <li><a href="">Level 1</a></li>
                                         <li><a href="">Level 1</a></li>
                                         <li><a href="">Level 1</a></li>
                                     </div>
                                 </ul>
                         </li>
             <li><a href="">Menu 4</a></li>
             <li><a href="">Menu 5</a></li>
         </ul>
     </nav>
</div>

CSS：


ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}
ul li {
    text-align: center;
    display: inline-block;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #113333;
    font-size: 14px;
    font-family: sans-serif;
    padding: 10px 40px;
    text-align: center;
}
ul li a:hover {
    background-color: #4d4d4d;
    color: #fff;
    text-decoration: none;
}
    ul li ul {
    display: none;
}

JQUERY：


jQuery(document).ready(function ($) {

  $("ul li.dropdown").hover(
    function () {
        $("ul li ul").show(100);
    },
    function () {
        $("ul li ul").hide(100);
    }
  );

});

Answer 1

这是一种方法：

jQuery(document).ready(function ($) {
    $("ul li.dropdown").hover(
        function () {
            $("ul li ul").show(100);
        },
        function () {
            $("ul li ul").hide(100);
        }
    );
});

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}
ul li {
    text-align: center;
    display: inline-block;
}
ul li a {
    display: inline-block;
    text-decoration: none;
    color: #113333;
    font-size: 14px;
    font-family: sans-serif;
    padding: 10px 40px;
    text-align: center;
}
ul li a:hover {
    background-color: #4d4d4d;
    color: #fff;
    text-decoration: none;
}
ul li ul {
    display: none;
}
.dropmenu {
  position: absolute;
  left: 0;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <nav class="navbar navbar-right">
            <ul>
                <li><a href="">Menu 1</a></li>
                <li><a href="">Menu 2</a></li>
                <li class="dropdown"><a href="">Menu 3</a>
                    <ul class="dropmenu">
                        <li><a href="">Level 1</a></li>
                        <li><a href="">Level 1</a></li>
                        <li><a href="">Level 1</a></li>
                        <li><a href="">Level 1</a></li>
                        <li><a href="">Level 1</a></li>
                        <li><a href="">Level 1</a></li>
                        <li><a href="">Level 1</a></li>
                    </ul>
                </li>
                <li><a href="">Menu 4</a></li>
                <li><a href="">Menu 5</a></li>
            </ul>
        </nav>
    </div>
</div>