Asp.net mvc 4 下拉菜单在mvc视图中不起作用
我不知道为什么,但下拉菜单是我的mvc视图不工作,是使用所有引导文件,但它仍然不工作Asp.net mvc 4 下拉菜单在mvc视图中不起作用,asp.net-mvc-4,Asp.net Mvc 4,我不知道为什么,但下拉菜单是我的mvc视图不工作,是使用所有引导文件,但它仍然不工作 <a href="#" class="dropdown-toggle user-state:active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Guide <span class="caret"></span></a>
<a href="#" class="dropdown-toggle user-state:active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Guide <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Diamond <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 1 })">Carat Weight</a></li>
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 2 })">Clarity</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Emerald <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 3 })">Clarity</a></li>
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 4 })">Color</a></li>
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 5 })">Cut</a></li>
</ul>
</li>
</ul>
-
-
我认为您正在尝试创建一个菜单,并且您的代码看起来很好。我只是尝试创建一个菜单,并将代码放在一个菜单列表下,如下所示,它工作正常。希望这有帮助
<style>
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
</style>
<li class="dropdown">
<a href="#" class="dropdown-toggle user-state:active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Guide <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Diamond <b class="caret"></b></a>
<ul class="dropdown-menu sub-menu" role="menu">
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 1 })">Carat Weight</a></li>
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 2 })">Clarity</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Emerald <span class="caret"></span></a>
<ul class="dropdown-menu sub-menu">
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 3 })">Clarity</a></li>
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 4 })">Color</a></li>
<li><a href="@Url.Action("GuideView" , "Base" , new { id = 5 })">Cut</a></li>
</ul>
</li>
</ul>
</li>
.下拉菜单.子菜单{
左:100%;
位置:绝对位置;
排名:0;
可见性:隐藏;
页边顶部:-1px;
}
.下拉菜单li:悬停.子菜单{
能见度:可见;
}
.navbar.子菜单:之前{
边框底部:7px实心透明;
左边界:无;
右边框:7px实心rgba(0,0,0,0.2);
边框顶部:7px实心透明;
左:-7px;
顶部:10px;
}
.navbar.子菜单:之后{
边框顶部:6px实心透明;
左边界:无;
右边框:6px实心#fff;
边框底部:6px实心透明;
左:10px;
顶部:11px;
左-6px;
}
-
-
这将起作用,看起来像是正确的引导
<style>
.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;
}
</style
<div class="container">
<div class="row">
<div class="dropdown">
<a href="#" class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
Guide
<span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Diamond</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Carat Weight</a></li>
<li><a href="#">Clarity</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">Emerald</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Clarity</a></li>
<li><a href="#">Color</a></li>
<li><a href="#">Cut</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.下拉子菜单{
位置:相对位置;
}
.下拉子菜单>.下拉菜单{
排名:0;
左:100%;
利润上限:-6px;
左边距:-1px;
-webkit边界半径:0 6px 6px 6px;
-moz边界半径:0 6px 6px;
边界半径:0 6px 6px 6px;
}
.下拉子菜单:悬停>.下拉菜单{
显示:块;
}
.下拉子菜单>a:之后{
显示:块;
内容:“;
浮动:对;
宽度:0;
身高:0;
边框颜色:透明;
边框样式:实心;
边框宽度:5px 0 5px 5px;
左边框颜色:#ccc;
边缘顶部:5px;
右边距:-10px;
}
.下拉子菜单:悬停>a:之后{
左边框颜色:#fff;
}
.下拉式子菜单.向左拉{
浮动:无;
}
.dropdown-submenu.pull-left>。下拉菜单{
左-100%;
左边距:10px;
-webkit边界半径:6px 0 6px 6px;
-moz边界半径:6px 0 6px 6px;
边界半径:6px 0 6px 6px;
}
不工作,只是显示正常的列表,我想下拉它是一个下拉列表,你必须添加的样式以及。我给你的代码的结果是,当你点击它时,下拉菜单中会出现“钻石”和“翡翠”,这两个选项中会增加额外的下拉菜单。@Rajatzadet我们的代码没有区别,但我的代码没有显示内部下拉菜单。我已编辑代码以显示内部下拉菜单。请尝试一下。请注意,模型视图控制器标记用于回答有关模式的问题。ASP.NET-MVC实现有一个特定的标记。