1

「Professional Theme」というテーマを使用して、Drupal 7 でサイトをセットアップしました。メイン メニューでテキストが重なる問題を発見しました。上部のメニュー バーには 2 つの行があります。ドロップダウン メニューのテキストが、メニューの 2 行目のテキストと重なっていることがわかりました。また、カーソルを下に移動するとドロップダウン メニューのリンクが消えてしまうため、そのドロップダウン メニューのリンクをクリックすることはできません。何が問題なのか、それを修正する方法を誰か教えてもらえますか?

#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 は、Professional テーマのメイン メニューの元の CSS に基づいています。

4

0 に答える 0