Как сделать так, чтобы раскрывающееся меню соответствовало ширине тела с помощью CSS - PullRequest
Новая
       15

Как сделать так, чтобы раскрывающееся меню соответствовало ширине тела с помощью CSS

0 голосов
/ 05 апреля 2019

Я пытаюсь создать выравниваемое по левому краю раскрывающееся меню, которое охватывает всю ширину тела (некоторые из прочитанных мной уроков называют его «мегаменю»).До сих пор мне удавалось заставить его охватывать всю ширину окна (100%), а также начинать с дальнего края окна, но я хочу ограничить его так, чтобы он не выходил за пределы ширины тела,который составляет 1280 пикселей.Любой совет будет высоко ценится.

Ура 

<div class="navbar">
<ul>
  <li class="logo";><a href="http://www.nelsontrails.co.nz">NELSON TRAILS</a></li> 
 <li><a href="https://nelsontrails.co.nz/search-and-filter/">SEARCH AND FILTER</a></li> 
 <li class="dropdown">
  <a href="javascript:void(0)" class="dropbtn">MULTI-DAY</a>
    <div class="dropdown-content">
           <a href="https://nelsontrails.co.nz/mt-arthur/">Mt Arthur</a>
            <a href="https://nelsontrails.co.nz/mt-robert-circuit/">Mt Robert</a>
              <a href="https://nelsontrails.co.nz/rocks-hut/">Rocks Hut</a>
   </div>
  </li>

<li class="dropdown">
  <a href="javascript:void(0)" class="dropbtn">DAY TRIPS</a>
    <div class="dropdown-content">
      <a href="https://nelsontrails.co.nz/ben-nevis/">Ben Nevis</a>
       <a href="https://nelsontrails.co.nz/champion-mine-circuit/">Champion Mine Circuit</a>
            <a href="https://nelsontrails.co.nz/moa-park/">Moa Park</a>
   </div>
  </li>
<li class="dropdown">
  <a href="javascript:void(0)" class="dropbtn">SHORT WALKS</a>
    <div class="dropdown-content">
       <a href="https://nelsontrails.co.nz/centre-of-new-zealand/">Centre of New Zealand</a>
          <a href="https://nelsontrails.co.nz/knuckle-hill/">Knuckle Hill</a>
              <a href="https://nelsontrails.co.nz/takaka-hill-walkway/">Takaka Hill Walkway</a>

   </div>
  </li>

 </ul>
</div>

body {
max-width: 1280px;
margin:auto;
}

.navbar {
  background:#333F4F;
  height:auto;
  padding-right:0px;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #333F4F;
  vertical-align: middle;  
}

li {
  FONT-SIZE:16pX;
  FONT-weight:bold;
  float: right;
}

li.logo {
  FONT-SIZE:30PX;
  FONT-WEIGHT:BOLD;
  float: left;  
}

li a, .dropbtn {
  display: inline-block;
  color: #ffff99;
  text-align: center;
  LINE-HEIGHT:35PX;
  padding: 10px 15px;
  text-decoration: none;
}


li a:hover, .dropdown:hover .dropbtn {
  background-color: #ACB9CA;
  color: #ffff99;
}

 li.logo a:hover {
  background-color: #333F4F;
  color: #ffff99;
} 


li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #ACB9CA;
  min-width: 290px;
  margin:0;
  line-height:0px;
  z-index: 1;
}

.dropdown-content a {
  color: #333f4f;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-top: 1px solid #ACB9CA;
  border-bottom: 1px solid #ACB9CA;
  box-sizing: border-box;
}

.dropdown-content a:hover {
  background-color: #333f4f;
  border: 1px solid #ffff99;
  box-sizing: border-box;
}

.dropdown:hover .dropdown-content {
  display: block;
}
...