Question

我仅通过CSS和HTML制作了一个CSS下拉菜单。我的问题是，当我将鼠标悬停在导航栏上时，页面内容会移到右侧。然后，当我将鼠标悬停在下拉菜单上时，页面内容将移回到左侧。到目前为止，我还没有发现任何可以帮助我的东西。我已在下面附上了相关代码。

请帮助我，谢谢

* {
	padding: 0;
	margin: 0;
}

nav {
	background-color: #cccccc;
	width: 100%;
	height: 80px;
}


ul {
	float: left;
}

ul li {
	position: relative;
	list-style: none;
	float: left;
	line-height: 80px;
	font-size: 20px;
	color: #c92d39;
}


ul li a{
	display: block;
	text-decoration: none;
	color: #c92d39;
	padding: 0 30px;
}


ul li a:hover {
	color: black;
	border-bottom: 1px solid #c92d39;
}

ul li:hover ul {
	display: block;
}

ul li ul {
	display: none;
	position: absolute;
	background-color: #e5e5e5;
	border-radius: 0 0 3px 3px;
}


ul li ul li a:hover {
	background-color: #b2b2b2;
	color: #c92d39;
	border-bottom: none;
}

ul li ul li {
	font-size: 15px;
	width: 100%;
	text-align: center;
}

h1 {
	color: #c92d39;
	padding: 30px;
}

h2 {
	color: #c92d39;
	padding: 5px 30px 10px 30px;
}

p {
	padding: 0px 30px;
}

a {
	text-decoration: none;
}



#logo {
	background-color: #cccccc;
	padding: 0 51px 0 75px;
	font-size: 30px;
	font-weight: bold;
}

.page-body {
	background-color: #e5e5e5;
}

.wrapper {
	margin: 0 300px 0 300px;
	padding-left: 0px;
	height: 100%;
	background-color: white;
}

.footer {
	background-color: #cccccc;
	width: 100%;
	height: 80px;
}

.empty_box {
	height: 1000px;
	width: 100%;
}

#contacts {
	margin: 0px 0px 0px 60px;
	padding: 0 20px;
	border-top: 1px solid #cccccc;
}

#contacts:hover {
	border-top: 1px solid #c92d39;
}

#copyright {
	font-size: 10px;
	float: right;
	padding: 0px 30px 0 770px;
}

#copyright:hover {
	background-color: #cccccc;
}

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Basecode</title>
		<link href="style.css" rel="stylesheet" type="text/css">
	</head>

	<body>
		<nav>
			<ul>
				<li id="logo">Cultural Asia</li>
			</ul>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li>
					<a href="attractions.html">Attractions</a>
					<ul>
						<li><a href="#">attraction1</a></li>
						<li><a href="#">attraction2</a></li>
						<li><a href="#">attraction3</a></li>
					</ul>
				</li>
				<li>
					<a href="packages.html">Packages</a>
					<ul>
						<li><a href="#">package1</a></li>
						<li><a href="#">package2</a></li>
						<li><a href="#">package3</a></li>
					</ul>
				</li>
				<li><a href="contacts.html">Contacts</a></li>
			</ul>
		</nav>
		<div class="page-body">
			<div class="wrapper">
				<p>hi</p>				
				<div class="empty_box"></div>
			</div>
		</div>
		<div class="footer">
			<ul>
				<li><a href="contacts.html" id="contacts">Contact Details</a></li>
				<li id="copyright">Copyright Lachlan Dunn</li>
			</ul>
		</div>
	</body>
</html>

Answer 1

您需要清除floats。

.page-body {
    …
    clear: left;
}

演示

* {
  padding: 0;
  margin: 0;
}

nav {
  background-color: #cccccc;
  width: 100%;
  height: 80px;
}

ul {
  float: left;
}

ul li {
  position: relative;
  list-style: none;
  float: left;
  line-height: 80px;
  font-size: 20px;
  color: #c92d39;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #c92d39;
  padding: 0 30px;
}

ul li a:hover {
  color: black;
  border-bottom: 1px solid #c92d39;
}

ul li:hover ul {
  display: block;
}

ul li ul {
  display: none;
  position: absolute;
  background-color: #e5e5e5;
  border-radius: 0 0 3px 3px;
}

ul li ul li a:hover {
  background-color: #b2b2b2;
  color: #c92d39;
  border-bottom: none;
}

ul li ul li {
  font-size: 15px;
  width: 100%;
  text-align: center;
}

h1 {
  color: #c92d39;
  padding: 30px;
}

h2 {
  color: #c92d39;
  padding: 5px 30px 10px 30px;
}

p {
  padding: 0px 30px;
}

a {
  text-decoration: none;
}

#logo {
  background-color: #cccccc;
  padding: 0 51px 0 75px;
  font-size: 30px;
  font-weight: bold;
}

.page-body {
  background-color: #e5e5e5;
  clear: left;
}

.wrapper {
  margin: 0 300px 0 300px;
  padding-left: 0px;
  height: 100%;
  background-color: white;
}

.footer {
  background-color: #cccccc;
  width: 100%;
  height: 80px;
}

.empty_box {
  height: 1000px;
  width: 100%;
}

#contacts {
  margin: 0px 0px 0px 60px;
  padding: 0 20px;
  border-top: 1px solid #cccccc;
}

#contacts:hover {
  border-top: 1px solid #c92d39;
}

#copyright {
  font-size: 10px;
  float: right;
  padding: 0px 30px 0 770px;
}

#copyright:hover {
  background-color: #cccccc;
}

<nav>
  <ul>
    <li id="logo">Cultural Asia</li>
  </ul>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li>
      <a href="attractions.html">Attractions</a>
      <ul>
        <li><a href="#">attraction1</a></li>
        <li><a href="#">attraction2</a></li>
        <li><a href="#">attraction3</a></li>
      </ul>
    </li>
    <li>
      <a href="packages.html">Packages</a>
      <ul>
        <li><a href="#">package1</a></li>
        <li><a href="#">package2</a></li>
        <li><a href="#">package3</a></li>
      </ul>
    </li>
    <li><a href="contacts.html">Contacts</a></li>
  </ul>
</nav>
<div class="page-body">
  <div class="wrapper">
    <p>hi</p>
    <div class="empty_box"></div>
  </div>
</div>
<div class="footer">
  <ul>
    <li><a href="contacts.html" id="contacts">Contact Details</a></li>
    <li id="copyright">Copyright Lachlan Dunn</li>
  </ul>
</div>

Answer 2

问题是您向元素添加了下边界，从而将段落推出了位置。

ul li a:hover {
    color: black;   
}

代替

 ul li a:hover {
        color: black;
        border-bottom: 1px solid #c92d39;
    }

或者如果您真的想要边框，请查看css框大小设置属性文档

CSS下拉菜单移动页面内容

2 个答案: