/*!
 * Start Bootstrap - Modern Business HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/* Global Styles */

html,
body {
    height: 100%;
}

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
	font-family:'Roboto Condensed', sans-serif;
}

.img-portfolio {
    margin-bottom: 30px;
}

.img-hover:hover {
    opacity: 0.8;
}

/* Home Page Carousel */

header.carousel {
    height: 95%;
}

header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
    height: 100%;
}

header.carousel .fill {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}

/* 404 Page Styles */

.error-404 {
    font-size: 100px;
}

/* Pricing Page Styles */

.price {
    display: block;
    font-size: 50px;
    line-height: 50px;
}

.price sup {
    top: -20px;
    left: 2px;
    font-size: 20px;
}

.period {
    display: block;
    font-style: italic;
}

/* Footer Styles */

footer {
    margin: 50px 0;
}

/* Responsive Styles */

.navbar {padding:10px;background-color:#FFF;border-bottom:1px solid #02457c;}
.navbar a{color:#02457c;}
.navbar a:hover{background-color:#ededed;color:#FFF;}


.call {border-color:#003a69;background-color:#02457c;color:#FFF;border-radius:0px;border-size:1px;}
.call:hover {border-color:#ed1928;background-color:#ed1928;color:#02457c;border-radius:0px;}

h1, h2 {color:#ec1d2b;}
h3 {color:#ec1d2b;font-size:14px;}
h3 a{color:#ec1d2b;font-size:14px;}

.foo {border-top:1px solid #02457c;padding-top:5px;}

Stack Overflow
Questions
Jobs
Documentation BETA
Tags
Users

Search...
 
Log In Sign Up
x Dismiss
Join the Stack Overflow Community
Stack Overflow is a community of 7.0 million programmers, just like you, helping each other. 
Join them; it only takes a minute: 
Sign up
Bootstrap 3 dropdown sub menu missing

Ask Question

up vote
252
down vote
favorite
98
Bootstrap 3 is still at RC, but I was just trying to implement it. I couldn't figure out how to put a sub menu class. Even there is no class in css and even the new docs don't say anything about it

It was there in 2.x with class name as dropdown-submenu

css twitter-bootstrap twitter-bootstrap-3 submenu
shareimprove this question
edited Aug 17 '15 at 8:51

Damjan Pavlica
2,4731237
asked Aug 2 '13 at 18:09

DevC
1,97141934
2	 	
Remeber that some components have changed in version 3, including menu, navs and modals. – Deividi Cavarzan Aug 2 '13 at 18:21
9	 	
the lack of native support for this (imho) useful feature in BS3 is one of the main reasons I haven't switched over yet. while I agree it isn't as useful in mobile, and they have a 'mobile first' approach now, it seems shortsighted to remove a feature they already implemented, that is VERY useful on the desktop – Andrew Brown Feb 6 '14 at 7:34
3	 	
Agreed that it's short-sighted to remove expected functionality. This kind of breaking change gives enterprise developers a bad day. – RJB Jul 14 '14 at 3:06
  	 	
To make a dropdown just use css codepen.io/Gothburz/pen/GpJKqP – PetrusR3x Oct 24 '15 at 23:42
add a comment
7 Answers
active oldest votes
up vote
435
down vote
accepted
The dropdown-submenu has been removed in Bootstrap 3 RC. In the words of Bootstrap author Mark Otto..

"Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0" - https://github.com/twbs/bootstrap/pull/6342
But, with a little extra CSS you can get the same functionality in 3.

Here is an example that uses 3.0 RC 1: http://bootply.com/71520

Here is an example that uses Bootstrap 3.0.0 (final): http://bootply.com/86684

CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    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 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

@media(max-width:991px) {
    .customer-img,
    .img-related {
        margin-bottom: 30px;
    }
}

@media(max-width:767px) {
    .img-portfolio {
        margin-bottom: 15px;
    }

    header.carousel .carousel {
        height: 70%;
    }
}