ドロップダウンメニューが正しく表示されない

私はhtmlとcssでウェブサイトのnavを作ろうとしています。それは非常に簡単です、私が欲しい唯一のものは、ドロップダウンメニューを表示して、ぶら下げられたときに色付けすることです。ドロップダウンメニューが正しく表示されない

は今、私はほとんどが、しかし私はまだ二つの問題を持っている：あなたはサブメニューを置くと要素が

を重ねている

、表示された背景は、二つの「ホバー」が二乗されています。

私は、次の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

ドロップダウンメニューが正しく表示されない

答えて

関連する問題