WordPress下拉菜单问题

时间:2016-12-20 00:55:14

标签: html css wordpress

出于某种原因,当我尝试显示下拉列表时,我的WordPress生成的菜单会导致一些问题。父菜单项变为全宽,然后覆盖其他项。这就是悬停状态下的样子:

Portfolio menu on hover state

以下是代码的小提琴:https://jsfiddle.net/j55scjeq/

这是CSS:

rest

这是HTML:

        /* 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;
        }

请有人帮我找一个解决方案。我想让孩子UL显示在一个漂亮的列中,与下面的内容重叠。

我无法弄清楚这一点。我不确定它是否与HTML或CSS有关。 :/

非常感谢。

2 个答案:

答案 0 :(得分:3)

您只需将position: relative设置为position : absolute -

即可
/* 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://jsfiddle.net/j55scjeq/2/

答案 1 :(得分:1)

你需要相对于保留下拉菜单来进行#nav ul li定位 在链接区域附近

和#nav ul li:hover> ul [将位置从绝对位置更改为相对位置是主要原因]

Edite : https://jsfiddle.net/j55scjeq/3/