如何仅使用 CSS 来设计下拉菜单?
网站导航在网站构建过程中起着重要作用，因为它包含下拉列表。一个或多个导航中存在的各种列表的集合称为下拉列表。创建下拉列表需要 select 和 option 元素。option 元素位于 select 元素下方，后者包含各种类型的列表，例如产品、主题、课程等。
在本文中，我们将仅使用 CSS 来设计下拉菜单。
语法
<select> <option value="option_value">option1</option> <option value="option_value">option1</option> </select>
select 元素用于创建下拉列表。此元素通常用于表单中收集用户数据。
option 元素存储用户在下拉列表中可见的列表组。
使用的属性
示例中使用的属性如下:-
position - 定义元素在输出中的定位方式。
overflow - 指定元素中的内容流动方式。
display - 定义元素是作为内联元素还是块级元素处理。
width - 定义列表的宽度。
height - 定义列表的高度。
line-height − 定义行框的高度。
border-radius − 定义元素的圆角。
padding-bottom − 定义元素的底部空间。
color − 定义文本的颜色。
background-color − 定义主体的背景颜色。
background − 定义背景的颜色。
示例
在此示例中，我们将使用内部 CSS 定义下拉列表的所有属性。然后，我们将内联属性设置为主体元素，以便在网页上创建更好的用户交互。要启动下拉列表，我们首先使用 select 元素。在 select 元素内部，option 元素用于收集该主题的所有列表。每个列表的样式将使用内联 CSS 属性，这样看起来更美观。这样，我们就可以只使用 CSS 来设计下拉菜单了。
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown-list {
position: relative;
overflow: visible;
display: block;
width: 19em;
height: 2em;
line-height: 2;
border-radius: 30em;
padding-bottom: 10px;
background: orange;
outline: 0;
appearance: none;
}
</style>
</head>
<body style="background-color:#b2d6c0;">
<center>
<h1 style="color:darkgreen;">Tutorialspoint</h1>
<div class="dropdown-list">
<select>
<option style="background:pink;" value="School Subject ">School Subjects</option>
<option style="background:pink;" value="Math">Math</option>
<option style="background:pink;" value="Science">Science</option>
<option style="background:pink;" value="Social Science">Social Science</option>
<option style="background:pink;" value="English">English</option>
<option style="background:pink;" value="Hindi">Hindi</option>
</select>
</div>
</center>
</body>
</html>
结论
我们使用 HTML 和 CSS 设计了下拉列表。我们了解了如何使用 select 和 option 标签在下拉列表中创建包含五个主题的列表。然后，我们使用了 overflow、display、background 等 CSS 属性来设计下拉列表。下拉列表的设计与用户互动，从而延长用户在网站上的停留时间。
