title: Bootstrap Drop Down - Use Caret As A Button
body: <p>I am currently using the Bootstrap 3.0 dropdown menu and it works fine. At present when I hover over the text or the caret next to it, it displays the menu. However I wish to alter it so that only when I hover over the caret does it displays the dropdown. </p>
  
  <p>My code is as follows:</p>
  
  <pre><code>   &lt;ul class="nav navbar-nav"&gt;
        &lt;li class="dropdown"&gt;
           &lt;a href='register'&gt;Register Account&lt;/a&gt;
           &lt;a data-toggle="dropdown" class="dropdown-toggle"&gt;&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
           &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a&gt;Bookmark&lt;/a&gt;&lt;/li&gt;
              &lt;li &gt;Close&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>My css code is:</p>
  
  <pre><code>li.dropdown a.dropdown-toggle {
      display:inline-block;
  }
  
  a.dropdown-toggle:hover{
      display: block;    
  }
  </code></pre>