如何使用我当前的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添加下拉菜单？

回答

相关问题