CSS如何实现下拉菜单（代码实现详细解释）

下拉菜单是交互式网站最重要的部分之一。 CSS用于设计下拉菜单。下拉列表是无序列表下的一堆列表, 即< ul> , 在HTML世界中广为人知。 < ul> 标记下的嵌套列表(< li> )标记用于创建下拉结构。要显示效果, 请对结构中存在的组件使用CSS。 CSS是非常简单的属性, 用于创建下拉菜单。

< !DOCTYPE html> < html> < head> < title> Dropdown property< /title> < /head> < body> < nav> < ul> < li class = "Lev-1"> < a hrefhttps://www.lsbin.com/= ""> Level-1< /a> < ul> < li> < a hrefhttps://www.lsbin.com/= ""> Link 1< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Link 2< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Link 3< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Link 4< /a> < /li> < /ul> < /li> < /ul> < /nav> < /body> < /html>

输出如下：

文章图片
例子：在HTML结构中添加CSS属性以创建交互式下拉结构。

< !DOCTYPE html> < html> < head> < title> Navigation property< /title> < style> a { color: white; background-color:#990; text-decoration: none; } nav{ background: #333; } nav> ul{ margin: 0 auto; width: 80px; } nav ul li{ display: block; float: left; margin-left:-40px; position: relative; } nav ul a{ display: block; float: left; width: 150px; padding: 10px 20px; } nav ul a:hover{ background: #090; } nav ul li ul li{ float: none; } nav ul li ul{ display: none; position: absolute; background: #333; top: 42px; } nav ul li:hover> ul{ display: block; } nav ul li a{ display: block; } .gfg { font-size:40px; font-weight:bold; color:#009900; Text-align:center; } p { font-size:20px; font-weight:bold; text-align:center; } < /style> < /head> < body> < div class = "gfg"> lsbin< /div> < p> Dropdown Navigation property< /p> < nav> < ul> < li class = "Lev-1"> < a hrefhttps://www.lsbin.com/= ""> Level-1< /a> < ul> < li> < a hrefhttps://www.lsbin.com/= ""> Link 1< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Link 2< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Link 3< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Link 4< /a> < /li> < /ul> < /li> < /ul> < /nav> < /body> < /html>

输出如下：

文章图片
以上编写的代码基于下拉结构产生适当的输出。 HTML代码的重要部分讨论如下：

导航是最外面的容器
nav ul li ul li – float设置为none, 以便当我们将鼠标悬停在它上面时, 它保持不变。
使用相对位置, 以便li相对于其组件移动或更改其位置。
悬停后使用"> "可查看悬停对li的下一个ul的影响。

右对齐的下拉列表：右对齐下拉菜单是浮点值正确的下拉菜单, 用于在右侧屏幕上显示下拉菜单内容。在包含内容的div处添加右浮动。

< !DOCTYPE html> < html> < head> < title> right-aligned dropdown content property< /title> < style> #drop { background-color: teal; color: white; padding: 10px; font-size: 16px; width: : 200px; height: : 60px; border-radius: 5px; font-size: 20px; } #drop-down { position: relative; display: inline-block; } #dropdown-menu { display: none; position: absolute; background-color: #666; width: 160px; margin-left:-45px; border-radius: 5px; z-index: 1; } #dropdown-menu a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .gfg { font-size:40px; font-weight:bold; color:#009900; Text-align:center; } p { font-size:20px; font-weight:bold; text-align:center; } #dropdown-menu a:hover {background-color: #ddd; } #drop-down:hover #dropdown-menu {display: block; } < /style> < /head> < body> < div class = "gfg"> lsbin< /div> < p> Right-aligned Dropdown content property< /p> < div id = "drop-down" style = " float: right; margin-right: 70px; "> < button id = "drop"> DropDown< /button> < div id = "dropdown-menu"> < a hrefhttps://www.lsbin.com/= ""> Item 1< /a> < a hrefhttps://www.lsbin.com/= ""> Item 2< /a> < a hrefhttps://www.lsbin.com/= ""> Item 3< /a> < a hrefhttps://www.lsbin.com/= ""> Item 4< /a> < /div> < /div> < /body> < /html>

输出如下：

文章图片
图片下拉列表：它不是下拉菜单, 但是会放大你悬停的图像。需要基本的CSS和图像才能使其正常工作。
例子：

< !DOCTYPE html> < html> < head> < title> Image Dropdown< /title> < style> .dropmenu { position: relative; display: inline-block; margin-left:150px; } .sub-dropmenu { display: none; position: absolute; } .dropmenu:hover .sub-dropmenu { display: block; } .enlarge { padding: 15px; text-align: center; } .gfg { margin-left:40px; font-size:30px; font-weight:bold; } < /style> < /head> < body> < div class = "gfg"> Image Dropdown property< /div> < div class = "dropmenu"> < img src = "https://media.lsbin.org/wp-content/uploads/temp1.png" width = "150" height = "50" align = "middle"> < div class = "sub-dropmenu"> < img src = "https://media.lsbin.org/wp-content/uploads/temp1.png" width = "600" height = "200"> < /div> < /div> < /body> < /html>

输出如下：

文章图片
点击的下拉菜单：
这需要对JavaScript有基本的了解, 因为它用于运行某些功能以使单击的下拉列表起作用。
例子：

< !DOCTYPE html> < html> < head> < title> clicked dropdown< /title> < style type = "text/css"> button { background: #009900; width: 200px; height: 60px; color: white; border: 1px solid #fff; font-size: 20px; border-radius: 5px; } ul li { list-style: none; } ul li a { display: block; background: #c99; width: 200px; height: 50px; text-decoration: none; text-align: center; padding: 10px; border-radius: 5px; text-align: center; color: white; font-size: 25px; } ul li a { text-decoration: none; } ul li a:hover { background: #009900; } .open {display: none; } .gfg { font-size:40px; font-weight:bold; color:#009900; Text-align:center; } p { font-size:20px; font-weight:bold; text-align:center; } < /style> < script type = "text/javascript"> function open_menu(){ var clicked= document.getElementById('drop-menu'); if(clicked.style.display=='block') { clicked.style.display='none'; } else{ clicked.style.display='block'; } } < /script> < /head> < body> < div class = "gfg"> lsbin< /div> < p> Clicked Dropdown content property< /p> < div id = "dropdown"> < button onclick = "open_menu()"> Click Me!< /button> < div class = "open" id = "drop-menu"> < ul> < li> < a hrefhttps://www.lsbin.com/= ""> Item-1< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Item-2< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Item-3< /a> < /li> < li> < a hrefhttps://www.lsbin.com/= ""> Item-4< /a> < /li> < /ul> < /div> < /div> < /body> < /html>

输出如下：