HTML/CSS 二级菜单

HTML/CSS 二级菜单


代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        a {
      
            text-decoration: none;
            color: #000;;
            font-size: 14px;
            
            }
        a:hover {
      
            color: rgb(253, 141, 114);
        }
        li , ul{
      
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        ul.container li {
      
            width: 187px;
            height: 30px;
            line-height: 30px;
            padding-left: 5px;
            border-bottom: 1px dashed rgb(204, 204, 204);
        }
        .container {
      
            position: relative;
            width: 192px;
            border: 1px solid rgb(204, 204, 204);
            background-color: rgb(2550, 250, 250);
            margin: 50px auto;
        }

        .sub-container {
      
            position: absolute;
            top: -1px;
            left: 192px;
            display: none;
            width: 300px;
            border: 1px solid blue;
        }

        .container li:hover .sub-container {
      
            display: block;
            height: 100%;
        }
    style>
head>
<body>
    <ul class="container">
        <li>
            <a href="#">家用电器a>
            <div class="sub-container">111div>
        li>
    
        <li>
            <a href="#">手机 / 运营商 / 数码a>
            <div class="sub-container">222div>    
        li>

        <li>
            <a href="#">电脑 / 办公a>
            <div class="sub-container">333div>    
        li>

        <li>
            <a href="#">家居 / 家具 / 家装 / 厨具a>
            <div class="sub-container">444div>    
        li>

        <li>
            <a href="#">男装 / 女装 / 童装 / 内衣a>
            <div class="sub-container">555div>    
        li>

        <li>
            <a href="#">美妆 / 个护清洁 / 宠物a>
            <div class="sub-container">666div>    
        li>

        <li>
            <a href="#">女装 / 箱包 / 钟表 / 珠宝a>
            <div class="sub-container">777div>    
        li>

        <li>
            <a href="#">男鞋 / 运动 / 户外a>
            <div class="sub-container">888div>    
        li>

        <li>
            <a href="#">房产 / 汽车 / 汽车用品a>
            <div class="sub-container">999div>    
        li>

        <li>
            <a href="#">母婴 / 玩具乐器a>
            <div class="sub-container">aaadiv>    
        li>

        <li>
            <a href="#">食品 / 酒类 / 生鲜 / 特产a>
            <div class="sub-container">bbbdiv>    
        li>

        <li>
            <a href="#">艺术 / 礼品鲜花 / 农资绿植a>
            <div class="sub-container">cccdiv>    
        li>

        <li>
            <a href="#">医药保健 / 计生情趣a>
            <div class="sub-container">ddddiv>    
        li>

        <li>
            <a href="#">图书 / 文娱 / 教育 / 电子书a>
            <div class="sub-container">eeediv>    
        li>

        <li>
            <a href="#">机票 / 酒店 / 旅游 / 生活a>
            <div class="sub-container">fffdiv>    
        li>

        <li>
            <a href="#">理财 / 众筹 / 白条 / 保险a>
            <div class="sub-container">gggdiv>    
        li>

        <li>
            <a href="#">安装 / 维修 / 清洗 / 二手a>
            <div class="sub-container">hhhdiv>    
        li>

        <li>
            <a href="#">工业品a>
            <div class="sub-container">iiidiv>    
        li>
    ul>
body>
html>

显示:
HTML/CSS 二级菜单_第1张图片

你可能感兴趣的:(代码,html,css,css3,html5)