WordPress下拉菜单问题

Question

由于某种原因，我的WordPress生成的菜单在我尝试显示下拉菜单时出现了一些问题。父菜单项变为全宽，然后覆盖其他项。这是悬停状态下的样子：

下面是对代码的修改：https://jsfidle.net/j55scjeq/

以下是CSS：

        /* Navigation */

        #nav {
            margin: 100px 0;
            background-color: #E64A19;
            z-index: 999;
            overflow: visible;
        }

        /* Removing padding, margin and "list-style" from the "ul",
         * and adding "position:reltive" */
        #nav ul {
            padding:0;
            margin:0;
            list-style: none;
            position: relative;
            z-index:;
            }

        /* Positioning the navigation items inline */
        #nav ul li {
            margin: 0px -7px 0 0;
            display:inline-block;
            background-color: #E64A19;
            max-width: 200px;
            }

        /* Styling the links */
        #nav a {
            display:block;
            padding:0 10px;
            color:#FFF;
            font-size:20px;
            line-height: 60px;
            text-decoration:none;
        }

        /* Background color change on Hover */
        #nav a:hover {
            background-color: #000000;
        }
        #nav ul li ul {
            display: none;
            position: absolute;
            top: 50px;
            z-index: 99;
        }

        /* Display Dropdowns on Hover  */
        #nav ul li:hover > ul {
            display:block;
            position: relative;
            z-index: 99;
        }


        /* Fisrt Tier Dropdown  */
        #nav ul ul li {
            max-width:450px;
            display: block;
            position: relative;
            z-index: 99;
        }

下面是HTML：

<nav id="nav"><div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-5164" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-5164"><a href="#">Home</a></li>
        <li id="menu-item-2787" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2756 current_page_item menu-item-has-children menu-item-2787"><a href="#">Portfolio</a>
        <ul class="sub-menu">
            <li id="menu-item-4602" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4602"><a href="#">Link one</a></li>
            <li id="menu-item-5628" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5628"><a href="#">Link two</a></li>
            <li id="menu-item-1023" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1023"><a href="#">Link three</a></li>
            <li id="menu-item-363" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-363"><a href="#">Link four</a></li>
            <li id="menu-item-1022" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1022"><a href="#">Link five</a></li>
            <li id="menu-item-362" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-362"><a href="#">Link six</a></li>
        </ul>
        </li>
        <li id="menu-item-356" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-356"><a href="#">About</a>
        <ul class="sub-menu">
            <li id="menu-item-5709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-5709"><a href="#">Another Link 1</a></li>
            <li id="menu-item-358" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-358"><a href="#">Another Link 2</a></li>
            <li id="menu-item-4883" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4883"><a href="#">Another Link 3</a></li>
            <li id="menu-item-835" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-835"><a href="#">Another Link 4</a></li>
        </ul>
        </li>
        <li id="menu-item-364" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-364"><a href="#">Our clients</a>
        <ul class="sub-menu">
            <li id="menu-item-4709" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4709"><a href="#">Case Studies</a></li>
        </ul>
        </li>
        <li id="menu-item-357" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-357"><a href="#">Blog</a></li>
        <li id="menu-item-360" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-360"><a href="#">Contact</a></li>
        </ul></div></nav>

有人能帮我找到解决办法吗。我只希望子UL显示在一个漂亮的列中，与下面的内容重叠。

我想不通。我不确定这是HTML还是CSS的问题。：/

非常感谢。

Answer 1

您只需将位置：相对设置为位置：绝对-

/* Display Dropdowns on Hover  */
#nav ul li:hover > ul {
    display:block;
    position: absolute; /*Or you can simply remove it as you have already declared its position: absolute at #nav ul li ul */
    z-index: 99;
}

试试这个，如果有问题请告诉我。

JSFIDDEL-https://jsfidle.net/j55scjeq/2/