树形左侧菜单栏


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
         *{margin: 0px; padding: 0px;}
         .list{
             width: 300px;
             margin: 50px auto;
         }
         .list li{
             list-style: none;
             margin-top: 1px;
         }
        .list li a{
            height: 32px;
            width:100%;
            background-color:lightseagreen;
            display: block;
            font-family: 微软雅黑;
            color: azure;
            line-height: 32px;
            vertical-align: middle;
            text-decoration: none;
            text-indent: 1em;
            font-size: 14px;
        }
         .list li a:hover{
             background-color:darkcyan;
         }
        .list li .con p a{
            background-color: aliceblue;
            width:280px;
            color:black;
            font-size: 12px;
            padding-left: 20px;
        }
         .list li .con p a:hover{
             background-color: aliceblue;
             color: darkcyan;
             padding-left: 17px;
             border-left: 3px solid darkcyan;
         }

    style>
head>
<body>
    <ul class="list">
        <li>
            <a href="#">web前端开发a>
            <div class="con">
                <p><a href="#">HTML+CSSa>p>
                <p><a href="#">Jquerya>p>
                <p><a href="#">Bootstrapa>p>
                <p><a href="#">HTML5+CSS3a>p>
            div>
        li>
        <li>
            <a href="#">视觉设计a>
            <div class="con">
                <p><a href="#">HTML+CSSa>p>
                <p><a href="#">Jquerya>p>
                <p><a href="#">Bootstrapa>p>
                <p><a href="#">HTML5+CSS3a>p>
            div>
        li>
        <li>
            <a href="#">营销培训a>
            <div class="con">
                <p><a href="#">HTML+CSSa>p>
                <p><a href="#">Jquerya>p>
                <p><a href="#">Bootstrapa>p>
                <p><a href="#">HTML5+CSS3a>p>
            div>
        li>
        <li>
            <a href="#">工业设计a>
            <div class="con">
                <p><a href="#">HTML+CSSa>p>
                <p><a href="#">Jquerya>p>
                <p><a href="#">Bootstrapa>p>
                <p><a href="#">HTML5+CSS3a>p>
            div>
        li>
        <li>
            <a href="#">游戏动漫a>
            <div class="con">
                <p><a href="#">HTML+CSSa>p>
                <p><a href="#">Jquerya>p>
                <p><a href="#">Bootstrapa>p>
                <p><a href="#">HTML5+CSS3a>p>
            div>
        li>
    ul>
    <script src="jquery.min.js">script>
    <script>
        $(function(){
            var index=0;
            $('.list li .con').hide();
            $('.list li .con').eq(0).show();
           /* $('.list li').click(function(){
                $(this).find('.con').slideDown().parent().siblings().find('.con').slideUp();
            });*/

            $('.list li a').click(function(){
                $(this).siblings('.con').slideDown().parent().siblings().find('.con').slideUp();
            });
        })
    script>
body>
html>

你可能感兴趣的:(css)