Javascript 下拉菜单引导多级

我有一些问题：

如何在引导中使导航栏文本位于左侧

我已经用bootstrap和jquery菜单aim制作了下拉菜单。但我的下拉子菜单堆积起来了。这就是我的目标 这就是我所做的

你能帮我吗？提前谢谢。我使用的是Bootstrap3.3.4

HTML文件

<header>
<div class="branding">Logo
     <h3>Brand</h3>
<!--<div style="clear: both;"></div>--></div>
</header>
<nav role="navigation" class="navbar navbar-fixed-top">
<div class="container">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="navbar-left"> <a href="index.html" class="dropdown-toggle" data-toggle="dropdown">Product</a>

                <ul class="dropdown-menu" role="menu">
                    <li class="search row-sm-3">
                        <input type="text" class="form-control" placeholder="Search" />
                    </li>
                    <li role="separator" class="divider"></li>
                    <li data-submenu-id="submenu-mobile"> <a href="#">Mobile Devices</a>
                        <div id="submenu-mobile" class="popover">
                             <h3 class="popover-title">Mobile Devices</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Smartphones</a>
                                    </li>
                                    <li><a href="#">Tablets</a>
                                    </li>
                                    <li><a href="#">Other Phones</a>
                                    </li>
                                    <li><a href="#">Accessoris</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-audio"> <a href="#">TV / Audio / Video</a>

                        <div id="submenu-audio" class="popover">
                             <h3 class="popover-title">TV / Audio / Video</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Televisions</a>
                                    </li>
                                    <li><a href="#">Audio and Video</a>
                                    </li>
                                    <li><a href="#">Accessoris</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-track-trace"> <a href="#">Cameras and Camcorders</a>

                        <div id="submenu-track-trace" class="popover">
                             <h3 class="popover-title">Cameras and Camcorders</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Cameras</a>
                                    </li>
                                    <li><a href="#">Camcorders</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li data-submenu-id="submenu-it"> <a href="#">IT</a>

                        <div id="submenu-it" class="popover">
                             <h3 class="popover-title">IT</h3>

                            <div class="popover-content">
                                <ul class="list-unstyled">
                                    <li><a href="#">Monitor</a>
                                    </li>
                                    <li><a href="#">Printers</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="navbar-left"><a href="#">Apps</a>
            </li>
            <li class="navbar-left"><a href="#">Support</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right setting">
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            Setting
                            <span class="caret"></span>
                        </a>

                <ul class="dropdown-menu">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span>
                                    My Profile</a>

                    </li>
                    <li><a href="#"><span class="glyphicon glyphicon-inbox"></span>
                                    Messages</a>

                    </li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
                                    Logout</a>

                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <!--/.nav-collapse -->
</div>
<!--/.container -->

---

也许能帮你。@JSantosh谢谢，但这不是我真正想要的。我希望2级背景与1级背景具有相同的

宽度和
高度。@DevanJ.你希望所有级别都具有相同的宽度和高度，不管哪个级别有多少链接？是的，没错@Shehary。我已经完成了上面的图片。但是我的不是平放在下拉菜单父菜单和子菜单之间。我怎样才能解决这个问题？@DevanJ。从选择器
下拉菜单中删除阴影
属性为
框阴影：0px 6px 12px rgba（0,0,0,0.176）将其更改为
框阴影：无
.branding h3 {
position: fixed;
float: left;
left: 25%;
top: -5px;
font-weight: bold;
font-size: 18px;
color: #595959;
}
nav {
height: 30px;
float: left;
}
.navbar-fixed-top {
top: 40px;
/*font-size: 13px;*/
font-weight: bold;
background: #D9D9D9;
color: #727272;
}
.nav li a {
text-decoration: none;
color: #727272;
}
.nav li a:hover {
color: blue;
}
.disabled {
top: 15px;
}
.divider {
background: #000;
}
.dropdown-menu {
top: 50px;
border-top-color: #eee;
background: #eee;
/*width: 300px;*/
}
.popover {
background: #eee;
width: 250px;
}
.popover-title {
font-weight: bold;
}
.popover-content {
border: 0;
list-style-type: none;
}
.popover-content ul li a {
list-style-type: none;
color: #727272;
}
.popover-content ul li a:hover {
text-decoration: none;
color: blue;
}
.search {
margin: 10px;
}