• CSS之布局系列--顶部导航栏二级菜单居中展示

    原文网址：CSS之布局系列--顶部导航栏二级菜单居中展示_IT利刃出鞘的博客-CSDN博客

    简介

    本文介绍CSS将顶部导航栏居中展示并支持二级菜单下拉展示的方法。

    代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>知识星球title>
    6.     <style>
    7.         * {
    8.             margin: 0;
    9.             padding: 0;
    10.         }
    11.  
    12.         .top-container {
    13.             background-color: #406ff9;
    14.             height: 60px;
    15.         }
    16.  
    17.         .menu-container {
    18.             text-align: center;
    19.         }
    20.  
    21.         .logo-container {
    22.             position: absolute;
    23.             color: white;
    24.             line-height: 58px;
    25.             font-weight: bold;
    26.             margin-left: 10px;
    27.         }
    28.  
    29.         .logo {
    30.             font-size: 20px;
    31.             margin-left: 10px;
    32.         }
    33.  
    34.         .first-menu-container {
    35.             display: inline-block;
    36.             list-style: none;
    37.         }
    38.  
    39.         .first-menu {
    40.             line-height: 60px;
    41.             text-align: center;
    42.             float: left;
    43.         }
    44.  
    45.         .second-menu {
    46.             float: none;
    47.             background-color: #406ff9;
    48.         }
    49.  
    50.         .second-menu a:hover {
    51.             color: white;
    52.             background-color: #0033fc;
    53.         }
    54.  
    55.         .second-menu-container {
    56.             position: absolute;
    57.             list-style: none;
    58.             display: none;
    59.         }
    60.  
    61.         .first-menu:hover ul {
    62.             display: block;
    63.         }
    64.  
    65.         a {
    66.             text-decoration: none;
    67.             color: white;
    68.             display: block;
    69.             padding: 0 15px;
    70.             white-space: nowrap;
    71.             font-weight: bold;
    72.         }
    73.  
    74.         a:hover {
    75.             background-color: #0033fc;
    76.         }
    77.  
    78.     style>
    79. head>
    80. <body>
    81. <div class="top-container">
    82.     <span class="logo-container">
    83.         <span class="logo">IT天空span>
    84.     span>
    85.  
    86.     <div class="menu-container">
    87.         <ul class="first-menu-container">
    88.             <li class="first-menu"><a href="#">首页a>li>
    89.             <li class="first-menu"><a href="#">后端a>
    90.                 <ul class="second-menu-container">
    91.                     <li class="second-menu"><a href="#">Java基础a>li>
    92.                     <li class="second-menu"><a href="#">多线程a>li>
    93.                     <li class="second-menu"><a href="#">Springa>li>
    94.                 ul>
    95.             li>
    96.             <li class="first-menu"><a href="#">前端a>
    97.                 <ul class="second-menu-container">
    98.                     <li class="second-menu"><a href="#">HTMLa>li>
    99.                     <li class="second-menu"><a href="#">CSSa>li>
    100.                     <li class="second-menu"><a href="#">JavaScripta>li>
    101.                 ul>
    102.             li>
    103.             <li class="first-menu"><a href="#">运维a>
    104.                 <ul class="second-menu-container">
    105.                     <li class="second-menu"><a href="#">Linuxa>li>
    106.                     <li class="second-menu"><a href="#">Dockera>li>
    107.                 ul>
    108.             li>
    109.             <li class="first-menu"><a href="#">关于本站a>
    110.                 <ul class="second-menu-container">
    111.                     <li class="second-menu"><a href="#">作者介绍a>li>
    112.                     <li class="second-menu"><a href="#">githuba>li>
    113.                 ul>
    114.             li>
    115.         ul>
    116.     div>
    117.  
    118. div>
    119. body>
    120. html>

    测试

  • 相关阅读:
    怎么将考勤的结果用于薪资核算？
    竞赛 深度学习 大数据 股票预测系统 - python lstm
    SpringMVC中的接口传参接参总结
    20. 【Linux教程】emacs 编辑器
    【LeetCode-简单题KMP】232. 用栈实现队列
    iOS_NestedScrollView（嵌套ScrollView）
    如何高效寻找经销商
    02.1、数据操作
    阿里云ECS和轻量服务器有什么区别？
    深入剖析Spring框架：循环依赖的解决机制
  • 原文地址：https://blog.csdn.net/feiying0canglang/article/details/128500399