我想像mytnra一样制作整页下拉菜单。问题是我想要横向处理所有内容,但我会垂直获取所有内容,并且无法弄清楚如何使用css。
的内容这是我的代码:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 class="navbar-brand page-scroll" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse row" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><strong>All categories</strong> <b class="caret"></b></a>
<ul class="dropdown-menu multi-level scrollable-menu">
<li style="white-space:nowrap;">
CBSE
</li>
<li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
</li>
<li>
CBSE
</li>
<li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
</li>
</ul>
</li>
</ul>
<!--
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">Even More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
<a href="#" ><li >fjdndisjfndjnfkn</li></a>
<li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
</li>
<ul c>
<a href="#"><li>Class 9th</li></a>
</ul>
</ul>
</li>
<li >
<a href="/"><strong>Home</strong></a>
</li>
<li >
<a href="http://www.blog.edgrab.com" target="_blank"><strong>Blog</strong></a>
</li>
<?php
if(isset($_SESSION['user_data']))
{
?>
<li >
<div class="dropdown" style="margin-top: 12px;cursor: pointer;">
<p class="dropdown-toggle" data-toggle = "dropdown" ><strong><span ><?php echo $_SESSION['user_data']['first_name'];?></span></strong></strong><span class="caret"></span></p>
<ul class="dropdown-menu">
<li><a href="/a/logout.php">Log out</a></li>
</ul>
</div>
</li>
<?php
}
elseif(isset($_SESSION['logged_in']))
{
?>
<li >
<div class="dropdown" style="margin-top: 12px;cursor: pointer;">
<p class="dropdown-toggle" data-toggle = "dropdown" ><strong><span ><?php echo $_SESSION['first_name'];?></span></strong></strong><span class="caret"></span></p>
<ul class="dropdown-menu">
<li><a href="/a/logout.php">Log out</a></li>
</ul>
</div>
</li>
<?php
}
else
{
//do nothing
}
?>
</ul>
-->
<form action="/search.php" class="navbar-form " role="search" method="GET">
<div class="input-group" style="">
<input type="hidden" name="mode" value="content_type">
<input type="text" id="search" name="query" class="form-control search" placeholder="Search notes, solutions, books and more..." name="q" />
<i class="fa fa-search" style="margin-top:-25px;"></i>
</div>
</form>
<!-- /.navbar-collapse
</div>
</div>
<!-- /.container-fluid -->
</nav>
一个工作小提琴: https://jsfiddle.net/xgcbxh7L/3/
答案 0 :(得分:0)
重构&lt; ul&gt;下拉元素。将&lt; li&gt;分组。元素以及标题&lt; li&gt;在&lt; ul&gt;内元素并添加样式属性display:inline-block。 它最终看起来像:
<li style="display: inline-block;">
CBSE
<ul>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
<li>Class 9th</li>
</ul>
</li>