Home > Article > Web Front-end > Html uses ul li to implement multi-level horizontal menu example code
Html uses ul li to implement multi-level horizontal menu example code
- 高洛峰Original
- 2017-03-26 10:50:413190browse
This article mainly shares with you the relevant information about the example code of using ul li to implement multi-level horizontal menu in Html. It has certain reference value. Interested friends can refer to it
<html>
<head>
<meta charset="utf-8"/>
<title>UL LI 实现多级横向菜单</title>
<style>
#menu1 li{width:50px;height:20px;background:red;margin-left:2px;float:left}
#menu1 li ul{display:none;}
#menu1 li:hover ul{display:block;}
</style>
</head>
<body>
<ul id="menu1">
<li>首页<ul><li>新闻</li><li>图片</li></ul></li>
<li>用户<ul><li>帖子</li><li>相册</li></ul></li>
<li>系统<ul><li>设置</li></ul></li>
</ul>
</body>
</html>The above is the detailed content of Html uses ul li to implement multi-level horizontal menu example code. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn