私はドロップダウンの李を表示していません

Question

私はhtmlとCSSに新しいです。私はYouTubeのチュートリアルに従います。これはナビゲーションバーに関するもので、htmlやcssでドロップダウンします。

サポートオプションでマウスを動かすと、Ria、Kezia、Geliaという名前が表示されます。あなたはli要素であなたのサブメニューを置いて、CSSでそれを隠し、あなたはそのサブメニューを望むならば、あなたは擬似クラスのスタイルを書くことができますする必要が

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the mouse.*/ 
 
}

<div id="container"> 
 
    <ul> 
 
    <li>Support</li> 
 
    <ul> 
 
     <li>Ria</li> 
 
     <li>Kezia</li> 
 
     <li>Gelia</li> 
 
    </ul> 
 
    <li>CCD</li> 
 
    <li>Scanning</li> 
 
    <li>Claims</li> 
 
    </ul>

Answer 1

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the mouse.*/ 
 
} 
 

 
#container ul li ul { 
 
    display: none; 
 
    z-index: 100; 
 
    position: relative; 
 
} 
 

 
#container ul li:hover ul { 
 
    display: block; 
 
}

<div id="container"> 
 
    <ul> 
 
    <li>Support 
 
     <ul> 
 
     <li>Ria</li> 
 
     <li>Kezia</li> 
 
     <li>Gelia</li> 
 
     </ul> 
 
    </li> 
 
    <li>CCD</li> 
 
    <li>Scanning</li> 
 
    <li>Claims</li> 
 
    </ul> 
 
</div>

Answer 2

ホバリングに現れるようにする

だから、最初に必要なのは、内側のul要素をliのように動かすことです。

 <li>Support 
      <ul> 
       <li>Ria</li> 
       <li>Kezia</li> 
       <li>Gelia</li> 
      </ul> 
     </li> 

さらに適切なスタイルを設定する必要があります。

1. Liが位置しておく必要があります。、これは内側のul要素が正しい位置を取らせている相対を

2. インナーULは、デフォルトの状態で非表示にすると親要素のホバーに登場します。

このスタイルが役立つはずです：

ul > li { 
    position: relative; 
} 

li > ul { 
    display: none; 
    bottom: 0; 
    left: 0; 
} 

li:hover > ul { 
    display: block 
} 

Answer 3

あなたがドロップダウンのために、いくつかのCSSプロパティを追加する必要があります。ここでは、あなたのコードは、

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the 
 
     mouse.*/ 
 
} 
 

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

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 1; 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
}

<div id="container"> 
 
    <ul> 
 
    <li class="dropdown">Support 
 
     <ul class="dropdown-content"> 
 
     <li>Ria</li> 
 
     <li>Kezia</li> 
 
     <li>Gelia</li> 
 
     </ul> 
 
    </li> 
 
    <li>CCD</li> 
 
    <li>Scanning</li> 
 
    <li>Claims</li> 
 
    </ul>

を編集された、ここで私はあなたがそれをこの方法で行うことができ、あなたのスタイルでいくつかのCSSコードを追加して、HTML要素に

.dropdown { 
    position: relative; 
    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); 
     padding: 12px 16px; 
     z-index: 1; 
} 

.dropdown:hover .dropdown-content { 
     display: block; 
} 

Answer 4

をいくつかCLSSを追加しました：

* { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#container ul { 
 
    list-style: none; 
 
    position:absolute; 
 
    /*This will remove the bullet*/ 
 
} 
 

 
#container ul li { 
 
    background-color: #3C4794; 
 
    /*Adds a back-color.*/ 
 
    width: 150px; 
 
    border: 1px solid white; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    text-align: center; 
 
    /*Show the text in the middle*/ 
 
    float: left; 
 
    color: white; 
 
    /*Font color*/ 
 
    font-size: 18px; 
 
} 
 

 
#container ul li:hover { 
 
    background-color: #388222; 
 
    /*Change the color when hovering the mouse.*/ 
 
} 
 
#sub { 
 
    display: none; 
 
} 
 
#container ul li:hover #sub { 
 
    display: block; 
 
}

<div id="container"> 
 
     <ul> 
 
      <li>Support 
 
       <ol id="sub"> 
 
        <li>Ria</li> 
 
        <li>Kezia</li> 
 
        <li>Gelia</li> 
 
       </ol> 
 
      </li> 
 
      <li>CCD</li> 
 
      <li>Scanning</li> 
 
      <li>Claims</li> 
 
     </ul>   
 
    </div>

JSFiddle

Old JSFiddle (with JS)

Answer 5

ボタンをドロップダウンして、このコードを試してCSSスタイルを追加します。

<head> 
<style> 
*{ 
    margin:0px; 
    padding:0px; 
} 
#container ul{ 
    list-style:none; /*This will remove the bullet*/ 
} 

#container ul li{ 
    background-color:#3C4794; /*Adds a back-color.*/ 
    width:150px; 
    border:1px solid white; 
    height:50px; 
    line-height:50px; 
    text-align:center; /*Show the text in the middle*/ 
    float:left; 
    color:white; /*Font color*/ 
    font-size:18px; 
} 

#container ul li:hover { 
    background-color:#388222; /*Change the color when hovering the mouse.*/ 
} 

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

.dropdown-content { 
    display: none; 
    position: absolute; 
    top:50px; 
} 

.dropdown:hover .dropdown-content { 
    display: block; 
} 

</style> 
</head> 
<body> 
    <div id="container"> 
     <ul> 

      <li> 
       <div class="dropdown"> 
        <ul> 
         <li>Support</li> 
        </ul> 

        <div class="dropdown-content"> 
          <ul> 
            <li>Ria</li> 
            <li>Kezia</li> 
            <li>Gelia</li> 
           </ul> 
        </div> 
        </div> 
      </li> 

      <li>CCD</li> 
      <li>Scanning</li> 
      <li>Claims</li> 
     </ul> 
</body>