CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kuzma
Kuzma

Reputation: 711

CSS: make dropdown submenu appear below parent

I'm having two problems regarding sub-menu. I'm using Twitter Bootstrap 3. This version doesn't support the sub-menus so I've found a piece of CSS code which makes it possible to use.

But now I'm running two problems:

1). The sub-menu positioning. The child elements aren't under the parent element. They have a fixed position. I have made many code modifications but had no luck...

2). Second problem is that sometimes it is impossible to focus on sub-menu. This example could be seen in English version of demo template under 'contacts': http://www.01kuzma.tk/en/ The first problem could be seen here: http://www.01kuzma.tk/ru/ but it is Russian version of demo template. The code which I'm using to style the sub-menu is:

.custom div.moduletable ul.nav, html body div#page div#midlle.row div.col-md-6   div#component nav.navbar div.moduletable ul.nav{
display: block; position: static; margin-bottom: 5px; 
}

.dropdown-submenu{
    position:relative;
}

.dropdown-submenu > .dropdown-menu
{
   top:100%;
   left:80%;
   margin-top:-6px;
   margin-left:-1px;
   -webkit-border-radius:0 6px 6px 6px;
   -moz-border-radius:0 6px 6px 6px;
   border-radius:0 6px 6px 6px;
}

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

.dropdown-submenu > a:after{
   display:block;
   content:" ";
   float:right;
   width:0;
   height:0;
   border-color:transparent;
   border-style:solid;
   border-width:5px 5px 0;
   border-top-color:#cccccc;
   margin-top:5px;
   margin-right:-10px;
}

.dropdown-submenu:hover > a:after{
border-top-color:#ffffff;
}

The main css file named as style0.css Thank you in advance!

Upvotes: 1

Views: 9336

Answers (1)

dooxe
dooxe

Reputation: 1490

I have made this quiclky, may be it can help you :

http://jsfiddle.net/RUn6S/1/

HTML :

<div class="menu">
    <ul class="list">
        <li class="item"><a href="#">Contains sub menu</a>
            <ul class="list">
                <li class="item"><a href="">Sub item</a></li>
                <li class="item"><a href="">Sub item</a></li>
            </ul>
        </li>
        <li class="item"><a href="#">Contains sub menu</a>
            <ul class="list">
                <li><a href="">Sub item</a></li>
                <li class="item">
                    <a href="">Sub item</a>
                    <ul class="list">
                        <li class="item"><a href="">Sub item</a></li>
                        <li class="item"><a href="">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>        
    </ul>
</div>

CSS :

.menu
{
    height: 25px;
    background-color: #111111;
}

.menu a 
{
    color : gray;
    text-decoration : none;    
}

.menu a:hover
{
    color : white;
    text-decoration : none;    
}

.list
{
    list-style-type : none;
    padding:0;
}

.item
{
    position     : relative;
    display      : inline-block;
    vertical-align : top;
    width        : 150px;   
}

.item>.list
{
    display : none;
    background-color : #222222;
}

.item:hover>.list
{
    display : block;    
}

Upvotes: 1

Related Questions