Question

我无法将此菜单显示为水平，我希望它显示为w3Schools上的那个（进入他们的页面，上面，在导航栏中有一个选项＆＃34; MORE＆＃34; ，所以当你点击它时，它会显示一个包含许多选项的大菜单。）

CSS是简单的Bootstrap默认值。

我无法让我这样做。以下是我使用的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Extra Verification <span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li class="dropdown-header">Provides Address, Status, Previous Names</li>
    <li><a href="http://www.concord-sots.ct.gov/CONCORD/online?sn=InquiryServlet&eid=99" target="myIframe">Connecticut</a> </li>
    <li><a href="https://ecorp.sos.ga.gov/BusinessSearch" target="myIframe">Georgia</a> </li>
    <li><a href="https://coraweb.sos.la.gov/CommercialSearch/CommercialSearch.aspx" target="myIframe">Louisiana</a></li>
    <li><a href="https://www.vtsosonline.com/online/BusinessInquire/" target="myIframe">Vermont</a></li>
    <li><a href="https://portal.sos.state.nm.us/corps/(S(avf1z0n02vbhx0turlfhca01))/Corplookup/Lookdn.aspx" target="myIframe">New Mexico</a></li>

    <li class="divider"></li>

    <li class="dropdown-header">Provides Address and Status</li>
    <li><a href="http://arc-sos.state.al.us/CGI/CORPNAME.MBR/INPUT">Alabama</a></li>
    <li><a href="https://www.commerce.alaska.gov/CBP/Main/CBPLSearch.aspx?mode=Corp">Alaska</a></li>
    <li><a href="http://www.sos.arkansas.gov/corps/search_all.php">Arkansas</a></li>
    <li><a href="http://ecorp.azcc.gov/Search">Arizona</a></li>
    <li><a href="https://businesssearch.sos.ca.gov/">California</a></li>
    <li><a href="http://www.sos.state.co.us/biz/BusinessEntityCriteriaExt.do">Colorado</a></li>
    <li><a href="https://hbe.ehawaii.gov/documents/search.html?zmobile=N&site_preference=normal">Hawaii</a></li>
    <li><a href="http://www.accessidaho.org/public/sos/corp/search.html?ScriptForm.startstep=crit">Idaho</a></li>
    <li><a href="http://charter.dat.maryland.gov/Pages/CharterSearch/default.aspx">Maryland</a></li>
  </ul>
</div>

Answer 1

因此，如果我理解正确，您希望下拉菜单在点击时显示/消失？你需要jQuery来做到这一点。使用CSS，您可以使它们在悬停时显示/消失，但不会在单击时切换。

Answer 2

您必须在页面中包含jQuery和Bootstrap JavaScript：

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Extra Verification
<span class="caret"></span>
</button>
    <ul class="dropdown-menu">
      <li class="dropdown-header">Provides Address, Status, Previous Names</li>
      <li><a href="http://www.concord-sots.ct.gov/CONCORD/online?sn=InquiryServlet&eid=99" target="myIframe">Connecticut</a> </li>
      <li><a href="https://ecorp.sos.ga.gov/BusinessSearch" target="myIframe">Georgia</a> </li>
      <li><a href="https://coraweb.sos.la.gov/CommercialSearch/CommercialSearch.aspx" target="myIframe">Louisiana</a></li>
      <li><a href="https://www.vtsosonline.com/online/BusinessInquire/" target="myIframe">Vermont</a></li>
      <li><a href="https://portal.sos.state.nm.us/corps/(S(avf1z0n02vbhx0turlfhca01))/Corplookup/Lookdn.aspx" target="myIframe">New Mexico</a></li>

      <li class="divider"></li>

      <li class="dropdown-header">Provides Address and Status</li>
      <li><a href="http://arc-sos.state.al.us/CGI/CORPNAME.MBR/INPUT">Alabama</a></li>
      <li><a href="https://www.commerce.alaska.gov/CBP/Main/CBPLSearch.aspx?mode=Corp">Alaska</a></li>
      <li><a href="http://www.sos.arkansas.gov/corps/search_all.php">Arkansas</a></li>
      <li><a href="http://ecorp.azcc.gov/Search">Arizona</a></li>
      <li><a href="https://businesssearch.sos.ca.gov/">California</a></li>
      <li><a href="http://www.sos.state.co.us/biz/BusinessEntityCriteriaExt.do">Colorado</a></li>
      <li><a href="https://hbe.ehawaii.gov/documents/search.html?zmobile=N&site_preference=normal">Hawaii</a></li>
      <li><a href="http://www.accessidaho.org/public/sos/corp/search.html?ScriptForm.startstep=crit">Idaho</a></li>
      <li><a href="http://charter.dat.maryland.gov/Pages/CharterSearch/default.aspx">Maryland</a></li>
    </ul>
  </div>
</body>

</html>

无法让此菜单显示水平

2 个答案: