Question

这些天我试图为我的网站创建一个带有一些过渡的下拉菜单。我在互联网上看到了一些例子，并试图在我的网站上放一些代码。

<nav>
 <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Nature</a></li>
            <li><a href="#">People &raquo;</a>
                <ul>
                    <li><a href="#">Portraits</a></li>
                    <li><a href="#">Action Shots &raquo;</a>
                        <ul>
                            <li><a href="#">Indoors</a></li>
                            <li><a href="#">Outdoors</a></li>
                            <li><a href="#">Inside</a></li>
                            <li><a href="#">Outside &raquo;</a>
                                <ul>
                                    <li><a href="#">Spring</a></li>
                                    <li><a href="#">Summer</a></li>
                                    <li><a href="#">Autumn</a></li>
                                    <li><a href="#">Winter</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">This is a long named menu item!</a></li>
                    <li><a href="#">Groups</a></li>
                </ul>
            </li>
            <li><a href="#">Outer Space</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Links</a>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li class="active"><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </li>

  </ul>

</nav>

/* MAIN MENU */
nav > ul {
    -webkit-box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
/* MAIN MENU */
nav ul { list-style: none; background: #2C3E50; padding: 0 5px;
background: #c9de96; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M5ZGU5NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzhhYjY2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzOTgyMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #c9de96 0%, #8ab66b 44%, #398235 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9de96), color-stop(44%,#8ab66b), color-stop(100%,#398235)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c9de96 0%,#8ab66b 44%,#398235 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9de96', endColorstr='#398235',GradientType=0 ); /* IE6-8 */
}
nav ul:after { content: '.'; clear: both; visibility: hidden; display: block; height: 0px; }

nav ul li { float: left; position: relative; line-height: 20px; }
nav ul li a { display: block; color: #fff; text-decoration: none; padding: 16px 15px 16px; font-size: 18px; 
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
nav ul li:hover > a { color: #3498DB; }
nav ul li.active > a { color: #2980B9; }


/* SUB MENU */
nav ul li > ul:before {
    content: "";
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #2C3E50 transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: 15px;
    top: 5px;
}

nav ul li > ul { position: absolute; left: 14px; top: 60%; padding-top: 13px; background: none; width: 150px; z-index: -9999; opacity: 0;           -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
nav ul li:hover > ul { display: block; z-index: 100; opacity: 1; top: 95%; }

nav ul li > ul li:first-child { border-radius: 4px 4px 0 0; padding-top: 3px; }
nav ul li > ul li:last-child { border-radius: 0 0 4px 4px; }
nav ul li > ul li { padding: 0 3px 3px; background: #2C3E50; width: 100%; }
nav ul li > ul li a { display: block; padding: 6px 9px; border-radius: 2px; font-size: 14px; }
nav ul li > ul li:hover > a { color: #FFF; background: #3498DB; }
nav ul li > ul li.active > a { color: #FFF; background: #2980B9; }

/* SUB SUB MENU */
nav ul li > ul li > ul:before {
    content: "";
    border-style: solid;
    border-width: 0 9px 9px 9px;
    border-color: transparent transparent #2C3E50 transparent;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 15px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    transform: rotate(270deg);
}

nav ul li > ul li > ul { top: 0; left: 90%; padding: 0; padding-left: 13px; -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    -ms-transition: all 0.25s ease-out;
    -o-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out; 
}
nav ul li > ul li:hover > ul { display: block; opacity: 1; z-index: 100; top: 0; left: 100%; }

现在的问题是这样的：在我的网站上，当我进入“投资组合”链接时，转换不起作用，该框仅在过渡0.25秒后出现（仅横向过渡工作，例如当进入链接投资组合 - ＆gt;“人民”）。在jsfiddle它工作正常。

什么可能导致这个问题？

P.S。我使用Bootstrap，我想也许是因为那个，我试图删除它但没有，错误仍然在那里

CSS3下拉导航栏转换在我的网站上不起作用

0 个答案: