扇形旋转多级菜单效果-html代码-BFW代码库

扇形旋转多级菜单效果

代码语言：html

代码描述：扇形旋转多级菜单效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>css3鼠标悬停扇形打开菜单代码 </title>

    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
    position: relative;
    margin: 0px;
    padding: 0px;
    font-size: 14px;
    color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #F7F8F8;
    background-size: 100% 100%;
        }

        .tips {
            width: 702px;
            margin: 0 auto;
            line-height: 24px;
            padding-top: 10px;
        }

        .bredcolor {
            color: #fff;
        }

        .menuHolder {
            width: 200px;
            height: 200px;
            position: absolute;
            z-index: 100;
            left: 0;
            top: 0;
            border-radius: 0 0 200px 0;
            border: 1px solid #0095da;
            border-top: none;
            border-left: none;
        }

        .menuHolder ul {
            padding: 0;
            margin: 0;
            list-style: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
        }

        .menuHolder ul li {
            border-radius: 0 0 300px 0;
            width: 0;
            height: 0;
        }

        .menuHolder ul li a {
            color: #000;
            text-decoration: none;
            text-align: center;
            box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.4);
            -webkit-transform-origin: 0 0;
            -moz-transform-origin: 0 0;
            -ms-transform-origin: 0 0;
            -o-transform-origin: 0 0;
            transform-origin: 0 0;
        }

        .menuHolder ul.p1 li {
            position: absolute;
            left: 0;
            top: 0;
        }

        .menuHolder ul.p2 {
            z-index: -1;
        }

        .menuHolder ul.p3 {
            z-index: -1;
        }

        .menuHolder li.s1 > a {
            position: absolute;
            display: block;
            width: 200px;
            height: 200px;
            background: #01040c url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAMAAABG8BK2AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAADAUExURQAAAACg6R0rUB0rUB0rUB0rUACg6R0rUB0rUB0rUB0rUB0rUB0rUBdIdR0rUB0rUB0rUB0rUB0rUACg6QCg6QCg6QCg6R0rUACg6QCg6R0rUB0rUB0rUACg6QCg6QCg6QCg6R0rUB0rUACg6QCg6QCg6R0rUB0rUB0rUACg6QCg6R0rUB0rUB0rUB0rUAAiNwCg6R0rUAApQQCDwQA/YACJyQAxTQBahwCO0AB8twBVgACd5AA6WQBuogBDZgBtoVrNu/8AAAAvdFJOUwDidxry5QfcEwYwHWYBqNK3+WGEUJr0r+wRSMhO8a1zOfxTzxolWpMgxsJxkIec1Fe18wAAA1pJREFUWMO9WGl3qjAQBQSRRRBcwH1rq12Zcd/a9///1YsJWrWiSU/em08cSG5m7ixMRlEypWiH75Fv6Ii64UfvoV1UhKUQegZeiOGFBRGMYiMKyDbT0wZ2zlIUK2cPNM8kr4KowauTFZIN/ZI7vvwwdkt9Ah5aPCgNAmJozvWPjkZMNRt3QRyPLHNvnGe55BjPuY0y0FHX7ihtaWTR4NaCEWLp+6Bir1t9VtsAbfW52u19c+uUEEeZhxWaGLweFucrHQJwKu1OJX844DXAZobzHRMNO32ul2OycfW5+VpMkmSy+Np8rsiLuFxPF9gGmk4Gip9+yJdrAPPlIjmTxXIOUCunGjn+VZyCeVSzogKsZ8kVma0B1MqRAvOHXVYTffYyXyWaXAWhQESjKlOo4GPzkucRGkzFhyFsl8kNWW5h+MDsMnB0ES8YMHYfVVjtkpuyW4H6yHgO8Cx+cjq6DCWG6SS5I5MpxAzHRf2UZg9LzCIV1ndRCM4aVGZXlG5k2ZiC5occuqT6DCnPjo6tY9CbqNGHKqy4UAjOCqp0i4bmIe6f0KSOq8B2l3DKbgs0fiwTn1JlfMZvXYVlwi1LUOuMZb+YMmNQZcowTwRkDmWqjoGN1E2UmXoNZiIwM6jVGTsejemgn2PKrBMhWTN1cv1gn0Uhc30+FlNmr05MnV7CkEaQy9w0TwRlzpzlYkT8pCMNvY6Imw7O6tAQRL2o2GhSm2pwVqWmcFWmZ3UMatQqE21CDSW6d2ETD0yygh5zdai8MXd34U8iLJ/QZS5/Izy3WDptxGE2LLFaxNc+0nr1IuruvXzBC61e6CsG0l++CgtxmAWoNADRUHSklbwNE3GKJ9CmeYC6gkjzEiARh0kAaFYiZsHwCdRokhOYDKP4aiDEB6MkUDwmFEtyeEb4cVF8En4ZycAFc5IMGanJJSepmVEo+Bj+LhSSypakIiqrpEv6wUj63cn6+UpqBSQ1JrLaJElN295Z0bGF5EG53kLuQWU0tITlX7bXT+dt+sfvmv2Pf3P1kHQRYteyHP+1LOdnX+8kXBJlXVkzLtDEvljoAi3rOs89XIic/zPqOBm8/EByRAYve25bhzFQaz8Gsgpju3UYA7WERlMF99pQyhUaSl2MyALdvDci+ws4DgfWZ4I43wAAAABJRU5ErkJggg==") no-repeat 44px 44px;
            /*background-size: 46px;*/
            border-radius: 0 0 200px 0;
        }
        .menuHolder:hover .s1 > a{
.........完整代码请登录后点击上方下载按钮下载查看