我的下拉菜单在我的博客模板中无法正常工作，子项目未显示

Question

在博客模板之外它工作正常，但在博客模板中它不显示子项，请帮助我。 我的css代码如下：

/ *纯CSS3多级下拉导航菜单 / / 通过www.Bloggermint.com * /

1：

＆＃13;

＆＃13;

<div class="logo"><img src="https://dummyimage.com/200x200/000/fff&text=sample+image" alt=""></div>

＆＃13;

#nav {
  float: left;
  font: bold 12px Arial, Helvetica, Sans-serif;
  border: 1px solid #121314;
  border-top: 1px solid #2b2e30;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  overflow: hidden;
}

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#nav ul li {
  float: left;
}

#nav ul li a {
  float: left;
  color: #d4d4d4;
  padding: 10px 20px;
  text-decoration: none;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59, 63, 65)), color-stop(0.55, rgb(72, 76, 77)), color-stop(0.78, rgb(75, 77, 77)));
  background: -moz-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
  background: -o-linear-gradient( center bottom, rgb(59, 63, 65) 9%, rgb(72, 76, 77) 55%, rgb(75, 77, 77) 78%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}

#nav ul li a:hover,
#nav ul li:hover>a {
  color: #252525;
  background: #3C4042;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;
}

#nav li ul a:hover,
#nav ul li li:hover>a {
  color: #2c2c2c;
  background: #5C9ACD;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61, 111, 177)), color-stop(0.51, rgb(80, 136, 199)), color-stop(1, rgb(92, 154, 205)));
  background: -moz-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
  background: -o-linear-gradient( center bottom, rgb(61, 111, 177) 17%, rgb(80, 136, 199) 51%, rgb(92, 154, 205) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  border-top: 1px solid #7BAED9;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li ul {
  background: #3C4042;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  left: -999em;
  margin: 35px 0 0;
  position: absolute;
  width: 160px;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

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

#nav li ul a {
  background: none;
  border: 0 none;
  margin-right: 0;
  width: 120px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
}

#nav li li ul {
  margin: -1px 0 0 160px;
  -webkit-border-radius: 0 10px 10px 10px;
  -moz-border-radius: 0 10px 10px 10px;
  border-radius: 0 10px 10px 10px;
  visibility: hidden;
}

#nav li li:hover ul {
  visibility: visible;
}

#nav ul ul li:last-child>a {
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

#nav ul ul ul li:first-child>a {
  -moz-border-radius: 0 10px 0 0;
  -webkit-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

我检查了您的网站，因为有些blogger CSS覆盖了导航栏CSS，博主将ul标记设置为隐藏第二个下拉列表的overflow:hidden。如果您更改以下行，您可以看到不同的级别可见！

<强> CSS：

#nav li ul {
  overflow: visible;
  background: #3C4042;
  background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77, 79, 79)), color-stop(0.55, rgb(67, 70, 71)), color-stop(0.78, rgb(69, 70, 71)));
  background-image: -moz-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  background-image: -o-linear-gradient( center bottom, rgb(77, 79, 79) 9%, rgb(67, 70, 71) 55%, rgb(69, 70, 71) 78%);
  border-radius: 0 0 10px 10px;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  left: -999em;
  margin: 35px 0 0;
  position: absolute;
  width: 160px;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

如果您遇到任何问题，请告诉我。