二级菜单栏目居中显示CSS+HTML实现

最新推荐文章于 2024-08-25 19:34:22 发布

caicsama

最新推荐文章于 2024-08-25 19:34:22 发布

阅读量2.1k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/caicsama/article/details/105868248

版权

CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<style type="text/css">
    body,html{
        padding:0;
        margin:0;
    }
    nav{
        background-color:rgba(153, 255, 255, 1);
        text-align: center;
    }
    ul{
        /*去掉列表前面的圆点*/
        list-style: none;
        /*覆盖浏览器默认样式*/
        margin: 0;
        padding:0;

    }
    /*最外层的ul*/
    .navbar{
        display:inline-block;
    }
    /*列表左浮 设置内边距为5px 为了让 二级菜单不将一级菜单撑大，并且排在一级菜单下面 使用自绝父相的定位方式*/
    .navbar>li{
        /*选取直接子元素 li 隔代的li不算*/
        float:left;
        padding:5px;
         position: relative;
    }
    /*默认情况下 二级菜单隐藏*/
    .navbar li ul{
        display:none;

    }
    /*当鼠标放到一级菜单上的时候 二级菜单显示出来*/
    .navbar li:hover ul{
        display: block;
        position: absolute;
     }
</style>
</head>
<body>
         <nav>
            <ul class="navbar">
                <li>首页</li>
                <li>新闻通知</li>
                <li>实验室概况
                    <ul>
                        <li>实验室简介</li>
                         <li>组织结构</li>
                         <li>组织委员</li>
                    </ul>
                </li>
                <li>联系我们</li>
            </ul> 
        </nav>
</body>
</html>