неисправность раскрывающегося меню навигации - PullRequest
Новая
       39

неисправность раскрывающегося меню навигации

0 голосов
/ 07 мая 2018

обновленный выпуск !! Мне бы хотелось, чтобы моя навигационная панель имела эффект выпадающего меню при наведении на нее курсора. Я попробовал различные предложенные методы, и мой список был спрятан за моим следующим разделом. Поэтому после того, как я много раз менял его неправильно, я запутался. Вот как это сейчас. Теперь выпадающий список застрял на дисплее. Я просто хочу, чтобы список отображался при наведении. Кроме того, окно поиска должно быть в той же строке, что и навигационные ссылки, но теперь оно переместилось ниже. Я могу выяснить, как это исправить, если кто-то может помочь мне с выпадающим меню, пожалуйста. 

.navbar {
			background: linear-gradient(#9E0A0C,#EBEBEB);
			padding: 10px;
			border-top: solid 1px #000000;
			
					}
		
		.navbar a{
			text-decoration: none;
			color: #ffffff;
			font-weight: bold;
			font-size: 1.5vw;
			text-transform: uppercase;
			padding: 3px 5px;
			margin: auto;
			display: inline;
			
			}
		
		.navbar ul {
			
			padding: 0;
			margin-top: 0;
			width: auto;
			
		}
.navbar ul:after {
	content: "";
	display: table;
	clear: both;
}

		.navbar li{
			border-left: solid 2px #000000;
			list-style-type: none;
			display: inline;
			width: 800px;
			padding: 0;
			/*position: relative;*/
			
		}
/*li a {
    display: block;
    color: white;
    text-align: center;
    padding: 5px 94px;
    text-decoration: none;
}*/
		
		.navbar a:active {
            background-color: #000000;
         }
		
		.navbar a:hover {
            background-color: #ddd;
            color: black;
			font-size: 1.5vw;
}
		
		li:first-child {
			border-left: none;
			}
		
	 .dropdown {
			display: none;
		 position: relative;
		 overflow: hidden;
         }
			
	.list {
			display:none;
			/*opacity: 0;
			visibility: hidden;*/
			z-index: 100;
	        min-width: 50px;
			max-width: 350px;
            box-shadow: 0 8px 16px 0 #e7e7e7;
			background: #050243;
			position: absolute;
			left: 0;
			top: 100%;
			/*transition: 0.3s ease-in-out;*/
         }
        		
    .list a {
			color: #000000;
			font-size: 1.25vw;
			text-decoration: none;
			display: block;
			text-align: left;
			background: #dddddd;
			column-count: 2;
			}

   .list a:hover {
			background-color: #EEEEEE;
			font-size: 1.25vw;
	   		}

    .dropdown:hover, .list {
			display: block;
		/*position: absolute;
		left: 0;*/
			}
<nav class="navbar">
		  <ul>
		    <li><a href="../index.html">Home</a></li>
		    <li class="dropdown"><a href="../our_lodge.html" class="dropbtn">Our Lodge</a>
		      <div class="list"> <a href="https://www.elks.org/lodges/lodgenews.cfm?LodgeNumber=151">NEWS</a> <a href="../facilities.html">FACILITIES</a> <a href="../officers.html">OFFICERS</a> <a href="https://www.elks.org/lodges/GuestBook.cfm?LodgeNumber=151">GUEST BOOK</a> </div>
	        </li>
		    <li class="dropdown"><a href="../events.html" class="dropbtn">Events</a>
		      <div class="list"> <a href="../assests/April2018_Calendar.pdf">CALENDAR</a> <a href="../assests/0151_BINGOSCHEDULE-April2018.pdf">BINGO</a> </div>
	        </li>
		    <li class="dropdown"><a href="../contact.html" class="dropbtn">Contact Us</a>
			   <div class="list"> <a href="../who_are_we.html">WHO ARE WE?</a> </div>
		      <div class="list"> <a href="../become_an_elk.html">BECOME AN ELK</a> </div>
	        </li>
		    
	      </ul><form action="search.html">
		      <input class="search" type="text" placeholder="Search.." name="search">
	        </form>
	    </nav>

1 Ответ

0 голосов
/ 07 мая 2018
  1. в вашей css строке .dropdown:hover, .list { должно быть .dropdown:hover .list { без запятой
  2. поместите вашу форму в элемент <li> внутри <ul>. float: right следует назначить форме, а не вводу

HTML: 

    ...
        </li> 
        <li>
          <form class="navbar-search" action="search.html">
            <input class="search" type="text" placeholder="Search.." name="search">
          </form>
        </li>
      </ul> 
    </nav>

CSS: 

.navbar-search {
  float: right;
}

Обновление:

  1. Я не знаю, почему вы хотели бы иметь column-count. это специально?

  2. в последнем <li> элементе два деления -> один перекрывает другой

  3. пожалуйста, сделайте себе одолжение и сократите количество пробелов, а также поместите один элемент html в строку и используйте комментарии (html AND css)! это значительно упрощает отладку, и вы все равно поймете, что сделали вчера.

обновление 2: 

.navbar {
  background: linear-gradient(#9E0A0C, #EBEBEB);
  padding: 10px;
  border-top: solid 1px #000000;
}

.navbar a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 1.5vw;
  text-transform: uppercase;
  padding: 3px 5px;
  margin: auto;
  display: inline;
}

.navbar ul {
  padding: 0;
  margin-top: 0;
  width: auto;
}

.navbar ul:after {
  content: "";
  display: table;
  clear: both;
}

.navbar li {
  border-left: solid 2px #000000;
  list-style-type: none;
  display: inline;
  width: 800px;
  padding: 0;
  /*position: relative;*/
}

/*li a {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 94px;
  text-decoration: none;
}*/
.navbar a:active {
  background-color: #000000;
}

.navbar a:hover {
  background-color: #ddd;
  color: black;
  font-size: 1.5vw;
}

li:first-child {
  border-left: none;
}

.dropdown {
  display: none;
  position: relative;
  overflow: hidden;
}

.list {
  display: none;
  z-index: 100;
  min-width: 50px;
  max-width: 350px;
  box-shadow: 0 8px 16px 0 #e7e7e7;
  background: #050243;
  position: absolute;
  left: 0;
  top: 100%;
}

.list a {
  color: #000000;
  font-size: 1.25vw;
  text-decoration: none;
  display: block;
  text-align: left;
  background: #dddddd;
}

.list a:hover {
  background-color: #EEEEEE;
  font-size: 1.25vw;
}

.dropdown:hover .list {
  display: block;
}

.navbar-search {
  float: right;
}
<nav class="navbar">
  <ul>

    <li><a href="../index.html">Home</a></li>

    <li class="dropdown"><a href="../our_lodge.html" class="dropbtn">Our Lodge</a>
    <div class="list"> 
      <a href="https://www.elks.org/lodges/lodgenews.cfm?LodgeNumber=151">NEWS</a>
      <a href="../facilities.html">FACILITIES</a> 
      <a href="../officers.html">OFFICERS</a> 
      <a href="https://www.elks.org/lodges/GuestBook.cfm?LodgeNumber=151">GUEST BOOK</a> 
    </div>
   </li>

   <li class="dropdown"><a href="../events.html" class="dropbtn">Events</a>
     <div class="list"> 
       <a href="../assests/April2018_Calendar.pdf">CALENDAR</a> 
       <a href="../assests/0151_BINGOSCHEDULE-April2018.pdf">BINGO</a> 
     </div>
   </li>

   <li class="dropdown"><a href="../contact.html" class="dropbtn">Contact Us</a>
     <div class="list"> 
       <a href="../who_are_we.html">WHO ARE WE?</a> 
       <a href="../become_an_elk.html">BECOME AN ELK</a> 
     </div>
   </li>

<li>
  <form class="navbar-search"action="search.html">
    <input class="search" type="text" placeholder="Search.." name="search">
  </form>
</li>
  </ul> 
</nav>
...