HTML如何实现 导航的二级菜单

HTML如何实现 导航的二级菜单

<html>

<head>
    <title>HTML如何实现 二级菜单 </title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"  >
<style type="text/css">
    *{margin:0;padding:0;}
    a{text-decoration:none;}
    a:hover{background-color:#fff;}
    
    header{background:#ee6;
        height:80px;
        position:fixed;
        top:0;
        width:100%;
        margin-bottom:15px;
    }
    
    footer{background-color:rgba(0,0,0,0.5);
    text-align:center;
    width:100%;
    color:#fff;
    position:fixed;
    bottom :0%;
    }
    
    .circle{
        display:inline-block;
        width:100px;
        height:100px;
        border-radius:100%;
        background-color:rgba(155,121,200,0.6);
        position:fixed:
        top:80px;
        right:0;
        z-index:1;
    
    }
    
    nav{
        margin-top:130;
        padding:30px;
    }
    
    .dropdown{
        position:relative;
        display:inline-block;
    }
    
    .dropdown-content a{
        border-bottom:1px solid yellow;
        display:block;
        color:#eee;
        background-color:#666;
        padding:8px;
    }
    
    .dropdown-content {
        display:none;
        width:100%;
        box-shadow:0 8px 16px 0 ragb(0,0,0,0.5);
    }
    
    .dropdown:hover  .dropdown-content{
        display:block;
    }
    
    button{
        padding:16px  32px;
        background-color:#4a4;
        color:fff;
        border:0;
    
    }
    
    form{
        display:block;
        margin:30px 0;
    }
    
    input:active{
        background-color:#ee9;
    }
    input{
        width:70%;
        padding:1em;
        
    }

    input:hover{
        background-color:yellow;
    }
    input[type=submit],input[type=reset]{
        width:100px;
        height:50px;
        background-color:#4a4;
    }
</style>
</head>
<body>
    <header>
        <h1>LJHeee's  Blog ----</h1>
    </header>
        
<nav>
    <!--整体-->
    <div class="dropdown">
        <button type="button" name="button" > Home </button>    
        <!--子元素-->
        <div class="dropdown-content">
        <a href="my.csdn.net/ljheee" target="_blank">Item1 </a>
        <a href="#">Item2 </a>
        <a href="#">Item3</a>
        <a href="#">Item4 </a>
        </div>
        
        <br />
        <form>
            </div >    
                <label>XXXX</label>
                <input type="text" name="XX" />
            <div>
            </div >    
                <label>XXXX</label>
                <input type="text" name="XX" />
            <div>
            </div >    
                <label>XXXX</label>
                <input type="text" name="XX" />
            <div>
        
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </form>
    </div>
</nav>
  
    <footer>
    Copyright (c)2016
    </footer>

</body>

</html>

你可能感兴趣的:(html)