1
CSSを使用してドロップダウンを作成しています。なぜ私のCSSが適用されていないのか分かりません。 私は、ドロップダウンをレンダリングするためのULとLIの要素を作成しました。 レンダリング時の出力のスクリーンショットをご覧ください。開発者ツールを使用する。以下はドロップダウンを作成するCSSが動作しない
コード
CSS
ul
{
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li ul li a
{
display: block;
position: relative;
float: left;
}
li ul
{
display: none;
}
ul li a
{
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover
{
background: #617F8A;
}
hideli li:hover ul
{
display: block;
position: absolute;
}
hideli li:hover li
{
float: none;
font-size: 11px;
}
li:hover a
{
background: #617F8A;
}
li:hover li a:hover
{
background: #95A9B1;
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/app.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/angular.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/jszip.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2017.1.223/kendo.all.min.js")"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#"><img src="~/Images/Computacenter.png" /> </a>
<h1>MCR</h1>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-center">
<li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li>
<li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li>
<li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li>
<li><a href="#"><span class="glyphicon glyphicon glyphicon-cog" aria-hidden="true"></span><p>Admin</p></a></li>
<li class="hideli">
@*<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">*@
@*<select class="form-control">
<option><a href="#">ALL</a></option>
<option><a href="#">DE</a></option>
<option><a href="#">GB</a></option>
<option><a href="#">FR</a></option>
</select>*@
<ul>
<li><a href="">ALL</a></li>
<li><a href="">DE</a></li>
<li><a href="">GB</a></li>
<li><a href="">FR</a></li>
</ul>
@*<div class="dropdown">
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown Example
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>*@
<p>Country</p>
@*</a>*@
</li>
<li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div id="body">
@RenderBody()
</div>
@*<div id="body">
<section class="content-wrapper clear-fix">
@RenderBody()
</section>
</div>*@
</body>
</html>
cssのhideliは.hideliでなければなりません。フィドルが助けになるだろう。 –
ブートストラップを使用していますか？ – 333
はい私はブートストラップを使用しています3 – Tom