html - HTML下拉移动一切
问题描述
html,body
{
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 28px 32px;
text-decoration: none;
}
li h1
{
position: relative;
color: white;
right: 550px;
}
li a:hover {
background-color: #111;
}
h1
{
color: Green;
font-family: "Alex Brush"; font-size: 26px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Marie-Claude</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>
</head>
<body>
<nav>
<ul>
<li><a href="home_fr.html">Francais</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Me</a></li>
<ul>
<li> CV</li>
</ul>
<li><a href="#">Home</a></li>
<li><h1 style="color:#C0C0C0">Marie-Claude Brossard</h1> </li>
</ul>
</nav>
</body>
</html>
如您所见,ul li 正在移动所有内容(如果您将其从代码中删除,则网站看起来不错)我该如何修复它并获得下拉菜单,谢谢!
解决方案
html,body
{
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.dropdown-content {
display: none;
position: absolute;
background-color: red;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
li:hover .dropdown-content {
display: block;
}
li {
float: right;
}
li a {
display: block;
color: white;
text-align: center;
padding: 28px 32px;
text-decoration: none;
}
li h1
{
position: relative;
color: white;
right: 550px;
}
li a:hover {
background-color: #111;
}
h1
{
color: Green;
font-family: "Alex Brush"; font-size: 26px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Marie-Claude</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>
</head>
<body>
<nav>
<ul class ="dropdown">
<li><a href="home_fr.html">Francais</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About Me</a>
<div class="dropdown-content">
<ul><li>Something</li></ul>
</div>
</li>
<li><a href="#">Home</a></li>
<li><h1 style="color:#C0C0C0">Marie-Claude Brossard</h1> </li>
</ul>
</nav>
</body>
</html>
推荐阅读
- javascript - 获取重复键错误,但未在集合中设置唯一属性
- date - 应用程序脚本上的区域时间和日期到谷歌表未转换为本地时间
- javascript - odataclient.query 不是 nodejs 中的函数
- python - 如何解决必须安装 CMake 才能构建以下扩展:PyCharm 中的 dlib?
- android - 我正在使用 kotlin 在 android 中使用芯片视图。我需要实现clickk功能
- python - 无法读取更大文件大小的镶木地板文件
- salesforce-communities - 双重选择确认邮件
- javascript - Select option not displaying when div is changed
- regex - 主网站中子链接的 URL 正则表达式
- google-apps-script - 限制 Google Apps 脚本中的数据是否与 Google 表格连接