私の垂直ドロップダウンメニューはどうなっていますか？

現在、私は垂直メニューに取り組んでいますが、壁に当たっています。 1つは、メニューが正しく動作するように見えますが、残念ながらメニュータイプをドロップダウンしていません。私が製品のリンクに着くと、そこから放散されます。私はホバー効果をしようとしましたが、製品タブの下のリンクは表示されません。私の垂直ドロップダウンメニューはどうなっていますか？

私は今すぐ働いているHTMLです。

<html> 
<head> 
    <title>Kenneth's new exercise</title> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="kenny.css"> 
</head> 
<body> 
<nav class="main-nav"> 
    <ul class="main-nav-ul"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Products</a></li> 
      <ul> 
       <li><a href="">1</a></li> 
       <li><a href="">2</a></li> 
       <li><a href="">3</a></li> 
       <li><a href="">4</a></li> 
      </ul> 
     <li><a href="">Services</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Contact Us</a></li> 
    </ul> 
</nav> 
</body> 
</html>

ここにCSSコードがあります。

 html { 
     background:url(wallpaper.jpg) no-repeat center center fixed; 
     background-size:cover; 
    } 
    body { 
     padding:0; 
     margin:0; 
    } 
    a { 
     text-decoration:none; 
    } 
    li { 
     list-style:none; 
    } 
    .main-nav { 
     width:250px; 
     background:rgba(180,205,203,1.00); 
    } 
    .main-nav a { 
     display:block; 
     padding:10px 0px 10px 20px; 
     color:#FFF; 
     text-transform:uppercase; 
     letter-spacing:.2em; 
     border-bottom:1px dotted gray; 
     text-align:left; 
    } 
    .main-nav a:hover { 
     background:rgba(121,165,162,1.0); 

    } 
    .main-nav-ul ul { 
     display:none; 
    } 
    .main-nav-ul ul:hover li { 
     display:block; 
     visibility:visible; 
}

残りのリンクをすべて表示するにはどうすればよいですか？

ありがとうございます。

出典

2017-03-08 Kenneth McAusland

'.main-NAV-UL ul'は'表示があります：あなたはそのUL要素の上にカーソルを置くNOT_ARCHIVEDの_canので、NONE'を、まだ次のルールで（ '.main-nav-ul ul：hover li'）リストをホバリングしたときにそのリスト内のLIをフォーマットしようとしています - 意味がありません。最初のレベルのLIはあなたが上に乗ることができるものなので、LIがぶら下げられたときに、目に見えないULを見えるようにする必要があります。 – CBroe

あなただけのCSS

.main-nav-ul li:hover ul { 
     display:block; 
     visibility:visible;

を李にホバーを呼び出し、その中にULをラップする必要があります。Modar Naはあなたは自分の liと ulが混ざってい、言ったように

<li> 
<a href="">Products</a> 
      <ul> 
       <li><a href="">1</a></li> 
       <li><a href="">2</a></li> 
       <li><a href="">3</a></li> 
       <li><a href="">4</a></li> 
      </ul> 
      </li>

出典

2017-03-08 21:12:07

。 CSSは少し非対称ですが、私はをliとulに変更しましたが、私の意見では少し上手く見えるようにするための少しのコードも入れました。だからあなたはあなたのドロップダウンを持っていて、またスタイリングのビットを持っています。コードはここにありますが、jsfiddleリンクをクリックするだけです。
HTML：

<html> 
<head> 
    <title>Kenneth's new exercise</title> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" type="text/css" href="kenny.css"> 
</head> 
<body> 
<nav class="main-nav"> 
    <ul class="main-nav-ul"> 
     <li><a href="">Home</a></li> 
     <li><a href="">Products</a> 
      <ul> 
       <li class="drop"><a href="">1</a></li> 
       <li class="drop"><a href="">2</a></li> 
       <li class="drop"><a href="">3</a></li> 
       <li class="drop"><a href="">4</a></li> 
      </ul> 
     </li> 
     <li><a href="">Services</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Contact Us</a></li> 
    </ul> 
</nav> 
</body> 
</html>

CSS：

html { 
     background:url(wallpaper.jpg) no-repeat center center fixed; 
     background-size:cover; 
    } 
    body { 
     padding:0; 
     margin:0; 
    } 
    a { 
     text-decoration:none; 
    } 
    li { 
     list-style:none; 
    } 
    .main-nav { 
     width:250px; 
     padding: 0px 40px 0px 0px; 
     background:rgba(180,205,203,1.00); 
    } 
    .main-nav a { 
     display:block; 
     padding:10px 0px 10px 20px; 
     color:#FFF; 
     text-transform:uppercase; 
     letter-spacing:.2em; 
     border-bottom:1px dotted gray; 
     text-align:left; 
    } 
    .main-nav a:hover { 
     background:rgba(121,165,162,1.0); 

    } 
    .main-nav-ul ul { 
     display:none; 
    } 
    .main-nav li:hover ul { 
     display:block; 
     visibility:visible; 
    } 
    .drop { 
     position:relative; 
     left:-20px; 
    } 
    }

出典

2017-03-08 22:45:16

私の垂直ドロップダウンメニューはどうなっていますか？

答えて

関連する問題