The dropdown-menu in bootstrap

Question

I am creating my first website using bootstrap.

When I started to create the menu, I found, however, unwanted effects.

Let's start with a triangle that I can not delete in any way :

enter image description here

The HTML code is :

<div class="navbar">
                <div class="navbar-inner">
                    <a class="brand" href="#">
                        <img src="img/logo.png" alt="Logo Impressive">
                    </a>
                    <ul class="nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Sliders</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                Pages
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dLabel">
                                <li>Example</li>
                                <li>Example</li>
                                <li>Example</li>
                            </ul>
                        </li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Shortcodes</a></li>
                        <li><a href="#">Why Me ?</a></li>
                    </ul>
                </div> <!-- end navbar-inner -->
            </div> <!-- end navbar -->

Another problem I 've found in creating an automatic effect of closing.

Definitely going to be easy for anyone, but my knowledge of jquery are almost absent. So if someone could help me make that the dropdown-menu appears and disappears on mouse would save me a lot of time.

I thank in advance all those who will help me, since I'm stuck without help in the work

Thanks in advance

Why don't you make a navbar from scratch – Jul 14 '13 at 18:23 — , Jul 14 '13 at 18:23

score 0 · Accepted Answer · edited May 23 '17 at 12:05

0

Here is a nearly identical question that has had heaps of answers... How to make twitter bootstrap menu dropdown on hover rather than click

Hope this helps and kudos for opting to use Bootstrap. In my experience, you won't be disappointed.

edited May 23 '17 at 12:05

Community

1
1

answered Jul 14 '13 at 18:22

louisvilledev

28
1
1
4

I solved the problem of the passage of the mouse, and I thank you very much. I can not, however, to eliminate the triangle. I hope you can help me .. thanks again – Marco Gurnari Jul 14 '13 at 19:54

score 0 · Answer 2 · answered Jul 15 '13 at 07:07

To remove the triangle, override the :before and :after pseudo selectors for the navbar dropdown-menu like this..

.navbar .nav>li>.dropdown-menu:before,.navbar .nav>li>.dropdown-menu:after {
  content: none;
}

Activate the dropdown on mouseover (hover) is done using:

ul.nav li.dropdown:hover ul.dropdown-menu{
    display: block;    
}

Bootply demo http://www.bootply.com/66576

The dropdown-menu in bootstrap

2 Answers2