试图实现CSS下拉菜单

我试图实现一个CSS下拉菜单，但每当我这样做，<h1>和<p>标签环绕下拉菜单框。试图实现CSS下拉菜单

任何人都可以提出一个解决方案吗？我现在只是在学习CSS，并会很感激任何输入。

感谢

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link rel="stylesheet" href="css.css"/> 
</head> 

<body> 
<div id= "container"> 

    <img src="images/title.jpg"/> 


<div id="navigation"> 
<ul class="navbar"> 
<li> 
    <a href="#">Home</a> 
</li> 
<li> 
    <a href="#">HTML5</a> 
    <ul> 
     <li> 
      <a href="#">Tutorial 1</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 2</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 3</a> 
     </li> 
    </ul> 
</li> 
<li> 
    <a href="#">CSS3</a> 
    <ul> 
     <li> 
      <a href="#">Tutorial 1</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 2</a> 
     </li> 
     <li> 
      <a href="#">Tutorial 3</a> 
     </li> 
    </ul> 
</li> 
<li> 
    <a href="#">Links</a> 
</li> 
<li> 
    <a href="#">Contact</a> 
    </li> 
</ul> 
</div> 
<div id="content"> 
<h2>Home Page</h2> 
<p>This is a test paragraph. This is a test paragraph. This is a test paragraph. 
This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph. This is a test paragraph.</p> 
</div> 
    <div id="footer"> 
    </div> 


</div> 



</body> 
</html>

和CSS是：

@charset "utf-8"; 
/* CSS Document */ 
#container{ 
    width:800px; 
    background-color:#00FF00; 
    border:1px solid black; 
    height:1000px; 
    z-index:-9; 
    margin:auto; 
} 

#logo{ 

    background-color:#FF0033; 
    border:#000 1px; 
    width:800px; 
    height:200px; 
    overflow:hidden; 

} 

#navigation{ 

    background-color:#FFF; 
    border:#000 1px; 
    width:800px; 
    height:30px; 

} 

#content{ 

    background-color:#6F3; 
    border:#000 1px; 
    width:780px; 
    height:400px; 
    margin:10px; 



} 

#footer{ 

    background-color:#FF0; 
    border:#000 1px; 
    width:800px; 
    height:100px; 
} 

.navbar { 
/*border-right: 1px solid #54879D;*/ 
height: 40px; 
margin: 0 0 0 0; 
padding: 0; 

} 
.navbar li { 
background-color: #366B82; 
float: left; 
font: bold 12px/1.2em Arial,Verdana,Helvetica; 
height: auto; 
list-style: none outside none; 
margin: 20 0; 
padding: 0; 
text-align: center; 
    width: 160px; 
} 
.navbar a { 
/* border-left: 1px solid #54879D;*/ 
border-right: 1px solid #1F5065; 
color: #FFFFFF; 
display: block; 
padding: 10px 10px; 
    text-decoration: none; 
} 
.navbar li:hover, a:hover { 
background-color: #54879D; 
} 
.navbar li ul { 
display: none; 
height: auto; 
margin: 0; 
padding: 0; 

} 
.navbar li:hover ul { 
display: block; 


} 
.navbar li ul li { 
background-color: #54879D; 

} 
.navbar li ul li a { 
border-color: #74A3B7 #1F5065 #1F5065; 
border-left: 1px solid #1F5065; 
border-right: 1px solid #1F5065; 
border-style: solid; 
border-width: 1px; 
} 
.navbar li ul li a:hover { 
background-color: #366B82; 
}

来源

2013-10-10 LeDoc

表现出一定的代码哥们 –

请不要表现出你的代码。很可能你还没有关闭你的标签。 –

更新这些类：

working DEMO

.navbar li ul li { 
background-color: #54879D; 
float:none; /*added*/ 
} 

.navbar li ul { 
display: none; 
height: auto; 
margin: 0; 
padding: 0; 
position:absolute; /*added*/ 
}

来源

2013-10-10 13:50:20

谢谢，这似乎工作得很好。你能解释一下这两条线是做什么的，所以我完全理解了吗？ – LeDoc

@ user2784840：您需要将内部'ul'位置设置为'absolute'，以防止将内容推送到对方的列表项并将'float'设置为'none'。 –

试图实现CSS下拉菜单

回答

相关问题