导航栏下拉列表无法正常工作

普里亚

我正在使用mvc。我尝试创建导航栏下拉菜单。我使用以下html代码创建导航栏下拉菜单

 <li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="menu">
      Report
  <b class="caret"></b>
  </a>
    <ul class="dropdown-menu">
      <li><a href="#">a </a></li>
      <li><a href="#">b</a></li>
      <li><a href="#">c</a></li>
      <li><a href="#">d</a></li>
      <li><a href="#">e</a></li>

    </ul>
  </li>

但是我在UI中得到以下输出。我不知道这个问题

在此处输入图片说明

我不知道为什么a和b值没有出现在UI中。有人可以帮我吗?

这是我正在使用的css文件

element.style {
}
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: #101010;
}
@media (min-width: 768px)
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: 0;
    margin-left: 0;
}
.container > .navbar-header, .container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 340px;
}
@media (min-width: 768px)
.navbar-fixed-top .navbar-collapse, .navbar-static-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
}
@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
}
@media (min-width: 768px)
.navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.navbar-collapse {
    padding-right: 15px;
    padding-left: 15px;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid transparent;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.collapse {
    display: none;
    visibility: hidden;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
user agent stylesheetdiv {
    display: block;
}
Inherited from 
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}
Inherited from 
html {
    font-size: 10px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
Pseudo ::before element
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    display: table;
    content: " ";
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Pseudo ::after element
.clearfix:after, .dl-horizontal dd:after, .container:after, .container-fluid:after, .row:after, .form-horizontal .form-group:after, .btn-toolbar:after, .btn-group-vertical > .btn-group:after, .nav:after, .navbar:after, .navbar-header:after, .navbar-collapse:after, .pager:after, .panel-body:after, .modal-footer:after {
    clear: both;
}
.clearfix:before, .clearfix:after, .dl-horizontal dd:before, .dl-horizontal dd:after, .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after, .form-horizontal .form-group:before, .form-horizontal .form-group:after, .btn-toolbar:before, .btn-toolbar:after, .btn-group-vertical > .btn-group:before, .btn-group-vertical > .btn-group:after, .nav:before, .nav:after, .navbar:before, .navbar:after, .navbar-header:before, .navbar-header:after, .navbar-collapse:before, .navbar-collapse:after, .pager:before, .pager:after, .panel-body:before, .panel-body:after, .modal-footer:before, .modal-footer:after {
    display: table;
    content: " ";
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
Praveen Kumar Purushothaman

猜猜,您可能需要设置<ul>一些参数:

.dropdown-menu {top: auto; margin-top: 0;}
/* OR */
.dropdown-menu {top: 0; margin-top: 2em;}
/* OR */
.dropdown-menu {z-index: 99;}

从评论更新:尝试第三个选项!可能是z-index问题。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Javascript下拉菜单无法在导航栏中正常工作

来自分类Dev

Twitter Bootstrap,导航栏,下拉菜单无法正常工作

来自分类Dev

导航栏无法正常工作

来自分类Dev

Aurelia导航栏VM无法正常工作

来自分类Dev

导航栏在jQuery中无法正常工作

来自分类Dev

我的固定导航栏无法正常工作

来自分类Dev

HTML导航栏换行/无法正常工作

来自分类Dev

粘性导航栏无法正常工作

来自分类Dev

导航栏无法正常工作-Django

来自分类Dev

jQuery导航栏动画无法正常工作

来自分类Dev

我的引导导航栏无法正常工作

来自分类Dev

填充的下拉列表无法正常工作

来自分类Dev

导航栏徽标下拉并且按钮无法正常折叠

来自分类Dev

Angular UI Bootstrap响应式导航栏下拉菜单在新版本中无法正常工作

来自分类Dev

具有固定导航栏的Javascript无法正常工作

来自分类Dev

导航栏在不同屏幕尺寸下无法正常工作

来自分类Dev

使用数据库生成的导航栏无法正常工作

来自分类Dev

导航栏菜单按钮动画无法正常工作

来自分类Dev

Bootstrap 响应式导航栏无法正常工作

来自分类Dev

导航栏切换器无法正常工作

来自分类Dev

无法使菜单导航栏下拉

来自分类Dev

yiii中依赖下拉列表中的ajax无法正常工作

来自分类Dev

更改下拉列表的“选定”属性无法正常工作

来自分类Dev

SwiftUI:导航在带有节的列表中无法正常工作

来自分类Dev

如何扩展当前的CSS响应式下拉导航菜单?下拉菜单无法正常工作

来自分类Dev

@State变量以较高的频率刷新视图时,导航栏/工具栏按钮无法正常工作

来自分类Dev

下拉标签无法正常工作

来自分类Dev

滚动导航无法正常工作

来自分类Dev

无法使我的导航正常工作

Related 相关文章

热门标签

归档