Question

我创建了一个下拉菜单，我遇到了一些问题。

1）第一个父项在悬停时跳转。

2）子项目与父项目不一致，下拉框的一半是透明而不是白色背景。

感谢任何帮助！

＆＃13;

=IF(ISNUMBER(FIND("Yes",INDEX('HI Project Work Database'!D:D,ROW(2:2)))), (INDEX('HI Project Work Database'!$B:$B,ROW(2:2)) & " - " & INDEX('HI Project Work Database'!$A:$A,ROW(2:2))), "")

＆＃13;

#dropdownmenu {
  background-color: #ffffff;
  width: 100%;
  color: #009999;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0px;
  padding: 10px 0 0 0;
  position: relative;
  height: 45px;
  border-top: 1px solid #009999;
  border-bottom: 1px solid #009999;
}
#dropdown {
  display: inline-block;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
#dropdown ul {
  overflow: hidden;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 1px solid #f3f2ee;
}
#dropdown li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border-left: 0px solid #009999;
  border-right: 0px solid #009999;
  height: auto;
}
#dropdown li a,
#dropdown li a:link,
#dropdown li a:visited {
  color: #009999;
  display: inline-block;
  font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  margin: 0px 0px 0px 0px;
  padding: 9px 5px 10px 0px;
  text-decoration: none;
}
#dropdown li a:hover,
#dropdown li a:active {
  background: #ffffff;
  color: #c6c1ae;
  display: block;
  text-decoration: none;
  padding: 9px 5px 10px 0px;
}
#dropdown li {
  float: left;
  padding: 0px 66px;
}
#dropdown li ul {
  z-index: 9999;
  position: absolute;
  left: -999em;
  height: auto;
  width: 220px;
  margin: 0;
  padding: 0px;
}
#dropdown li ul a {
  width: 220px;
}
#dropdown li ul ul {
  margin: 0px 0 0 0px;
}
#dropdown li:hover ul ul,
#dropdown li:hover ul ul ul,
#dropdown li.sfhover ul ul,
#dropdown li.sfhover ul ul ul {
  left: -999em;
}
#dropdown li:hover ul,
#dropdown li li:hover ul,
#dropdown li li li:hover ul,
#dropdown li.sfhover ul,
#dropdown li li.sfhover ul,
#dropdown li li li.sfhover ul {
  left: auto;
}
#dropdown li:hover,
#dropdown li.sfhover {
  position: static;
}
#dropdown li li a,
#dropdown li li a:link,
#dropdown li li a:visited {
  background: #ffffff;
  width: 130px;
  text-align: left;
  color: #009999;
  display: block;
  font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  margin: 0;
  padding: 9px 12px 10px 12px;
  text-decoration: none;
  z-index: 9999;
  border-bottom: 0px solid #009999;
}
#dropdown li li a:hover,
#dropdown li li a:active {
  background: #ffffff;
  color: #c6c1ae;
  display: block;
  margin: 0;
  padding: 9px 12px 10px 12px;
  text-decoration: none;
}

＆＃13;

Answer 1

试试这个

#dropdownmenu {
  background-color: #ffffff;
  width: 100%;
  color: #009999;
  letter-spacing: 2px;
  font-size: 14px;
  margin: 0px;
  padding: 10px 0 0 0;
  position: relative;
  height: 45px;
  border-top: 1px solid #009999;
  border-bottom: 1px solid #009999;
}
#dropdown {
  display: inline-block;
  text-align: center;
  margin: 0px;
  padding: 0px;
}
#dropdown ul {
  overflow: hidden;
  float: left;
  list-style: none;
  margin: 0px;
  padding: 0px;
  border: 1px solid #f3f2ee;
}
#dropdown li {
  list-style: none;
  margin: 0px;
  padding: 0px;
  border-left: 0px solid #009999;
  border-right: 0px solid #009999;
  height: auto;
}
#dropdown li a,
#dropdown li a:link,
#dropdown li a:visited {
  color: #009999;
  display: inline-block;
  font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  margin: 0px 0px 0px 0px;
  padding: 9px 5px 10px 0px;
  text-decoration: none;
}
#dropdown li a:hover,
#dropdown li a:active {
  background: #ffffff;
  color: #c6c1ae;
  }
#dropdown li {
  float: left;
  padding: 0px 66px;
}
#dropdown li ul {
  z-index: 9999;  
  position: absolute;
  left: -999em;
  height: auto;
  width: 220px;
  margin: 0;
  padding: 0px;
}
#dropdown li ul li {
  padding: 0 0;
}
#dropdown li ul a, #dropdown li ul a:link {
  width: 220px;  
  display:block;
}
#dropdown li ul ul {
  margin: 0px 0 0 0px;
}
#dropdown li:hover ul ul,
#dropdown li:hover ul ul ul,
#dropdown li.sfhover ul ul,
#dropdown li.sfhover ul ul ul {
  left: -999em;
}
#dropdown li:hover ul,
#dropdown li li:hover ul,
#dropdown li li li:hover ul,
#dropdown li.sfhover ul,
#dropdown li li.sfhover ul,
#dropdown li li li.sfhover ul {
  left: auto;
}
#dropdown li:hover,
#dropdown li.sfhover {
  position: static;
}
#dropdown li li a,
#dropdown li li a:link,
#dropdown li li a:visited {
  background: #ffffff;
  width: 230px;
  text-align: left;
  color: #009999;
  display: block;
  font: normal 14px'Quicksand', Arial, Tahoma, Helvetica, FreeSans, sans-serif;
  margin: 0;
  padding: 9px 12px 10px 12px;
  text-decoration: none;
  z-index: 9999;
  border-bottom: 0px solid #009999;
}
#dropdown li li a:hover,
#dropdown li li a:active {
  background: #ffffff;
  color: #c6c1ae;
  display: block;
  margin: 0;
  padding: 9px 12px 10px 12px;
  text-decoration: none;
}

<div id="dropdownmenu">
  <ul id="dropdown">
    <a class="menuDrop">
      <li><a href="/">Item 1</a>
      </li>
      <li><a href="#">
    Item 2</a>
        <ul>
          <li><a href="#">page 1</a>
          </li>
          <li><a href="#">page 2</a>
          </li>
          <li><a href="#">page 3</a>
          </li>
          <li><a href="#">page 4</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 3</a>
      </li>
      <li><a href="#">
    Item 4</a>
        <ul>
          <li><a href="#">page 1</a>
          </li>
          <li><a href="#">page 2</a>
          </li>
          <li><a href="#">page 3</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Item 5</a>
      </li>
    </a>
  </ul>
</div>

下拉菜单 - 父链接跳转，子链接偏离中心

1 个答案: