드롭 다운 메뉴가 제대로 표시되지 않습니다.

html 및 css로 웹 사이트를 탐색하려고합니다. 그것은 매우 간단하며 내가 원하는 유일한 것은 드롭 다운 메뉴를 표시하고 마우스를 가져갈 때 색상을 지정하는 것입니다.드롭 다운 메뉴가 제대로 표시되지 않습니다.

오른쪽 지금은 거의 다, 그러나 나는 아직도이 문제가 발생 해요 : 당신이 하위 메뉴를 가져 가면 요소는

중복되는

표시 배경 는 두 개의 "가져가"이 제곱입니다.

나는 다음과 같은 CSS 있습니다

header { 
    background-color: rgb(147, 147, 147); 
    position: fixed; 
    top: 0; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    height: 8%; 
    width: 100%; 
    border-bottom: 0.3em rgb(44, 171, 185) outset; 
    box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50); 
} 
header nav ul { 
    list-style-type: none; 
    top: 0; 
    margin: 0; 
} 

.active { 
    background-color: rgba(0, 0, 0, 0.35); 

} 

header nav ul li.active:hover { 
    background-color: rgba(48, 67, 91, 0.64); 
} 

header nav ul li { 
    position: relative; 
    display: block; 
} 

header nav ul li a { 
    display: block; 
    line-height: 40px; 
    padding: 8px; 
    margin: 0; 
    top: 0; 
    float: left; 
    text-decoration: none; 
    color: #FFF; 
    font-family: Arial, Helvetica, sans-serif; 
    background-color: inherit; 
} 

header nav ul li:hover:not(.active) { 
    background-color: rgba(48, 67, 91, 0.35); 
} 

header nav ul li.dropdown ul { 
    display: none; 
} 

header nav ul li.dropdown:hover ul { 
    display: block; 
    position: absolute; 

} 

header nav ul li ul li { 
    display: block; 
    float: none; 
    padding: 30px; 
}

을 그리고 내 HTML은 다음과 같다 :

는

<body> 

<header> 
    <nav> 
     <ul> 
      <li class="active"><a href="#">Element1</a></li> 
      <li><a href="element2/index.html">Element2</a></li> 
      <li class="dropdown"><a href="menu/index.html">Menu</a> 
      <ul> 
       <li><a href="#submenu1.html">Submenu1</a></li> 
       <li><a href="#submenu2.html">Submenu2</a></li> 
      </ul> 
     </ul> 
    </nav> 
</header> 

</body>

내가 원하는 것은 공중 선회 요소의 배경을 변경하고 정확하게 표시하는 것입니다 드롭 다운의 하위 요소 https://jsfiddle.net/hdd260s4/

출처

2016-11-29 JPYamamoto

안녕하세요. 귀하의 요구 사항에 따라 변경되었습니다. 이 코드를 사용하십시오. 어떤 질문이라도 알고 계십시오.

<!DOCTYPE html> 
<html> 
<head> 
<style> 
header { 
    background-color: rgb(147, 147, 147); 
    position: fixed; 
    top: 0; 
    margin: 0; 
    padding: 0; 
    left: 0; 
    height: 56px; 
    width: 100%; 
    border-bottom: 0.3em rgb(44, 171, 185) outset; 
    box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50); 
} 
header nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 

} 

header nav li { 
    float: left; 
} 
header nav ul li a { 
    display: block; 
    line-height: 40px; 
    padding: 8px; 
    text-decoration: none; 
    color: #FFF; 
    font-family: Arial, Helvetica, sans-serif; 
    background-color: inherit; 
} 
header nav li a, .dropbtn { 
    display: inline-block; 
    color: white; 
    text-align: center; 

    text-decoration: none; 
} 
.active { 
background-color: rgba(0, 0, 0, 0.35); 
} 
header nav ul li.active:hover { 
    background-color: rgba(48, 67, 91, 0.64); 
} 
header nav li a:hover, .dropdown:hover .dropbtn { 
    background-color: rgba(48, 67, 91, 0.35); 
} 

header nav li.dropdown { 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: rgba(48, 67, 91, 0.35); 
    min-width: 160px; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.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> 
<header> 
<nav> 
<ul> 
    <li class="active"><a href="#home">Element1</a></li> 
    <li><a href="#news">Element2</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropbtn">Menu</a> 
    <div class="dropdown-content"> 
     <a href="#">Submenu1</a> 
     <a href="#">Submenu2</a> 
     <a href="#">Submenu3</a> 
    </div> 
    </li> 
</ul> 

</header> 
</nav> 

</body> 
</html>

여기에 내 코드를 업로드하려면이 데모를 참조하십시오. https://jsfiddle.net/hansraj/bmbuLcfk/

출처

2016-11-30 06:22:54

그냥 완벽, 감사합니다 – JPYamamoto

즐거움은 내 :) –

이 시도하고 당신에 따라 변경하십시오 : 나는 충분히 명확했다 희망

, 당신은

당신은 여기에 코드를 볼 수 있습니다 감사합니다.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Show Hide Dropdown Using CSS</title> 
<style type="text/css"> 
    ul{ 
     padding: 0; 
     list-style: none; 
     background: #f2f2f2; 
    } 
    ul li{ 
     display: inline-block; 
     position: relative; 
     line-height: 21px; 
     text-align: left; 
    } 
    ul li a{ 
     display: block; 
     padding: 8px 25px; 
     color: #333; 
     text-decoration: none; 
    } 
    ul li a:hover{ 
     color: #fff; 
     background: #939393; 
    } 
    ul li ul.dropdown{ 
     min-width: 100%; /* Set width of the dropdown */ 
     background: #f2f2f2; 
     display: none; 
     position: absolute; 
     z-index: 999; 
     left: 0; 
    } 
    ul li:hover ul.dropdown{ 
     display: block; /* Display the dropdown */ 
    } 
    ul li ul.dropdown li{ 
     display: block; 
    } 
</style> 
</head> 
<body> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li> 
      <a href="#">Products &#9662;</a> 
      <ul class="dropdown"> 
       <li><a href="#">Laptops</a></li> 
       <li><a href="#">Monitors</a></li> 
       <li><a href="#">Printers</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
</body> 
</html>

여기에 내 코드를 업로드하려면이 데모를 참조하십시오. https://jsfiddle.net/hansraj/z2sojhbm/

출처

2016-11-29 07:09:39

답장을 보내 주셔서 감사합니다. 이미 코드에 기반한 몇 가지 변경을했지만, 아직 거기에는 없지만 더 가깝습니다. 당신이 그것을 한 번 보여주고 내가 그 문제를 찾도록 도와 주시겠습니까? 모두 작동하지만 드롭 다운 항목에 마우스를 놓으면 색상이 누락되며 메뉴 아래에 하위 메뉴가 표시됩니다. 이것은 내 링크입니다 : https://jsfiddle.net/wu6ghhrn/ – JPYamamoto

드롭 다운 메뉴가 제대로 표시되지 않습니다.

답변

관련 문제