Question

我遇到了一个下拉菜单。问题是“父”链接正在跳跃。

HTML：

<ul id="nav">
    <li><span>Page 1</span>
        <ul>
            <li><a>Extralong Page 1.1</a></li>
            <li><a>Page 1.2</a></li>
            <li><a>Page 1.3</a></li>
        </ul>
    </li>
    <li><a href="#">Page 2</a></li>
    <li><span>Page 3</span>
        <ul>
            <li><a>Page 3.1</a></li>
            <li><a>Long description for page 3.2</a></li>
            <li><a>Page 3.3</a></li>
            <li><a>Page 3.4</a></li>
        </ul>
    </li>
</ul>

CSS：

* {
    margin: 0;
    padding: 0;
}

#nav {
        float: right;
    }

        #nav ul {
            float: left;
        }

        #nav li {
            float: left;
            padding-top: 2px;
            list-style: none;
            background: #3451ff;
        }

            #nav li a,
            #nav li span {
                display: block;
                text-decoration: none;
                font-size: 12pt;
                font-weight: bold;
                padding: 13px 10px 9px 10px;
            }

                #nav li a:link, #nav li a:active, #nav li a:visited,
                #nav li span {
                    color: #FFF;
                }

                #nav li a:hover, #nav li a.active,
                #nav li span:hover {
                    color: #000;
                }

            #nav li li {
                display: none;
            }

            #nav li:hover li {
                display: block;
                float: none;
                background: #555;
            }

        #nav li li a {
            font-size: 10pt;
            margin: 1px;
            width: 100%;
            background: #3c6f3a;
            padding: 5px 0;
        }

Demo

如何将此父级设为静态，以便在悬停时不更改宽度？我不想使用js。

Answer 1

设置父级的宽度：

#nav li {
    float: left;
    padding-top: 2px;
    list-style: none;
    width: 100px; /* Add this bad boy */
    background: #3451ff;
}

DEMO HERE

Answer 2

您可以使用position:absolute并使其父级position:relative Demo

#nav ul {
    position:absolute;
    right:0;
 }

Answer 3

使用position：relative表示ul parent并给出position：absolute表示父子..它将正常工作。

这是更新的小提琴：http://jsfiddle.net/nikhilvkd/gmU55/5/

#nav li li {
                display: none;
                 position:relative;
            }

            #nav li:hover li {
                display: block;
                float: none;
                position:absolute;
                background: #555;
            }

CSS下拉菜单跳跃

3 个答案: