CSS中心下拉菜单

时间:2017-12-12 14:16:30

标签: html css drop-down-menu center

我无法集中以下CSS下拉菜单:

Sub Macro1()
Range("Q3").Value = "=INDEX(Product!C12, MATCH(December!RC1, Product!C9, 0),COLUMNS(C1:C[-16]))"
End Sub

我尝试过使用position:absolute,并为“top”和left“输入值”但是这只会移动文本,并且会丢失下拉功能。

任何帮助都将不胜感激。

感谢。

完整代码:

gist.github.com/ruslan024/1a7d2ce4936a35369221a8f0e41c5dd7

1 个答案:

答案 0 :(得分:0)

你是说这样的意思吗?如果没有将完整的HTML格式化为片段(不仅仅是某些第三方要点),我必须做出一些假设。除此之外,它只是一些CSS调整。



.container {
  background-color: #eee;
  font-family: 'Questrial', sans-serif;
  text-align: center;
  height: 300px;
}

.container > a {
  display: inline-block;
  font-size: 20px;
  color: green;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropbtn {
  display: inline-block;
  font-size: 20px;
  padding: 14px 16px;
  background-color: inherit;
  font-family: 'Questrial', sans-serif;
  color: green;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: none;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: green;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: none;
  color: green;
}

.dropbtn:hover .dropdown-content {
  display: block;
}

<div class="container">
  <a href="contact.html">Contact Us</a>
  <div href="" class="dropbtn">Resources
      <span class="dropdown-content">
        <a href="market data bank.html">Market Data Bank</a>
        <a href="stock quotes.html">Stock Quotes</a>
        <a href="financial tools.html">Finacial Tools</a>
      </span>
  </div>
  <div href="" class="dropbtn">Services
      <span class="dropdown-content">
        <a href="planning and guidance.html">Planning and Guidance</a>
        <a href="portfolio advisory services.html">Portfolio Advisory Services</a>
        <a href="wealth planning.html">Wealth Planning</a>
    </span>
  </div>
  <a href="about.html">About Us</a>
  <a href="index.html">Home</a>
</div>
&#13;
&#13;
&#13;