下拉菜单不会做我想要的

您好我正在网站布局，因为我的问题和其他一些原因，如果我只是可以使用我自己的布局以及因为我做到了。但问题是下拉菜单不能正常工作，因为它正在修补。下拉菜单不会做我想要的

我与你分享代码：

<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页）。

有人能帮我吗？

来源

2013-12-10 Dylan Lindelauf

另一个注意事项：如果您愿意，可以使用此布局，但请不要声称这是您自己的设计。我想使用它，因为我做了它，但如果别人想要使用它，我没有问题， –

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

来源

2013-12-10 20:03:50

对不起，我可能不清楚，但我不能使用会影响布局的原因。它不会打扰我，它不会在所有布局中工作。 –

事情是它必须保持它只是下拉必须在李的下面产生它，它不会像现在走低槽内容 –

这是一个可怕的答案。 disinfor

下面是与菜单的方式摆弄我认为你想要的：http://jsfiddle.net/TPLJ8/1/

你基本上需要在你的CSS的顶部除去从ul和li元素margin和padding（复位），像这样：

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

这将帮助你开始用干净的石板。我还清理了您的CSS，因为如果该样式保持不变，则无需在hovers上声明相同的样式。

您的HTML还需要一些工作。你错过了关闭</li>标签，并有一堆不必要的<br />标签。

来源

2013-12-10 20:12:18 disinfor

嘿，你可以检查www.elderpact.tk第1页？ –

这就像我想要的菜单，但我不知道我是如何得到它的。 –

下拉菜单不会做我想要的

回答

相关问题