如何使用我當前的CSS添加下拉菜單？

我理解使用我當前的HTML製作下拉菜單的基礎知識，但不明白我如何對當前的CSS做同樣的處理。我也很新的HTML和CSS非常感謝謝謝謝謝！這裏是我的HTML編碼：如何使用我當前的CSS添加下拉菜單？

/*The overflow:hidden hides the scroller that appears on page*/ 
 
body { 
 
    overflow: hidden; 
 
} 
 

 
html { 
 
\t background: url('http://pre15.deviantart.net/5686/th/pre/i/2016/338/6/2/living_tree_by_tacosauceninja-daqj4zz.jpg') no-repeat center center fixed; 
 
\t background-size: cover; 
 
} 
 

 
h1 { 
 
\t position: absolute; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
/* The code below is what makes the bar invisible*/ 
 
#navdiv{ 
 
\t opacity: 0.7; 
 
\t filter: (opacity=70); 
 
} 
 

 
#navdiv ul { 
 
\t width:100%; 
 
\t height: 80px; 
 
\t background:#648DA0; 
 
\t line-height:80px; 
 
\t color: white; 
 
\t text-align: center; 
 
} 
 

 
#navdiv ul a{ 
 
\t text-decoration: none; 
 
\t color: white; 
 
} 
 

 

 
/*The padding left and right allows you to choose the spacing between each page on your navigation bar*/ 
 
#navdiv ul li { 
 
\t list-style-type: none; 
 
\t padding-left: 50px; 
 
\t padding-right: 50px; 
 
\t display: inline-block; 
 
\t float: center; 
 
} 
 

 
#navdiv ul li:hover{ 
 
\t background: #8FB0BF; 
 
\t text-align: center; 
 
\t transition:all 0.40s; 
 
\t 
 
} 
 

 
#navdiv h1{ 
 
\t width: 300px; 
 
\t float:center; 
 
\t cursor: pointer; 
 
\t margin-left: 15px; 
 
}

<!DOCTYPE> 
 
<html> 
 
<head> 
 
\t \t \t \t <title>Homepage</title> 
 
\t <link type="text/css" rel="stylesheet" href="stylesheet.css"> 
 
</head> 
 

 
\t <body> 
 
\t 
 
\t \t <div id="Maindiv"> 
 
\t \t \t <div id="navdiv"> 
 
\t \t \t \t \t <h1> Hello World... </h1> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><a href="relax.html" class="btn-default"> Relax </a></li> 
 
\t \t \t \t \t <li><a href="motivation.html" class="btn-default"> Motivation </a></li> 
 
\t \t \t \t \t <li><a href="homepage.html" class="btn-default">HomePage</a></li> 
 
\t \t \t \t \t <li><a href="#">Info</a></li> 
 
\t \t \t \t \t <li><a href="healing.html" class="btn-default"> Healing </a></li> 
 
\t \t \t \t </ul> 
 
\t \t \t \t 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t 
 
\t </body> 
 
</html>

來源

2017-02-26 kevin

所以，你知道要嵌套UL的李做出下拉菜單？

您需要在CSS中執行的操作是將display:none設置爲子菜單，然後在用戶將鼠標懸停在相應的li上時將其更改爲display:block。

我已經添加了一個基本片段作爲一個想法，讓您儘可能簡單。

ul { 
 
    list-style-type: none; 
 
} 
 

 
/* Hide the submenu */ 
 
ul.submenu { 
 
    display: none; 
 
} 
 

 
/* Show the submenu when hovering over the li */ 
 
li.dropdown:hover > ul { 
 
    display: block; 
 
}

<ul> 
 
    <li class="dropdown"><a href="#">Link</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#">Sub Link</a></li> 
 
     <li><a href="#">Sub Link</a></li> 
 
     <li><a href="#">Sub Link</a></li> 
 
    </ul> 
 
    </li> 
 
    <li><a href="#">Link</a></li> 
 
</ul>

有一件事我會在你的HTML，雖然改變的是使用的ID的。只要給所有的課程名稱，然後你就可以有更多的控制。

來源

2017-02-26 10:23:43 James

謝謝！你的回覆有很多幫助。 – kevin

如何使用我當前的CSS添加下拉菜單？

回答

相關問題