Question

嗨，我正在进行网站布局，因为我的问题和其他一些原因，如果我可以使用我自己的布局，因为我做了它并不重要。但问题是下拉菜单无法正常工作。

我与你分享代码：

<html>
<head>
<style>
body{
    background:linear-gradient(to bottom right,#013,#c0c);
    color:#930;
}
#nav{
    margin-left:auto;
    margin-right:auto;
    margin-top:40px;
    maring-bottom:10px;
    color:#930;
    background-color:#cb6;
    border:2px solid #930;
    border-radius:13px;
    -webkit-border-radius:13px;
    -moz-border-radius:13px;
    text-align:center;
    float:center;
    width:750px;
    height:40px;
}
#main{
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    maring-bottom:auto;
    color:#930;
    background-color:#cb6;
    border:2px solid #930;
    border-radius:13px;
    -webkit-border-radius:13px;
    -moz-border-radius:13px;
    text-align:center;
    float:center;
    width:750px;
    height:500px;
}
#nav ul{
    list-style:none;
    margin:0 auto;
}
#nav li{
    position:relative;
    float:left;
    display:inline;
}
#nav a{
    text-decoration:none;
    color:#930;
    padding:10px 25px;
    height:20px;
    display:inline-block;
}
#nav a:hover{
    text-decoration:none;
    color:#fff;
    background-color:#930;
    padding:10px 25px;
    height:20px;
    display:inline-block;
}
#pull li ul{
    display:none;
    color:#930;
    text-align:center;
    position:absolute;
}
#pull li:hover ul{
    display:block;
    color:#930;
    text-align:center;
    position:absolute;
}
#pull li ul a{
    display:block;
    min-width:80px;
    width:auto;
    height:25px;
    color:#fff;
    padding:0px 5px;
    text-align:center;
    border:2px solid #930;
    background-color:#cb6;
}
#pull li ul a:hover{
    display:block;
    min-width:80px;
    width:auto;
    height:25px;
    color:#fff;
    padding:0px 5px;
    text-align:center;
    border:2px solid #fff;
    background-color:#930;
}
</style>
</head>
<body>
<div id="nav">
<ul id="pull">
    <li><a href="http://www.elderpact.site11.com/home.html"><b>home</b></a></li>&nbsp&nbsp
    <li><a href="http://www.elderpact.site11.com/page.html"><b>page 1 &#9660</b></a>
        <ul>
            <li><a href="http://www.elderpact.site11.com/page2.html"><b>page 2</b></a><li>
            <li><a href="http://www.elderpact.site11.com/page3.html"><b>page 3</b></a><li>
        </ul>
    </li>
</ul>
</div>
<br><br>
<div id="main">
de content komt nog
</div>
</body>
</html>

www.elderpact.tk

也可以看到在线布局

菜单栏，一切都需要像他们一样但是如果打开内容框，下拉菜单必须降低内容框。现在它正好通过内容。我还想在下拉菜单开启下直接显示下拉菜单（第1页）。

有人可以帮帮我吗？

Answer 1

创建自己的下拉列表的风险并不适用于所有浏览器。这个问题的最佳解决方案是使用Bootstrap Twitter。 Bootstrap DropDown

Answer 2

以下是我想要思考的方式的菜单：http://jsfiddle.net/TPLJ8/1/

您基本上需要从CSS顶部的ul和li元素中删除边距和填充（重置），如下所示：

ul, li {margin:0; padding:0;}

这将帮助您从干净的石板开始。我还清理了你的CSS，因为如果那种风格保持不变，你就不需要在hovers上声明相同的样式。

您的HTML也需要一些工作。您错过了关闭</li>代码并且有一堆不必要的<br />代码。

下拉菜单没有做我想要的

2 个答案: