1

我用 Drupal 7 建立了一个站点，使用名为“专业主题”的主题。我发现主菜单上的文本重叠存在问题。我的顶部菜单栏中有两行。我发现下拉菜单文本与菜单第二行文本上的文本重叠。而且我无法单击该下拉菜单上的链接，因为当我向下移动光标时它会简单地消失。谁能告诉我它有什么问题以及如何解决它？

#main-menu {
  min-height:35px;
  box-shadow:0 0 3px #999;
  background:#000033;
  background:-moz-repeating-linear-gradient(#666699, #000033 35px);
  background:-webkit-repeating-linear-gradient(#666699, #000033 35px);
  background:-o-repeating-linear-gradient(#666699, #000033 35px);
  background:-ms-repeating-linear-gradient(#666699, #000033 35px);
  background:repeating-linear-gradient(#666699, #000033 35px);
}

#main-menu ul {
  float:left;
  padding:0;
  margin:0;
  max-width:75%;
  list-style:none;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
  font-weight:bold;
}

#main-menu li {
  position:relative;
  float:left;
  padding:0;
  margin:0;
  line-height:35px;
  z-index:100;
  list-style-image:url(none);
}

#main-menu li li{
    line-height:13px;
}

#main-menu ul li:first-child {
  padding-left:0;
}

#main-menu a {
  display:block;
  padding:0 20px;
  color:#f0f0f0;
  text-align:center;
  text-decoration:none;
}

#main-menu a:hover,
#main-menu li > a.active {
  background:#3366cc;
  background:-moz-linear-gradient(#3399ff,#000033);
  background:-webkit-linear-gradient(#3399ff,#000033);
  background:-o-linear-gradient(#3399ff,#000033);
  background:-ms-linear-gradient(#3399ff,#000033);
  background:linear-gradient(#3399ff,#000033);
  color:#fff;
  text-decoration:none;
}

#main-menu li > a.active {
  background:#cc66ff;
  background:-moz-linear-gradient(#cc66ff,#000033);
  background:-webkit-linear-gradient(#cc66ff,#000033);
  background:-o-linear-gradient(#cc66ff,#000033);
  background:-ms-linear-gradient(#cc66ff,#000033);
  background:linear-gradient(#cc66ff,#000033);
}

.drop-down-toggle {
  position:absolute;
  top:7px;
  right:16px;
  display:none;
  width:20px;
  height:20px;
  border-radius:15px;
  background:#000033;
  background:-moz-linear-gradient(#666699,#000033);
  background:-webkit-linear-gradient(#666699,#000033);
  background:-o-linear-gradient(#666699,#000033);
  background:-ms-linear-gradient(#666699,#000033);
  background:linear-gradient(#666699,#000033);
  border:#aaa 3px solid;
}

.drop-down-arrow {
  display:block;
  width:0;
  height:0;
  margin:8px 0 0 5px;
  border-top:5px solid #aaa;
  border-left:transparent 5px solid;
  border-right:transparent 5px solid;
}

#main-menu li li {
  float:none;
  min-width:190px;
  padding:0;
  margin:0;
}

#main-menu li li a {
  min-width:190px;
  margin:0;
  background:#555;
  border-top:#5f5f5f 1px solid;
  font-size:13px;
  line-height:33px;
  text-align:left;
  overflow:hidden;
}

#main-menu li li li a {
  min-width:260px;
  margin:0;
  background:#555;
  border-top:#5f5f5f 1px solid;
  font-size:13px;
  line-height:33px;
  text-align:left;
  overflow:hidden;
}

#main-menu li li:first-child > a {
  border-top:none;
}

#main-menu li li a:hover {
  background:#444;
}

#main-menu li ul {
  display:none;
  position:absolute;
  z-index:9999;
  min-width:190px;
  height:auto;
  padding:0;
  margin:0;
  box-shadow:0 0 3px #333;
}

#main-menu li ul ul {
  margin:-33px 0 0 190px !important;
}

#main-menu li:hover > ul,
#main-menu li li:hover > ul,
#main-menu li li li:hover > ul {
  display:block;
}

#main-menu .nav-toggle {
  display:none;
}

#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {
  list-style:none;
}
#main-menu ul.menu li {
  margin: 0;
}

#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {
  margin: 0;
  padding: 0;
}

实际上这里的 css 是基于专业主题中主菜单的原始 css。

4

0 回答 0