我的垂直下拉菜單正在發生什麼？

目前我在垂直菜單上工作，但是我撞到了牆上。首先，菜單看起來完全是我希望它工作的，但不幸的是，它沒有做任何我想要的下拉菜單類型的東西。當我到達產品鏈接時，它就從此消失。我試圖做一個懸停效果，但產品選項卡下方的鏈接不顯示。我的垂直下拉菜單正在發生什麼？

這是我正在工作的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

'。主要-NAV-UL ul'有'顯示：none'，所以你_can not_是UL元素籠罩，但在接下來的規則（'.main-nav-ul ul：hover li'），當列表變得徘徊時，你試圖在列表中格式化一個LI - 這是沒有意義的。第一級LI是你可以懸停的東西 - 所以你需要使它內部的隱形UL可見，當LI得到徘徊時。 – CBroe

你只需要調用李懸停和包裝內的上行它

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

CSS：

<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

像Modar娜說，請讓你的li和ul混合起來。雖然CSS有些不對稱，所以我做了jsfiddle與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

我的垂直下拉菜單正在發生什麼？

回答

相關問題