Full page dropdown menu - html

Question

I want to make full page dropdown menu like in mytnra. The problem is I want everything horizontally but i am getting everything vertically and can't figure out how to do that using css.
I want to make something like
here is my code:
<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>
<img class="navbar-brand page-scroll" />
</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">
<strong>All categories</strong> <b class="caret"></b>
<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">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</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>
<li>Class 9th</li>
</ul>
</ul>
</li>
<li >
<strong>Home</strong>
</li>
<li >
<strong>Blog</strong>
</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>Log out</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>Log out</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>
And a working fiddle:
https://jsfiddle.net/xgcbxh7L/3/

Answer 1

Refactor <ul> dropdown element. Group the <li> elements along with the title <li> inside a <ul> element and add the styling property display: inline-block.
It finally looks like:
<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>
Working example - https://jsfiddle.net/g6nyqfsr/1/