Wordpress CSS3下拉式导航
更准确地说,我正在寻找一个纯CSS3下拉式导航,它可以滑出(或滑入)UL元素,就像jQuery正常工作一样 我试着让它在不透明度和可见性的情况下工作,但它似乎不能正常工作:要么它变形了,要么它没有滑出,要么它在鼠标放错位置时滑出,等等 以下是我目前的CSS类:Wordpress CSS3下拉式导航,wordpress,css,navigation,wordpress-theming,drop-down-menu,Wordpress,Css,Navigation,Wordpress Theming,Drop Down Menu,更准确地说,我正在寻找一个纯CSS3下拉式导航,它可以滑出(或滑入)UL元素,就像jQuery正常工作一样 我试着让它在不透明度和可见性的情况下工作,但它似乎不能正常工作:要么它变形了,要么它没有滑出,要么它在鼠标放错位置时滑出,等等 以下是我目前的CSS类: #nav li ul { left:-20000px; position:absolute; z-index:1; top:42px; width:140px; opacity:0;
#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很感兴趣的人来回答:
<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>
%3$s
另外,很抱歉没有关于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
<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>
你也可以添加你的HTML吗?我们对Wordpress创建的HTML的解释似乎有问题。子菜单似乎出现(和消失)一个接一个地显示整个子菜单。该网站是本地的,如果需要,我可以录制一个视频并上传到Youtube。谢谢,它现在工作正常。:)我想知道如果没有之前定义的类,它怎么工作。。。
#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; }