下拉导航菜单故障

时间：2018-05-07 07:40:41

标签： html menu navigation dropdown

updated issue!! 我希望我的导航栏在悬停在其上时会产生下拉效果。我尝试了建议的不同方法，我的列表隐藏在我的部分后面。所以经过这么多时间错误地改变之后，我现在感到困惑。这就是目前的情况。现在下拉列表停留在显示屏上。我只想在悬停时显示列表。此外，搜索框应与导航链接位于同一行，但现在已移至下方。如果有人可以通过下拉菜单帮我，我可以弄清楚如何解决这个问题。

＆＃13;
＆＃13; 
.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;*/
			}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

  1. 在您的css中，.dropdown:hover, .list {行应该是.dropdown:hover .list {，而不是逗号
  2. 将您的表单放入<li>中的<ul>元素中。 float: right应分配给表单而不是输入

    3. 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>元素中的

    2. 是两个div - ＆gt;一个覆盖另一个

    3. 请你自己帮个忙，减少whitspace的数量，并且每行放一个html元素并使用注释（html和css）！这使得调试变得更加容易，你仍然可以理解你昨天所做的事情。

      4. 更新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>

相关问题
最新问题