HTML5用div实现下拉列表
下拉列表分为无序列表和有序列表
无序列表
<html>
<body>
<h4>一个无序列表:</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdn.net/20181008172244123?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdXJjZV9zYw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
有序列表
<!DOCTYPE html>
<html>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdn.net/20181008180423407?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdXJjZV9zYw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
嵌套列表
<html>
<body>
<h4>一个嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdn.net/20181008180603640?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdXJjZV9zYw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
嵌套列表2
<html>
<body>
<h4>一个嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdn.net/20181008180701417?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdXJjZV9zYw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
定义列表
<html>
<body>
<h2>一个定义列表:</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdn.net/20181008180744287?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvdXJjZV9zYw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)