CSS3 下拉导航

Posted 2023-03-06

【中文标题】CSS3 下拉导航

【英文标题】：CSS3 drop-down navigation

【发布时间】：2012-07-18 19:24:42

【问题描述】：

更准确地说，我正在寻找一个纯 ，它可以滑出（滑入）UL 元素，就像 jQuery 正常工作一样。

我尝试让它在不透明度和可见性下工作，但它似乎无法正常工作：要么变形，要么没有滑出，或者当鼠标放在错误的位置时滑出，等等。 .

这是我目前的 CSS 类：

    #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，因为这就是我创建主题的目的。这是代码 sn-p，我不能发布更多，因为我在任何地方都看不到代码。我想这也必须由热衷于 Wordpress 的人来回答：

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

好像可能是这样的，虽然我自己也不是很懂这行：

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

附：抱歉，缺少有关 HTML 部分的详细信息，我正在尽我所能利用我所拥有的和能够找到的知识。

编辑#2：按照建议，复制打印出来的源。但是，没有“菜单项”或“子菜单”类”，我可以从之前提供的 CSS 类中进行外观更改（颜色、边框、大小等）。

                <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>

【问题讨论】：

你也可以添加你的 HTML 吗？

【参考方案1】：

试试这个 - 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; 

【讨论】：

我们对 Wordpress 创建的 HTML 的解释似乎有问题。似乎子菜单一个接一个地出现（和消失），就像整个子菜单应该出现一样。该网站是本地的，如果需要，我可以录制视频并将其上传到 Youtube。

谢谢，现在可以正常使用了。 :) 我想知道如果没有之前定义的那个类，它怎么能工作......