To get multi level dropdown menu of using boostrap extension (http://www.yiiframework.com/extension/bootstrap/) widget TbNavbar just follow steps
1) copy css copy css into your main css file, you can change according to your requirements!
.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; 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: #ccc; margin-top: 5px; margin-right: -10px; } .dropdown-submenu:hover>a:after { border-left-color: #fff; } .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; }
2) change your TbNavbar widget
$this->widget('bootstrap.widgets.TbNavbar', array( '...' 'items' => array( array( 'class' => 'bootstrap.widgets.TbMenu', 'submenuHtmlOptions' => array('class' => 'multi-level'), 'items' => array( array('label' => 'Top', 'url' => '#', 'items' => array( '...', array('label' => 'Level One', 'url' => '#',), array('label' => 'Level One', 'url' => '#', 'itemOptions' => array('class' => 'dropdown-submenu'), 'items' => array( '...', array('label' => 'Level One', 'url' => '#',), ), ), ) ), ), ), ), ));
You can define as many levels as you want just by changing itemOptions array options.