Css 下拉菜单项隐藏在引导自定义导航栏的主菜单后面

我试图在引导中创建导航栏。在bootstrap-theme.min.css文件中添加了自定义样式。通过这种方式，我可以创建导航栏，但下拉菜单项会隐藏在小屏幕设备的主菜单后面。输出的代码和屏幕截图如下：

在bootstrap-theme.min.css文件中添加的样式：

#自定义-bootstrap-menu.navbar-default.navbar品牌{
颜色：rgba（255，255，255，1）；
}
#自定义-bootstrap-menu.navbar-default{
字体大小：14px；
背景图像：url（'https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png'); 
背景重复：重复-x；
背景大小：100%100%；
边框宽度：1px；
边界半径：4px；
高度：40px；
背景色：rgba（70,131,176,1）；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li、.navbar品牌{
颜色：rgba（255，255，255，1）；
背景色：#528cb4；
高度：38px；
边框：1px实心#ffffff；
利润上限：4倍；
边界半径：5px；
右边距：6px；
字体大小：14px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>a、.navbar品牌{
颜色：rgba（255，255，255，1）；
线高：10px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li:焦点{
背景色：#7fbb00；
}
#自定义-bootstrap-menu.navbar-default.navbar-nav>li.active>a，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:焦点{
颜色：rgba（255，255，255，1）；
背景色：rgba（233129 42 1）；
}
#自定义-bootstrap-menu.navbar-default.navbar切换{
边框颜色：#e9812a；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点{
背景色：#e9812a；
}
#自定义-bootstrap-menu.navbar-default.navbar切换.图标栏{
背景色：#e9812a；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停。图标栏，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点。图标栏{
背景色：#4683b0；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>。下拉菜单{
背景色：#528cb4；
边缘顶部：10px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>。下拉菜单>li>a{
颜色：#ffffff；
}
#自定义-bootstrap-menu.navbar-default.navbar导航>li>。下拉菜单>li>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>。下拉菜单>li>a:focus{
颜色：#aeff00；
背景图像：无；
背景色：#528cb4；
}
#自定义-bootstrap-menu.navbar-default.navbar导航>.open>a{
背景图像：无；
背景色：#7fbb00；
高度：36px；
边界半径：4px；
}
插入符号{
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：4倍实心；
显示：内联块；
身高：0；
左边距：2倍；
垂直对齐：中间对齐；
宽度：0；
}

更新：我将此添加到您的css中

#custom-bootstrap-menu.navbar-default .navbar-brand{
    height:38px;
}

并删除

高度：38px来自
#custom-bootstrap-menu.navbar-default.navbar-nav>li.navbar-brand
。这应该能奏效


#自定义-bootstrap-menu.navbar-default.navbar品牌{
颜色：rgba（255，255，255，1）；
}
#自定义-bootstrap-menu.navbar-default{
字体大小：14px；
背景图像：url（'https://s3.amazonaws.com/static.bizmerlin.net/bg_header.png'); 
背景重复：重复-x；
背景大小：100%100%；
边框宽度：1px；
边界半径：4px；
高度：40px；
背景色：rgba（70,131,176,1）；
}
#自定义-bootstrap-menu.navbar-default.navbar品牌{
高度：38px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li、.navbar品牌{
颜色：rgba（255，255，255，1）；
背景色：#528cb4；
边框：1px实心#ffffff；
利润上限：4倍；
边界半径：5px；
右边距：6px；
字体大小：14px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>a、.navbar品牌{
颜色：rgba（255，255，255，1）；
线高：10px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li:焦点{
背景色：#7fbb00；
}
#自定义-bootstrap-menu.navbar-default.navbar-nav>li.active>a，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>.active>a:焦点{
颜色：rgba（255，255，255，1）；
背景色：rgba（233129 42 1）；
}
#自定义-bootstrap-menu.navbar-default.navbar切换{
边框颜色：#e9812a；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点{
背景色：#e9812a；
}
#自定义-bootstrap-menu.navbar-default.navbar切换.图标栏{
背景色：#e9812a；
}
#自定义-bootstrap-menu.navbar-default.navbar切换：悬停。图标栏，
#自定义-bootstrap-menu.navbar-default.navbar切换：焦点。图标栏{
背景色：#4683b0；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>。下拉菜单{
背景色：#528cb4；
边缘顶部：10px；
}
#自定义-bootstrap-menu.navbar-default.navbar nav>li>。下拉菜单>li>a{
颜色：#ffffff；
}
#自定义-bootstrap-menu.navbar-default.navbar导航>li>。下拉菜单>li>a:悬停，
#自定义-bootstrap-menu.navbar-default.navbar-nav>li>。下拉菜单>li>a:focus{
颜色：#aeff00；
背景图像：无；
背景色：#528cb4；
}
#自定义-bootstrap-menu.navbar-default.navbar导航>.open>a{
背景图像：无；
背景色：#7fbb00；
高度：36px；
边界半径：4px；
}
插入符号{
左边框：4px实心透明；
右边框：4px实心透明；
边框顶部：4倍实心；
显示：内联块；
身高：0；
左边距：2倍；
垂直对齐：中间对齐；
宽度：0；
}

切换导航