0

首先，我只是 Web 开发的初学者。在一个带有水平主菜单和垂直子菜单的网站上试用我的手。

当我将鼠标悬停在主菜单中的列表项上时，子菜单会下拉并替换主菜单的其他元素。另一个问题是子菜单与主菜单列表项不对齐。

这是代码：http: //jsfiddle.net/mCvct/1/

一段时间以来一直在尝试这样做并且一直在寻找一些解决方案。但到目前为止无法解决这个问题。

代码：

<div id="menu">
    <ul>
        <li> <a href="#">SERVICES</a>

            <div class="subnavi">
                <ul>
                    <li><a href="#">service1</a>
                    </li>
                    <li><a href="#">service2</a>
                    </li>
                    <li><a href="#">service3</a>
                    </li>
                </ul>
            </div>
            <!-- end of subnavi -->
        </li>
        <li> <a href="contact.php">CONTACT US</a>
        </li>
        <li> <a href="#">HOME</a>
        </li>
        <li> <a href="#">ABOUT US</a>
        </li>
    </ul>
</div>
<!-- end of menu -->

    ul {
        overflow:hidden;
        vertical-align:middle;
    }
    ul li {
        list-style:none;
    }
    ul li a {
        width:16.2%;
        /*164.6px;*/
        font-size:1em;
        line-height:1.8em;
        float:left;
        display:inline;
        text-align:center;
    }
    #menu ul li .subnavi {
        display:none;
        clear:both;
    }
    #menu ul li .subnavi ul {
        width:20em;
        background:#a0a0a0;
        list-style:none;
        margin:auto;
        line-height:2em;
        border:1px solid #a60000;
    }
    #menu ul li .subnavi ul li a {
        width:24em;
        line-height:1.8em;
        float:none;
        display:inline;
    }
    #menu ul li:hover .subnavi {
        display:block;
    }
4

3 回答 3

2

你需要不断clear:both地删除.subnavposition: absolute.subnav ul

#menu ul li .subnavi {
    display:none;
}
#menu ul li .subnavi ul {
    width:20em;
    background:#a0a0a0;
    list-style:none;
    margin:auto;
    line-height:2em;
    border:1px solid #a60000;
    position:absolute;
    top: 40px;
}

检查这个小提琴

于 2013-06-05T15:45:29.953 回答
0

试试这个

#menu ul li:hover .subnavi {
  display:block;
  position:absolute;
  top:40px;
    }

演示

于 2013-06-05T15:49:54.093 回答
0

您需要为您添加一个绝对位置.subnavi并定位顶部ul相对位置：

#menu ul li:hover .subnavi {
    position: absolute;
    top: 35px;
}
ul {
    position: relative;
}

还为您的链接添加一点填充将防止子导航在您实际使用光标到达它之前关闭：

ul li a {
    padding: 10px;
}

http://jsfiddle.net/pulleasy/mCvct/4/

于 2013-06-05T15:52:49.390 回答