下拉列表是交互式网站最重要的部分之一。CSS用于设计下拉菜单。下拉列表是无序列表下的一组列表，即HTML世界中众所周知的
null
- 。用于创建下拉结构的
- ）标记。要显示效果，请对结构中的组件使用CSS。CSS是用于创建下拉菜单的非常简单的属性。
<!DOCTYPE html><html><head><title>Dropdown property</title></head><body><nav><ul><liclass="Lev-1"><ahref="">Level-1</a><ul><li><ahref="">Link 1</a></li><li><ahref="">Link 2</a></li><li><ahref="">Link 3</a></li><li><ahref="">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><divclass="gfg">GeeksforGeeks</div><p>Dropdown Navigation property</p><nav><ul><liclass="Lev-1"><ahref="">Level-1</a><ul><li><ahref="">Link 1</a></li><li><ahref="">Link 2</a></li><li><ahref="">Link 3</a></li><li><ahref="">Link 4</a></li></ul></li></ul></nav></body></html>输出：
上面编写的代码基于下拉结构生成正确的输出。下面讨论HTML代码的重要部分：
- nav是最外层的容器
- nav ul li–float被设置为“无”，以便在我们悬停在其上时它保持不变。
- 使用“相对位置”，以便li相对于其组件移动或更改其位置。
- 悬停后使用“>”可以查看悬停对li的下一个ul的影响。
右对齐下拉列表： 右对齐下拉列表是一个下拉列表，浮动值正确显示右屏幕上的下拉内容。将float向右添加到保存内容的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><divclass="gfg">GeeksforGeeks</div><p>Right-aligned Dropdown content property</p><divid="drop-down"style=" float: right; margin-right: 70px;"><buttonid="drop">DropDown</button><divid="dropdown-menu"><ahref="">Item 1</a><ahref="">Item 2</a><ahref="">Item 3</a><ahref="">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><divclass="gfg">Image Dropdown property</div><divclass="dropmenu">width="150"height="50"align="middle"><divclass="sub-dropmenu">width="600"height="200"></div></div></body></html>输出：
单击下拉列表： 这需要对JavaScript有基本的了解，因为它用于运行一些函数，以使单击的下拉菜单正常工作。 例子：
<!DOCTYPE html><html><head><title>clicked dropdown</title><styletype="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><scripttype="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><divclass="gfg">GeeksforGeeks</div><p>Clicked Dropdown content property</p><divid="dropdown"><buttononclick="open_menu()">Click Me!</button><divclass="open"id="drop-menu"><ul><li><ahref="">Item-1</a></li><li><ahref="">Item-2</a></li><li><ahref="">Item-3</a></li><li><ahref="">Item-4</a></li></ul></div></div></body></html>输出：
注： 代码的一些重要亮点：
- 当点击“Click Me”按钮时，javascript函数将展开和折叠菜单。
- 我们使用onclick调用按钮标记中的javascript函数。
- 标记下的嵌套列表（
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库](https://www.yiteyi.com/wp-content/themes/zibll/img/thumbnail.svg)
