Horizontal Submenu for a Vertical Main Menu Using Bootstrap

Horizontal submenu for a vertical main menu using bootstrap

Here we go!

Dropdown menus work with nested "ul", absolute positions and we will change from display: none; to display:block; when needed with hovers.

Something like this:

<ul>
  <li><a href="#">…</a>
    <ul>
      <li><a href="#">…</a>
        <ul> … <!-- And so on. -->
        </ul>
      </li>
  <li>
</ul>

Your example's html

<nav id="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a>
      <ul>
        <li><a href="#">Project 1</a>
          <ul>
            <li><a href="#">Project 2</a>
              <ul>
                <li><a href="#">Project 3</a>
                  <ul>
                    <li><a href="#">Project 4</a>
                      <ul>
                        <li><a href="#">Project 5</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Your explame's SCSS: (I used sass because it's easier to read and write but i will also paste CSS below)

#main-nav{
  ul{ /* Those lines are used only for styling */
    margin: 0;
    padding: 0;
    border-right: 1px solid black;
    width: 150px;
    list-style-type: none;
    li{
      position: relative; /* This is important when using absolute positions. */
      &:hover{
        &:before{ /* arrow styles */
              content: "";
              top: 0;
              bottom: 0;
              right: 0;
              border-top: 5px solid transparent;
              border-right: 5px solid #999;
              border-bottom: 5px solid transparent;
              border-left: 5px solid transparent;
              position: absolute;
              height: 0px;
              width: 0px;
              margin: auto;
        }
        > ul{
          display: block; /* IMPORTANT: This will show your dropdown menus when hover in the parent li. */

          /*&:before { // I don't like this part but if you enable it, it will make child ul's look closer to your design.
              content: "";
              position: absolute;
              right: 0;
              top: -65px;
              bottom: -35px;
              width: 1px;
              background-color: #ccc;
          }*/
        }
      }//:hover

      a{ /* Those lines are used only for styling */
        padding: 7px 10px;
        display: block;
        &:hover{
          color: red;
        }
      }// a

      > ul{ /* This is what makes the magic happen. */
        display: none; /* Dropdown menus are always hidden, except when you hover it's li parent */
        position: absolute; /* This will position the ul */
        top: 0;
        left: 100%; /* This will push the ul where it is needed. */
        border-right: 1px solid #ccc;
      }
    }// li
  }// ul
}

A live example: https://jsfiddle.net/xwazzo/3spxxk1z/

And the promised CSS version:

#main-nav ul {
  margin: 0;
  padding: 0;
  border-right: 1px solid black;
  width: 150px;
  list-style-type: none; 
}

#main-nav ul li { position: relative; }
#main-nav ul li:hover:before {
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid #999;
  border-bottom: 5px solid transparent;
  border-left: 5px solid transparent;
  position: absolute;
  height: 0px;
  width: 0px;
  margin: auto; 
}

#main-nav ul li:hover > ul { display: block; }
#main-nav ul li a {
  padding: 7px 10px;
  display: block; 
}

#main-nav ul li a:hover { color: red; }
#main-nav ul li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  border-right: 1px solid #ccc; 
}

How to Show horizontal submenu in Bootrap Navigation bar?

From inline-block css we have use span instead of listing the items(li)

<!DOCTYPE html><html lang="en"><head>  <title>Bootstrap Example</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body>
<nav class="navbar navbar-inverse">  <div class="container-fluid">    <div class="navbar-header">      <a class="navbar-brand" href="#">WebSiteName</a>    </div>    <ul class="nav navbar-nav">      <li class="active"><a href="#">Home</a></li>      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>        <ul class="dropdown-menu">          <li><span><a href="#">Page 1</a></span>|          <span><a href="#">Page 2</a></span>|          <span><a href="#">Page 3</a></span></li>        </ul>      </li>      <li><a href="#">Page 2</a></li>      <li><a href="#">Page 3</a></li>    </ul>  </div></nav>  <div class="container">  <h3>Navbar With Dropdown</h3>  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p></div>
</body></html>

vertical menu with submenu in bootstrap material design

You should set z-index in numeric format (NOT px)
z-index: 1;

.sub-menu {  display:none;  position: absolute;  left: 100%;  top: 0px;  width: 320px;  z-index: 1;

  background-color: rgb(255, 255, 255); }.vertical-nav li, .sub-menu li {  list-style:none;  position: relative;   background-color: rgb(255, 255, 255); }.vertical-nav li:hover .sub-menu{  display: block;}.column {  float:left;  padding: 0px;  width: 100px;}.title { padding-bottom: 10px;}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <div class="container">  <div class="row">    <div class="col-sm-2">      <ul class="vertical-nav">        <li><a href="">Link 1</a></li>        <li><a href="">Link 2</a>            <div class='sub-menu'>          <ul class="column">              <li class='title'>Style</li>              <li><a href="#">Sub Link 1</a></li>              <li><a href="#">Sub Link 2</a></li>            </ul>             <ul class='column'>              <li class='title'>Subject</li>              <li><a href="#">Sub Link 3</a></li>              <li><a href="#">Sub Link 4</a></li>            </ul>             <ul class='column'>              <li class='title'>Medium</li>              <li><a href="#">Sub Link 5</a></li>              <li><a href="#">Sub Link 6</a></li>          </ul>            </div>        </li>      </ul>    </div>    <div class="col-sm-10">    <img src="https://www.w3schools.com/css/rock600x400.jpg" class="img-responsive">    </div>  </div></div>

bootstrap vertical menu ( with sub nav ) to be horizontal in small devices

This requires a custom implementation. Bootstrap 3 has removed submenus, but here's an example that may help you get started..

http://www.bootply.com/121902

Bootstrap horizontal 100% width dropdown-submenu in 100% width horizontal dropdown menu?

The point is to disable dropdown's position: relative and place it on a parent that has the desired width:

#navbar {
  position: relative;
}
#navbar .dropdown.has-container {
  position: static;
}
#navbar .dropdown.has-container .dropdown-menu.container {
  margin: 0 -15px;
}

<!-- ... -->
  <li class="dropdown has-container">
     <a href="#" class="dropdown-toggle" 
        data-toggle="dropdown" role="button" 
        aria-haspopup="true" aria-expanded="false">Menu2</a>
     <ul class="dropdown-menu container">
        <li><a href="#">SubMenu1</a></li>
        <li class="dropdown-submenu"><a href="#">SubMenu2</a>
<!-- ... -->

Proof of concept:
jsFiddle.

How can I change the submenu at a dropdown menu from vertical to horizontal

Solved the problem:
add this to your css file or use <style></style> in your html file

ul li {
    display: block;
    float: left;
}
li:hover ul {
    display: block; 
    position: absolute;
    left:0px;
} 
li:hover li {
    float: left;
    font-size: 11px;
}

Horizontal Submenu for a Vertical Main Menu Using Bootstrap