html - css下拉菜单移动页面内容
问题描述
我只用 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>
解决方案
你需要清除你的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>
推荐阅读
- symfony - Symfony 4如何将匿名用户重定向回主页?
- reactjs - React Enzyme - 模拟多次点击
- sql - SQL动态更改数据库并创建视图
- javascript - React Hook useEffect 缺少依赖项
- flutter - Flutter:如何对齐两个相邻小部件的高度?
- pandas - 对多索引数据框的列进行排序
- javascript - 赛普拉斯有条件退出运行程序/测试
- bash - 从 tar 存档中删除文件的 grep 输出列表
- .net - 在 XUnit 测试中使用反射加载 MemberData
- java - 我被作业困住了我无法在sqlite数据库android中保存图像路径