Question

我正在尝试实现一个CSS下拉菜单，但每当我这样做时，<h1>和<p>标签会围绕下拉菜单框。

有人可以建议解决这个问题吗？我现在只是在学习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;
}

Answer 1

更新这些类：

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*/
}

尝试实现CSS下拉菜单

1 个答案: