Question

我正在创建sorta下拉导航菜单，但只有“下拉列表”是水平的垂直。问题是我基本上有4个100x100px正方形，我希望子菜单在悬停到右边时打开。使用此代码我可以工作，除了新的子菜单与原始方块重叠。如果位置不是绝对的，即使所有内容都向左浮动，子菜单也会向下扩展。我已经尝试了几个小时，并在每个角落搜索，但我只是不能让它工作。如何使子菜单向右扩展，以5px的边距扩展到下一个？

#nav {
    float:left;
    list-style-type: none;
    height: 540px;
    width: 100px;
    margin:0 auto; 
}

#nav li {
    list-style-type: none;
    display:block;
    float:left;
}

nav ul:after {
    content: ""; clear: both; display: block;
}

#nav ul a {
    display: block;
    width: 100px;
    height: 100px;
    text-decoration: none;
    list-style-type: none;
    border: 1px solid black;
    margin-right: 5px;
    margin-bottom: 5px;
    float:left;
}

#nav ul li:hover > ul{
    display:block;
    text-decoration: none;
    list-style-type: none;
    overflow:hidden;
    position:absolute;
    float:left;
}

#nav ul ul{
    display:none;
    float:left;
}

和html：

<div id="nav">
    <ul>
        <li>
            <a href="index.html" class="home">
                <img src="#" width="100" height="100" 
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>
        </li>
        <li>
            <a href="#" class="cloud" target="_blank">
                <img src="#" width="100" height="100"
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>

            <ul>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="message" target="_blank" >
                <img src="#" width="100" height="100"
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>
            <ul>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#" class="box" target="_blank">
                <img src="#" width="100" height="100"
                onmouseover="this.src='#'" 
                onmouseout="this.src='#';">
            </a>
            <ul>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
                <li>
                    <a href="#" target="_blank">
                        <img src="#" width="100" height="100">
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

额外的li是子菜单按钮。

Answer 1

尝试将其添加到#nav ul li:hover > ul

left: 115px

下拉导航菜单重叠

1 个答案: