CS菜单常用布局及三角形

  <style>
        /* 初始化样式 */

        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style-type: none;
        }

        input,
        button {
            outline: none;
        }

        .l {
            float: left;
        }

        .r {
            float: right;
        }

        .c:after {
            clear: both;
             0;
            padding: 0;
            content: "";
            display: block;
            visibility: hidden;
        }

        html,
        body {
            background: #ebf9f9;
            font-size: 14px;
        }
        /* 添加样式 */

        .triangle1 {/*制作三角形*/
display: inline-block;
             0;
            height: 0;
            border: 30px solid transparent;
            border-top-color: red;
        }

        .triangle2 {
            display: inline-block;
             0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-top: 30px solid green;
        }

        #header {
            margin: 20px 0px 200px 200px;
            background: orange;
        }

        #header>.list {
            padding-top: 10px;
        }

        #header>.list>ul>li {
            float: left;
            padding: 6px 0px;
            border: 1px solid transparent;
            position: relative;
        }

        #header>.list>ul>li>a {
            font-size: 20px;
            color: black;
            padding: 0px 20px;
            border-right: 1px solid blue;
            position: relative;
            z-index: 11;/*必须大于下一个兄弟div标签的z-index*/
         
        }

        #header>.list>ul>li .triangle {
            position: absolute;
            z-index: 12;
            /*必须大于上一个兄弟a标签的z-index*/
            right: 5px;
            top: 11px;
            display: inline-block;
             0;
            height: 0;
            border: 8px solid transparent;
            border-top-color: #000;
            transition:100ms transform;
            
        }
        #header>.list>ul>li:hover .triangle{
            transform:rotate(180deg);
            transform-origin: 50% 30%;/*重点*/
        }


        #header>.list>ul>li:hover {
            background: #fff;
            border: 1px solid #f00;
        }

        #header>.list>ul>li:hover>a {

            padding-bottom: 10px;
            background: #fff;
            border-right: 1px solid transparent;
            /*消除右边蓝色的竖线*/
        }


        #header>.list>ul>li .hint {
            border: 1px solid #09f;
            background: #fff;

            position: absolute;
            z-index: 10;
            right: -1px;
            /*border的1px*/
            top: 39px;
            display: none;
        }

        #header>.list>ul>li:hover .hint {
            display: block;
        }

        #header>.list>ul>li .hint1 {
             270px;
            border: 1px solid #f00;
            padding: 20px 10px;
        }

        #header>.list>ul>li .hint2 {
            padding: 10px;
            display: none;
        }

        #header>.list>ul>li .hint2 img {
            float: left;
            padding: 10px;
        }

        #header>.list>ul>li .hint2 ul li {
             260px;
            background: #aaa;
            border: 1px solid #000;
        }

        #header>.list>ul>li .hint2 ul li:nth-of-type(2) {
            margin: 10px 0px;
        }

        #header>.list>ul>li .hint2 .r {
             150px;
        }

        #header>.list>ul>li .hint3 {
            padding: 20px;
        }

        #header>.list>ul>li .hint3 p {
             140px;
            text-align: left;
            padding: 10px 0px;
            border-bottom: 1px solid black;
        }

        #header>.list>ul>li .hint4 {
            padding: 20px;
             200px;
        }

        #header>.list>ul>li .hint4 ul li:last-of-type {
             100%;
        }

        #header>.list>ul>li .hint4 ul li {
            float: left;
            padding: 10px 0px;
            text-align: center;
             50%;
            border-bottom: 1px solid grey;
        }

        #header>.list>ul>li .hint5 {
            padding: 20px;
             250px;
        }

        #header>.list>ul>li .hint5 ul li {
            float: left;
            padding: 10px 0px;
            text-align: left;
             50%;
            border-bottom: 1px solid grey;
        }

        #header>.list>ul>li .hint5 ul li:nth-of-type(5) {
             100%;
            text-align: center;
        }

        #header>.list>ul>li .hint5 ul li:nth-of-type(5)+li {
            font-size: 13px;
        }

        #header>.list>ul>li .hint5 ul li:nth-of-type(5)~li {
             100%;
        }
    </style>
</head>

<body>
    <div id="header">

        <div class="list">
            <ul class="c">
                <li><a href="">首页</a></li>
                <li><a href="">搜书</a>
                    <span class="triangle"></span>
                    <div class="hint hint1">
                        <input type="text" placeholder="书名或者作者">
                        <button>搜索</button>
                    </div>
                </li>
                <li><a href="">今日热文</a>
                    <span class="triangle"></span>

                    <div class="hint hint2">
                        <ul>
                            <li class="c">
                                <div class="l">
                                    <a href="">
                                <img src="http://images.xxsy.net/simg/874494.jpg">
                                </a>
                                </div>

                                <div class="r">
                                    <h4>嘻嘻嘻嘻</h4>
                                    <P>发发发发发发发发反反复反复反复反复反复发发发发发发发发反反复反复反复反复反复反反复复反反复反复反复反复反复发发发发发发发发反反复反复反复反复反复反反复复</P>
                                </div>

                            </li>
                            <li class="c">
                                <div class="l">
                                    <a href="">
                                <img src="http://images.xxsy.net/simg/874494.jpg">
                                </a>
                                </div>

                                <div class="r">
                                    <h4>嘻嘻嘻嘻</h4>
                                    <P>发发发发发发发发反反复反复反复反复反复发发发发发发发发反反复反复反复反复反复反反复复反反复反复反复反复反复发发发发发发发发反反复反复反复反复反复反反复复</P>
                                </div>

                            </li>
                            <li class="c">
                                <div class="l">
                                    <a href="">
                                <img src="http://images.xxsy.net/simg/874494.jpg">
                                </a>
                                </div>

                                <div class="r">
                                    <h4>嘻嘻嘻嘻</h4>
                                    <P>发发发发发发发发反反复反复反复反复反复发发发发发发发发反反复反复反复反复反复反反复复反反复反复反复反复反复发发发发发发发发反反复反复反复反复反复反反复复</P>
                                </div>

                            </li>

                        </ul>
                    </div>
                </li>
                <li><a href="">VIP充值</a></li>
                <li><a href="">作者登录</a>
                    <span class="triangle"></span>

                    <div class="hint hint3">
                        <p><a href="">作者登录</a></p>
                        <p><a href="">作者登录</a></p>
                        <p><a href="">作者登录</a></p>
                    </div>
                </li>
                <li><a href="">会员中心</a>
                    <span class="triangle"></span>

                    <div class="hint hint4">
                        <ul>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">个人资料</a></li>
                            <li><a href="">如何u成为VIP会员</a></li>
                        </ul>

                    </div>
                </li>
                <li><a href="">联系客服</a>
                    <span class="triangle"></span>

                    <div class="hint hint5">
                        <ul>
                            <li><a href="">VIP会员</a></li>
                            <li><a href="">VIP会员</a></li>
                            <li><a href="">VIP会员</a></li>
                            <li><a href="">VIP会员</a></li>
                            <li><a href="">会员服务</a></li>
                            <li><a href="">QQ;644478842,电话:15736838682</a></li>
                            <li><a href="">会员服务</a></li>
                            <li><a href="">会员服务</a></li>
                            <li><a href="">会员服务</a></li>
                            <li><a href="">会员服务</a></li>
                            <li><a href="">会员服务</a></li>

                        </ul>

                    </div>

                </li>
            </ul>
        </div>
    </div>
    <div class="c">
        <span class="triangle1 l"></span>
        <span class="triangle2 l"></span></div>
</body>

</html>