메뉴의 드롭 다운이 navbar 공간 만 차지하고 호버링이 작동하지 않음

호버에 모달과 유사한 모달 상자가있는 드롭 다운 탐색 메뉴를 만들고 싶습니다.메뉴의 드롭 다운이 navbar 공간 만 차지하고 호버링이 작동하지 않음

예를 들어, Products 표제는 그리드와 같은 부트 스트랩으로 정렬하는 부제목 4 열을 열어야합니다.

나는 결과에 가깝지만 몇 가지 장애물에 직면하고있다. 내 호버가 작동하지 않는 것 같다. 또한 내 부제목은 내 탐색 표시 줄의 경계 내에서만 표시됩니다. 반면에 내비게이션 막대 아래에 약간의 패딩이 표시되도록하고 싶습니다.

나는이 2 예 보았다 그러나 그들은 나에게 도움이되지 않았다 :

stackoverflow reference 1

stackoverflow reference 2

코드를 찾아 올바른 방향으로 나를 인도 해주십시오 :

.topnav { 
 
\t \t background-color: white; 
 
\t \t overflow: hidden; 
 
\t } 
 

 
\t .topnav a { 
 
\t \t float: left; 
 
\t \t display: block; 
 
\t \t text-align: center; 
 
\t \t padding: 14px 16px; 
 
\t \t text-decoration: none; 
 
\t \t font-size: 17px; 
 
\t \t color: grey; 
 
\t } 
 
\t .nav { 
 
\t \t list-style: none; 
 
\t \t display: -webkit-flex; 
 
\t \t -webkit-flex-direction: row; 
 
\t \t -webkit-justify-content: space-between; 
 
\t \t -webkit-flex-wrap: wrap; 
 
\t } 
 
\t .nav li:first-child { 
 
\t \t margin-right: auto; 
 
\t } 
 

 
\t .nav li { 
 
\t \t position: relative; 
 
\t } 
 

 
\t .dropdown { 
 
\t \t position: relative; 
 
\t \t display: inline-block; 
 
\t } 
 

 
\t .dropdown-content { 
 
\t \t position: absolute; 
 
\t \t background-color: #f9f9f9; 
 
\t \t min-width: 560px; 
 
\t \t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
 
\t \t z-index: 20; 
 
\t \t border: 1px solid white; 
 
\t \t padding: 80px; 
 
\t \t height: 220px; 
 
\t } 
 

 
\t .dropdown-content ul { 
 
\t \t display: block; 
 
\t } 
 

 
\t .arrow-up { 
 
\t \t width: 0; 
 
\t \t height: 0; 
 
\t \t border-left: 5px solid transparent; 
 
\t \t border-right: 5px solid transparent; 
 
\t \t border-bottom: 5px solid black; 
 
\t } 
 

 
\t .noshow { 
 
\t \t display: none; 
 
\t } 
 

 
\t .dropdown-content:hover .noshow { 
 
\t \t display: block 
 
\t } 
 

 
\t .subheading { 
 
\t \t font-weight: 700; 
 
\t }

<nav class="topnav"> 
 
\t \t \t \t <ul class="nav"> 
 
\t \t \t \t \t <li><a class="active" href="#title"> Title</a></li> 
 
\t \t \t \t \t <li> 
 

 
\t \t \t \t \t \t <a href="#" class="icon icon-after icon-chevrondown dropdown">Products</a> 
 
\t \t \t \t \t \t <div class="dropdown-content arrow-up noshow"> 
 
\t \t \t \t \t \t \t \t \t \t <ul class="column large-3 each-column"> 
 
\t \t \t \t \t \t \t \t \t \t \t <li class="subheading">subheading</li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">subheading1</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">subheading2</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </li> 
 
         <li> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <a href="#">subheading3</a> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t \t <li><a href="#">link2</a></li> 
 
\t \t \t \t \t <li><a href="#">link3</a></li> 
 
\t \t \t \t \t <li><a href="#account"><img src="http://lorempixel.com/30/30/" width="30" height="30" alt="User Account Icon"></a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav>

출처

2017-12-05 novembersky

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
    .left_menu { 
     float: left; 
     width: 50%; 
    } 

    .right_menu { 
     float: left; 
     width: 50%; 
    } 

    .right_menu ul { 
     float: right; 
    } 

    ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
     background-color: white; 
    } 

    li { 
     float: left; 
    } 

    li a, 
    .dropbtn { 
     display: inline-block; 
     color: grey; 
     text-align: center; 
     padding: 14px 16px; 
     text-decoration: none; 
    } 

    li a:hover, 
    .dropdown:hover .dropbtn { 
     /* background-color: red;*/ 
     /*color: white;*/ 
    } 

    li.dropdown { 
     display: inline-block; 
    } 

    .dropdown-content { 
     display: none; 
     position: absolute; 
     background-color: #f9f9f9; 
     min-width: 160px; 
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
     z-index: 1; 
    } 

    .dropdown-content a { 
     color: black; 
     padding: 12px 16px; 
     text-decoration: none; 
     display: block; 
     text-align: left; 
    } 

    .dropdown-content a:hover { 
     background-color: #f1f1f1; 
    } 

    .dropdown:hover .dropdown-content { 
     display: block; 
    } 
    </style> 
</head> 

<body> 
    <div class="left_menu"> 
     <ul> 
      <li><a href="">Title</a></li> 
     </ul> 
    </div> 
    <div class="right_menu" style="float: left; width: 50%"> 
     <ul> 
      <li class="dropdown"> 
       <a href="javascript:void(0)" class="dropbtn">Product</a> 
       <div class="dropdown-content">

출처

2017-12-05 07:34:04

이 해결책을 확인하십시오 ... –

메뉴의 드롭 다운이 navbar 공간 만 차지하고 호버링이 작동하지 않음

답변

관련 문제