Панель навигации не показывает весь заголовок - PullRequest
Новая
       37

Панель навигации не показывает весь заголовок

0 голосов
/ 09 ноября 2019

У меня проблема с моей HTML-страницей. проблема в том, что в выпадающем списке я вижу только первое слово заголовка. Кроме того, панель навигации находится не в середине страницы, хотя я пробовал разные стили, но до сих пор не могу получить ее в середине. Вот мой код css llllllllllllllllllllllllllllllllllllllllllll 


  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>
&copy 2019 University of Notre Dame
Notre Dame, IN 46556 USA 41.703234 -86.238985
Phone: (574) 631-5000

</div>
</body>
</html>    `

1 Ответ

0 голосов
/ 09 ноября 2019

Попробуйте это 

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;
}
...