CSS3下拉导航 [英] CSS3 drop-down navigation

问题描述

更准确地说，我正在寻找一种纯CSS3下拉导航，该导航可以像jQuery一样正常工作，可以滑入(滑入)UL元素.

To be more precise, I'm looking for a pure-CSS3 drop-down navigation that would slide out (and in) the UL elements, like a jQuery would normally work.

我已经尝试过使其具有不透明性和可见性，但是它似乎无法正常工作:它变形或滑出，或者当鼠标放置在错误的位置时滑出，等等.

I've tried making it work with opacity and visibility, but it does not seem to work properly: either it's distorted or it doesn't slide out, or it slides out when the mouse is in the wrong place, etc..

这是我目前的CSS类:

Here are my CSS classes at the moment:

    #nav li ul {
    left:-20000px;
    position:absolute;
    z-index:1;
    top:42px;
    width:140px;
    opacity:0;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
#nav li ul:hover {
    opacity:1;
}
#nav li ul li {
    float:none;
    background-color:#fff;
    padding:9px 0 0 10px;

    height:0;
    overflow:hidden;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
#nav li ul li:hover {
    height:40px;
    overflow:visible;
}
#nav li ul li a {
    font-size:12px;
}

#nav li:hover ul {
    left:0;
}

HTML来自Wordpress，这就是我要为其创建主题的原因.这是代码段，我无法发布更多内容，因为我在任何地方都看不到代码.我想这也必须由热衷于Wordpress的人回答:

The HTML is from Wordpress, as that's what I'm creating a theme for. Here is the code snippet, I cannot post more, as I don't see the code anywhere. I guess this has to be answered by someone keen on Wordpress as well:

<div id="nav-wrapper">
<ul id="nav">
<?php wp_nav_menu( array( 'container' => false, 'theme_location' => 'primary-menu' ) ); ?>
</ul>

虽然我自己不太了解这行，但似乎可能是这样的:

It seems that it might be something like this, though I don't really understand this line myself:

<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>

P.S.很抱歉，由于缺少有关HTML部分的详细信息，我将尽我所能并能找到的最大努力.

P.S. Sorry for the lack of detail about the HTML part, I'm doing the best I can with the knowledge I have and am able to find.

编辑#2:根据建议，复制打印的源.但是，既没有菜单项"也没有子菜单"类，并且我能够从之前提供的CSS类中进行外观上的更改(颜色，边框，大小等).

EDIT #2: as suggested, copying the printed out source. However, there are no "menu-item" nor "sub-menu" classes," and I'm able to make cosmetic changes (color, borders, sizes, etc.) from the CSS classes that were provided earlier.

                <ul id="nav">
<li id="menu-item-1565" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1565"><a href="http://localhost/" rel="nofollow" title="" target="_blank">Home</a>
<ul class="sub-menu">
<li id="menu-item-1456" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1456"><a href="http://localhost/category/news/games-news/">Games</a></li>
<li id="menu-item-2324" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2324"><a href="http://localhost/category/news/internet-news/">Internet</a></li>
<li id="menu-item-1876" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1876"><a href="http://localhost/category/news/hardware-news/">Hardware</a></li>
<li id="menu-item-1786" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1786"><a href="http://localhost/category/news/software-news/">Software</a></li>
</ul>
</li>
<li id="menu-item-1432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1432"><a href="http://localhost/test1/">TEST #1</a></li>
<li id="menu-item-1653" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1653"><a href="http://localhost/test2/">TEST #2</a></li>
            </ul>

推荐答案

尝试一下- http://jsfiddle.net/2mCZM/

HTML

<ul id="nav">
    <li><a href="#">Item 1</a>
        <ul class="sub1">
            <li><a href="#">Item 1.1</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul class="sub2">
            <li><a href="#">Item 2.1</a></li>
            <li><a href="#">Item 2.2</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a>
        <ul class="sub3">
            <li><a href="#">Item 3.1</a></li>
            <li><a href="#">Item 3.2</a></li>
            <li><a href="#">Item 3.3</a></li>
        </ul>
    </li>
</ul>

CSS

#nav li {
    display: inline-block;
    width: 140px;
    background: beige;
    border-bottom: 1px solid orange;
    position: relative;
    height: 42px;
    line-height: 42px;
}

#nav li ul {
    position:absolute;
    left: 0;
    top:43px;
    width:140px;
    height: 0;
    overflow:hidden;

    -webkit-transition: height .25s linear;
       -moz-transition: height .25s linear;
         -o-transition: height .25s linear;
        -ms-transition: height .25s linear;
            transition: height .25s linear;
}

#nav li:hover ul.sub1 { height: 42px; }
#nav li:hover ul.sub2 { height: 84px; }
#nav li:hover ul.sub3 { height: 126px; }

这篇关于CSS3下拉导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！