CODEWITHSUNDEEP
csstwittertwitter-bootstrap
Alexander P
Alexander P

Reputation: 835

Multilevel dropdown in bootstrap

I'm trying to make multilevel menu based on twitter bootstrap.

http://jsfiddle.net/W3Zj8/

Here is the HTML:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Twitter Bootstrap Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <body>
        <div class="container">
                <div class="dropdown clearfix">
                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
                        <li><a tabindex="-1" href="#">Action</a></li>
                        <li><a tabindex="-1" href="#">Another action</a></li>
                        <li><a tabindex="-1" href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-submenu"><a tabindex="-1" href="#">More options</a>
                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                                <li><a tabindex="-1" href="#">Second level link</a></li>

                                    <li class="dropdown-submenu"><a tabindex="-1" href="#">Sub with sub</a>
                                    <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="#">SubSub1</a></li>
                                    <li><a tabindex="-1" href="#">SubSub2</a></li>
                                    </ul>
                                    </li>
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                            </ul>
                        </li>
                    </ul>
            </div>
            </body>

    </html>

I can't figure out why the submenu is hidden untill I hover on "More options" But then I see directky the second level menu. While I expect (and would like) to see it appearing only when I hover on "Sub with sub" submenu item.

Do you have a suggestion?

Upvotes: 1

Views: 7596

Answers (2)

dyurkavets
dyurkavets

Reputation: 436

Add to your css next code:

.dropdown-submenu:hover > .dropdown-menu .dropdown-menu { display: none; }
.dropdown-submenu:hover .dropdown-submenu:hover > .dropdown-menu { display: block; }

Upvotes: 2

DKF
DKF

Reputation: 427

Apparently it is not possible "out of the box" ; you'll have to make CSS modifications by yourself.

See this thread for more information : Twitter Bootstrap Multilevel Dropdown Menu
There is a demo link at the end of the best response, which seems to corresponds at what you are waiting for !

Florian

Upvotes: 0

Related Questions