导航栏例子

最新推荐文章于 2023-06-18 13:06:08 发布

rrdawlx

最新推荐文章于 2023-06-18 13:06:08 发布

阅读量557

点赞数

分类专栏： Web前端文章标签： html 导航栏 ul li

本文链接：https://blog.csdn.net/wlx1991/article/details/42556939

版权

Web前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>

<style>
* {margin:0; padding:0; border:0;}
.out {margin:auto; width:400px; height:auto; border:solid 1px black; list-style:none; background:#3C0; margin-top:50px;}
.out > li {float:left; width:100px; height:18px; position:relative;}
.out:after {display:block; content:""; height:0; clear:both;}
.in {width:100px; height:auto; list-style:none; background-color:#60C; border:solid 1px black; position:absolute; left:-1px; top:100%; display:none;}
.out > li:hover .in {display:block;}
div {width:400px; margin:auto;}
</style>
</head>

<body>
<ul class="out">
  <li>item1
    <ul class="in">
      <li>item1.2</li>
      <li>item1.2</li>
      <li>item1.2</li>
    </ul>
  </li>
  <li>item2
    <ul class="in">
      <li>item2.2</li>
      <li>item2.2</li>
      <li>item2.2</li>
    </ul>
  </li>
  <li>item3
    <ul class="in">
      <li>item3.2</li>
      <li>item3.2</li>
      <li>item3.2</li>
    </ul>
  </li>
  <li>item4
    <ul class="in">
      <li>item4.2</li>
      <li>item4.2</li>
      <li>item4.2</li>
    </ul>
  </li>
</ul>
</body>
</html>

实际显示效果如下图

rrdawlx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航栏例子

导航栏* {margin:0; padding:0; border:0;}.out {margin:auto; width:400px; height:auto; border:solid 1px black; list-style:none; background:#3C0; margin-top:50px;}.out > li {float:left; width:100px; he
复制链接

扫一扫

专栏目录