我的 html 页面有问题。 问题是在下拉列表中我只能看到标题的第一个词。尽管我尝试了不同的方法，但导航栏也不在页面中间 样式我仍然无法在中间得到它。这是我的CSS代码 llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
background-color: #78706e ;
height: 100%;
font-family: Arial;
color:white;}
.header {
background-image: url("m.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-color: #F1F1F1;
text-align: center;
padding: 20px;}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
right: 0;
left: 0;
float: left ;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
nav ul li a{
text-decoration: none;
color: white;
display:block;
}
nav ul li a:hover{
background-color:green;
}
nav ul li ul li{
display: none;
}
nav ul li:hover ul li{
display: block;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
padding: 10px;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 70%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.footer {
float: left;
padding: 5px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: .8;
right: 0;
left: 0;
}````
` <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> University of </title>
<link rel="stylesheet" type="text/css" href="Style.css">
</head>
<body>
<img src="image.png" alt="image" width="400" height="200">
<nav>
<ul>
<li><a href="Website.html">Home</a></li>
<li><a href="#">Academic</a>
<ul>
<li><a href="Departments.html">Departments</a></li>
<li><a href="Undergrad.html">Undergraduate Programs</a></li>
<li><a href="Grad.html">Graduate Programs</a></li>
</ul></li>
<li><a href="#">Admission</a>
<ul>
<li><a href="un.html">Undergraduate Admissions</a></li>
</ul></li>
<li><a href="#">Research</a>
<ul>
<li><a href="KeyResearch.html">Key Research Areas</a></li>
<li><a href="Innovation.html">Innovation & Entrepreneurship</a></li>
<li><a href="Highlight.html">Highlighted Units & Facilities</a></li>
<li><a href="GradResearch.html">Graduate Research</a></li>
<li><a href="UndergradResearch.html">Undergraduate Research</a></li>
</ul></li>
<li><a href="#">Campus Life</a>
<ul>
<li><a href="StuLife.html">Student Life</a></li>
<li><a href="Inclusion.html">Inclusion</a></li>
<li><a href="ArtsCulture.html">Arts & Cultures</a></li>
</ul></li>
<li><a href="#">Events</a></li>
</ul></nav>
<div class="row">
<div class="column side">
<h2>Side</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit..</p>
</div>
<div class="column middle">
<h3>GLOBAL</h3>
<h2>The Connected World </h2>
<img src="img1.png" alt="img" hight="300" width="400">
<p>Notre Dame seeks to be in the world, and to bring the world to Notre Dame, because inquiry and
scholarly exchange are enriched by the pursuit of cultural fluency.</p>
<h3>Faith & Service</h3>
<h2>The Demands of Justice</h2>
<img src="img2.png" alt="img" hight="300" width="400">
<p>Notre Dame is animated by a faith that inspires us to seek knowledge because of the powerful tool
it can be to improve humankind.</p>
</div>
<div class="footer">
<a href="https://www.facebook.com/notredame/"> FACEBOOK</a>
<a href="https://twitter.com/NotreDame/"> TWITTER </a>
© 2019 University of Notre Dame
Notre Dame, IN 46556 USA 41.703234 -86.238985
Phone: (574) 631-5000
</div>
</body>
</html> `
最佳答案
试试这个
body {
background-image: url("bg.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #78706e;
height: 100%;
min-height: 100%;
font-size: 16pt;
font-family: Times;
min-height: 100%;
color: black;
z-index: 1;
/* position:absolute; */ /* Remove this line */
}
nav ul li:hover ul li {
display: block;
font-size: 14px; /* update 16px to 14px */
white-space: nowrap;
}
关于html - 导航栏未显示所有标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58781453/