index.html

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>二级菜单</title>
    9.     <link rel="stylesheet" href="./css/reset.css">
    10.     <link rel="stylesheet" href="./css/index.css">
    11. </head>
    13. <body>
    14.     <header class="header">
    15.         <ul class="topnav .clearfix">
    16.             <li><a href="">Lorem.</a></li>
    17.             <li><a href="">Fugit.</a></li>
    18.             <li><a href="">Porro.</a></li>
    19.             <li>
    20.                 <a href="">客户服务</a>
    21.                 <div class="submenu">
    22.                     <ul>
    23.                         <li>Lorem.</li>
    24.                         <li>At?</li>
    25.                         <li>Eligendi.</li>
    26.                         <li>Blanditiis?</li>
    27.                         <li>Minima.</li>
    28.                         <li>Earum.</li>
    29.                         <li>Molestiae!</li>
    30.                         <li>Sapiente!</li>
    31.                         <li>Cum.</li>
    32.                         <li>Aut.</li>
    33.                     </ul>
    34.                 </div>
    35.             </li>
    36.             <li><a href="">Consectetur.</a></li>
    37.         </ul>
    39.     </header>
    41.     <div style="height: 3500px;background: lightblue;">
    42.         Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic error vitae voluptate accusantium quos quae porro exercitationem, quia incidunt ut aut corrupti sint quam numquam fugiat nihil dolores fuga ab possimus facilis odio eum! Quo nobis molestiae
    43.         velit suscipit doloribus impedit repellat, minus similique, voluptas quod, dolor magni non officia numquam voluptatibus accusantium veritatis. Provident esse quis autem excepturi itaque quos eveniet aliquam accusamus nesciunt quia aut dolorum,
    44.         sed laboriosam, deleniti ex quisquam cupiditate saepe? Aperiam, sed? Voluptates ratione debitis iste architecto illo natus dolorum esse earum, voluptate doloribus cumque odit incidunt reprehenderit nesciunt eos laboriosam ea nobis labore explicabo
    45.         vel, illum ullam consequatur facere repellat? Quis autem non, fugiat, cum, ea nemo voluptatum culpa neque veniam rem enim. Labore porro ipsam suscipit hic nesciunt quae eveniet et perferendis debitis exercitationem obcaecati iure aspernatur, incidunt
    46.         beatae harum consectetur eius accusantium. Odio recusandae voluptatem iure odit aspernatur est laudantium quibusdam magni illo. Eos eius architecto enim eligendi sapiente, autem voluptatem inventore porro. Atque perspiciatis praesentium esse amet
    47.         dolorem repellat ex dolore minima optio odio eligendi, sequi quisquam, quidem ratione? Ipsa, minus odio quam distinctio sint nemo, incidunt fugiat labore tempore odit rem dicta at architecto? Dolores vitae quaerat deleniti aliquam magnam ipsam
    48.         quidem officia nam. Vero officiis, corrupti reiciendis suscipit quasi incidunt. Iure ab pariatur atque tenetur ratione maxime, maiores animi neque consequatur est veritatis. Earum modi cupiditate minus quibusdam ullam saepe, ea molestiae praesentium
    49.         alias in repudiandae sit, laboriosam, est atque veritatis iste facilis. Impedit saepe recusandae vel dignissimos distinctio eveniet mollitia tenetur quae sapiente, assumenda accusamus iste in illum deleniti. Suscipit laudantium, sapiente iusto
    50.         et perferendis veniam officia non consectetur nesciunt vitae, facere eveniet ex nulla quis molestiae repudiandae earum aut doloribus illo quos quam reprehenderit, quaerat at! Quaerat eum, fuga et aspernatur nemo explicabo, tempore beatae autem
    51.         quos atque expedita. Quod impedit eum maiores ipsam tenetur sapiente numquam ducimus accusamus enim temporibus, magnam ratione rem iure soluta deserunt, nisi porro illo, quo facilis facere explicabo? Odit libero autem blanditiis reprehenderit
    52.         illo sunt minima similique labore quisquam fugiat error molestiae doloremque aliquam laudantium sit aperiam sequi, aspernatur consequuntur perferendis corrupti soluta expedita natus, eum delectus. Blanditiis tenetur vitae consectetur voluptatem
    53.         sed voluptatibus nihil nemo quos numquam. Fuga beatae perspiciatis accusamus, consequuntur distinctio sequi, nemo ducimus neque qui libero corrupti harum minima eius, ipsa odio reprehenderit suscipit minus ipsum sapiente quas hic ab ipsam quaerat.
    54.         Veniam explicabo facilis rem aliquam, molestiae officia maiores, ex architecto animi reprehenderit optio, tempora neque! Provident eius dolor quaerat harum eos labore aliquid aperiam dolorem, asperiores possimus qui optio, cumque architecto tempora
    55.         laborum quidem totam natus vero, necessitatibus adipisci cum molestiae earum sit! Eveniet nesciunt ipsa corporis a consequuntur quo ad illo! Voluptates soluta fugit repellendus laborum quasi nulla repudiandae dolore sapiente expedita nihil facilis
    56.         labore at cumque, asperiores atque unde aliquam qui, nostrum autem impedit deleniti excepturi ut officiis nam? A repellendus debitis, porro facilis explicabo quia, ipsam et provident, voluptatum numquam voluptas ut nisi vitae accusamus modi? Tempora
    57.         molestias eligendi animi dolorum dignissimos eius iste dolor, et atque magnam ex maiores quisquam, aspernatur eveniet harum quis, reiciendis quaerat quam quos sunt cupiditate. Temporibus nihil, ea est magni perferendis quod sed quaerat enim repellat
    58.         neque, perspiciatis excepturi incidunt pariatur modi veritatis praesentium amet facilis vitae facere nobis et quia! Minima ea dolores inventore placeat sit in ab doloribus exercitationem omnis! Ab cupiditate, iure, consectetur eaque quae laborum
    59.         error ut iste alias doloribus assumenda officiis sit fuga, quo laboriosam at repellat? Voluptas ut laborum quia doloremque obcaecati in soluta? Nesciunt explicabo neque quos tempore molestias eius ad qui impedit a asperiores sint harum ex, id
    60.         eum quisquam aspernatur. Aut eos delectus culpa deserunt quaerat animi nemo doloribus dignissimos ea laudantium mollitia a, illum quis labore tenetur dolorem. Numquam impedit odit quia excepturi magni itaque ea, quasi consequuntur. Vitae eius
    61.         esse possimus, qui ipsam fugit deleniti consequatur perspiciatis quaerat aperiam, placeat aspernatur quos sed maiores expedita. Praesentium repellat obcaecati hic itaque necessitatibus nihil officia qui libero voluptatum illo. Hic possimus praesentium
    62.         unde commodi architecto, molestiae corrupti aliquid doloribus aut. Vel consequuntur, ipsa voluptate deleniti non rem. Blanditiis, mollitia et fuga aliquam obcaecati eum, facere sed molestias rem expedita tempora minima ea quis repudiandae. Molestiae
    63.         ipsa asperiores soluta. Provident nulla maiores consequuntur eaque nihil necessitatibus facere vero perferendis aperiam, distinctio totam voluptatum eum autem? Non cupiditate ad deserunt perferendis earum exercitationem repudiandae dolorem fugit?
    64.         Iusto numquam excepturi voluptatibus delectus, quod voluptatem aperiam. Impedit et debitis, ipsam voluptatibus modi temporibus eligendi nam. Corporis illo asperiores doloremque nulla sequi, temporibus corrupti aut molestias quisquam? Quas facilis
    65.         itaque, cum reprehenderit placeat dolores, enim sit ad, voluptatibus maxime praesentium? Harum quia aliquam voluptas consequuntur, earum impedit voluptate sint dignissimos corrupti explicabo illum ipsam labore officiis ratione quos et. Corporis
    66.         qui eos reiciendis neque. Delectus, doloribus explicabo minima consectetur perferendis nemo repellat cumque praesentium velit quod vel nulla eius ullam at voluptate! Id, aliquid porro, maiores optio enim corrupti ipsa excepturi expedita deserunt
    67.         molestias mollitia ea tempora dolore voluptatibus consequatur ratione voluptas quam, non molestiae? Quos illum quam aspernatur ratione est doloribus eius doloremque. Vitae voluptates, omnis tenetur ipsam saepe sint deserunt distinctio maxime maiores
    68.         illo quam ex laboriosam est consequuntur doloremque obcaecati blanditiis consequatur? Voluptates dicta voluptatum praesentium pariatur esse laborum unde modi, ullam illo amet! Earum magni dolorem impedit recusandae, maiores quibusdam ex cumque,
    69.         sint praesentium doloribus laborum quidem consequuntur sed quia aut? Nulla facere quaerat quidem placeat cumque voluptatum magni ullam tempore fuga qui porro accusantium cupiditate dolor esse aut exercitationem sapiente suscipit itaque blanditiis
    70.         ut molestias rem, laudantium recusandae eius. Quos quidem atque et incidunt neque, aliquid quas distinctio, optio nam magni dolorum libero soluta. Quis maiores culpa dolore reprehenderit quaerat eum ipsa quia voluptates officiis magnam aliquam
    71.         aperiam at, numquam voluptatibus tempora totam amet iusto ea vel adipisci perspiciatis similique in? A nobis consequuntur ea fugiat aspernatur debitis cumque maiores. Veniam porro impedit cum fugit itaque quia, tempora debitis sequi error esse
    72.         iusto labore? Quidem optio odio asperiores quaerat ipsum laboriosam sit non rem mollitia. Voluptatem, facere.
    73.     </div>
    74. </body>
    76. </html>

    index.css

    1. .clearfix::after {
    2.     content: "";
    3.     display: block;
    4.     clear: both;
    5. }
    7. .header {
    8.     background: #e3e4e5;
    9.     color: #999;
    10.     height: 40px;
    11.     line-height: 40px;
    12.     position: fixed;
    13.     width: 100%;
    14.     left: 0;
    15.     top: 0;
    16. }
    18. .header .topnav>li {
    19.     float: left;
    20.     margin: 0 20px;
    21.     width: 150px;
    22.     text-align: center;
    23.     height: 40px;
    24.     box-sizing: border-box;
    25.     position: relative;
    26. }
    28. .header .topnav>li:hover {
    29.     background: #fff;
    30.     border: 2px solid #ccc;
    31.     border-bottom: none;
    32.     line-height: 36px;
    33. }
    35. .header .topnav>li .submenu {
    36.     text-align: left;
    37.     line-height: 1.5;
    38.     width: 300px;
    39.     /*不生成盒子*/
    40.     display: none;
    41.     border: 2px solid #ccc;
    42.     box-sizing: border-box;
    43.     position: absolute;
    44.     right: -2px;
    45.     background: #fff;
    46. }
    48. .header .topnav>li:hover .submenu {
    49.     display: block;
    50.     padding: 10px;
    51. }
    53. .header .topnav>li:hover::after {
    54.     content: "";
    55.     position: absolute;
    56.     width: 100%;
    57.     height: 5px;
    58.     bottom: 0;
    59.     left: 0;
    60.     background: #fff;
    61. }

    效果:
    2021-4-18[CSS-定位练习-二级菜单] - 图1