[英]Why isn't my Wordpress menu working correctly?
I'm actually following along with a Lynda.com video about building a Wordpress website from scratch using Underscores. 实际上,我正在跟Lynda.com视频一起,介绍使用Underscores从头开始构建Wordpress网站的视频。
We're designing the drop-down menu in the style.css. 我们正在设计style.css中的下拉菜单。
The default code looked like this and worked fine: 默认代码如下所示,并且运行良好:
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}
but, since we needed to change the look, he instructs us to change it to this code, instead: 但是,由于我们需要更改外观,因此他指示我们将其更改为以下代码,而不是:
.main-navigation ul ul {
position: absolute;
left: 0;
z-index: 99999;
display: none;
float: left;
padding: 0;
background: #4d4d4d;
background: hsl(0, 0%, 30%);
}
Suddenly, the drop-downs are non-responsive. 突然,下拉列表没有响应。
I think I pinpointed the problem to the "display: none;" 我认为我已将问题定位为“显示:无;” but taking that out just causes a mess.
但将其取出只会造成混乱。 I tried just adding the background color like this:
我尝试只添加背景颜色,如下所示:
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}
but it ends up looking like this: 但最终看起来像这样:
Obviously, I want this drop down below the links, not in front. 显然,我希望将其下拉到链接下方而不是前面。 Can anyone tell me how to fix this issue?
谁能告诉我如何解决此问题?
EDIT: I appreciate the people who tried answering so far but neither of the answers were correct. 编辑:我感谢到目前为止尝试回答的人,但是没有一个答案是正确的。 Thanks to David, I put my code into jsfiddle.net: http://jsfiddle.net/DMDesigns/5g9kbf9s/2/
感谢David,我把我的代码到jsfiddle.net: http://jsfiddle.net/DMDesigns/5g9kbf9s/2/
Please let me know if one of you can figure it out, using this! 请让我知道是否有人可以使用此功能解决问题! Thank you!
谢谢!
with left: -999em;
left: -999em;
and display: none;
并
display: none;
contents are disappearing 内容正在消失
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
float: left;
position: fixed;
top: 1.5em;
left: 1.5em;
z-index: 99999;
}
Use the left position's value used in the original code: 使用原始代码中使用的左侧位置的值:
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: 0;
z-index: 99999;
}
and not: 并不是:
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
background: #4d4d4d;
background: hsl(0, 0%, 30%);
float: left;
position: absolute;
top: 1.5em;
left: -999em;
z-index: 99999;
}
I'm still not sure why his code was breaking the site but I did solve the problem I was having. 我仍然不确定为什么他的代码破坏了网站,但是我确实解决了我遇到的问题。 I thought I should post it, just in case anyone else has a similar issues.
我以为应该发布它,以防万一其他人有类似的问题。
I left the code as it was, but added the background color and changed "top" from 1.5em to 3em to have it load correctly. 我按原样保留了代码,但是添加了背景色并将“ top”(顶部)从1.5em更改为3em以使其正确加载。
.main-navigation ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
float: left;
position: absolute;
top: 3.0em;
left: -999em;
z-index: 99999;
background: #9adcfd;
} }
Thanks for everyone who tried! 感谢所有尝试过的人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.