كود قائمة الازرار

 
<style type="text/css">

 
   
/* Remove dark-nav class from nav tag to see the light version  */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none;
  font-family: Sans-serif;
}

body {
  font-size: 14px;
}

header {
  height: 100vh;
}

.nav {
  background-color: #f8f8f8;
  border-bottom: 1px solid #ececec;
  min-height: 50px;
  height: auto;
  /* Start menu */
}
.nav .container {
  width: 1170px;
  margin: auto;
}
.nav .container:after, .nav .container:before {
  content: "";
  display: block;
  clear: both;
}
.nav .nav-heading {
  float: left;
}
.nav .nav-heading .toggle-nav {
  padding: 2px 10px;
  border-radius: 5px;
  border: none;
  display: none;
  background-color: transparent;
}
.nav .nav-heading > a {
  text-decoration: none;
  color: #000;
  line-height: 60px;
  font-weight: 400;
  font-size: 19px;
  font-weight: 300;
}
.nav .menu {
  float: right;
}
.nav .menu:after {
  content: "";
  clear: both;
  display: block;
}
.nav .list {
  float: right;
  margin: 0;
}
.nav .list > li {
  float: left;
  list-style: none;
}
.nav .list > li > a {
  color: #555;
  text-decoration: none;
  display: block;
  line-height: 60px;
  padding: 0 10px;
}
.nav .list > li > a:hover,
.nav .list > li > a .nav .list > li.active > a {
  color: #333;
}
.nav .list .categories .drop-down {
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #FFF;
  border: 1px solid #ccc;
  padding: 5px 0;
  min-width: 160px;
  width: auto;
  white-space: nowrap;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: none;
  z-index: 99999;
}
.nav .list .drop-down > .seprator {
  height: 1px;
  width: 100%;
  margin: 9px 0;
  background-color: #e5e5e5;
}
.nav .categories {
  position: relative;
}

.drop-down > li > a {
  color: #333;
  display: block;
  padding: 3px 20px;
  text-decoration: none;
}

.show {
  display: block !important;
}

/* Sub dropdown menu */
.categories .drop-down .sub-drop-down {
  position: relative;
}

.categories .drop-down .sub-drop-down:hover .sub-dropdown {
  display: block;
}

.categories .drop-down .sub-dropdown {
  position: absolute;
  top: -20px;
  left: 107%;
  list-style: none;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 3px;
  padding: 10px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  display: none;
}

.categories .drop-down .sub-dropdown:before {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: -20px;
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #cccccc;
}

.categories .drop-down .sub-dropdown > li > a {
  color: #555;
  padding: 5px 0;
  display: block;
}

/* End sub dropdown menu */
/* Dark theme */
.dark-nav {
  background-color: #2f3340;
}

.dark-nav .list > li > a {
  color: #BBB;
}

.dark-nav .list > li > a:hover,
.dark-nav .list > li.active > a {
  color: #FFF;
}

.dark-nav .nav-heading > a {
  color: #EEE;
}

.dark-nav .nav-heading .toggle-nav {
  color: #EEE;
}

/* End Dark theme */
/* Start media query for navbar */
@media (max-width: 767px) {
  .nav .container {
    padding-right: 0;
    padding-left: 0;
  }

  .nav .nav-heading {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    border-bottom: 1px solid #e7e7e7;
  }

  .nav .nav-heading .brand {
    float: left;
  }

  .nav .nav-heading .toggle-nav {
    display: block;
    float: right;
    margin-top: 14px;
  }

  .nav .menu {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    display: none;
  }

  .nav .list {
    float: none;
    width: 100%;
  }

  .nav .list > li {
    float: none;
    width: 100%;
  }

  .nav .list > li > a {
    padding: 12px 0;
    line-height: 1;
  }

  .nav .list .categories .drop-down {
    background-color: transparent;
    border: none;
    position: static;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0;
  }

  .categories .drop-down .sub-dropdown {
    position: static;
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding-left: 20px;
  }

  .categories .drop-down .sub-dropdown > li > a {
    color: #888;
  }

  .categories .drop-down .sub-dropdown:before {
    display: none;
  }

  /* Simple reset for dark theme */
  .dark-nav .menu {
    background-color: #252831;
  }

  .dark-nav .nav-heading {
    border-bottom-color: #31343c;
  }

  .dark-nav .list .drop-down > li > a {
    color: #AAA;
  }

  .dark-nav .list .categories .drop-down .seprator {
    background-color: #2a2d38;
  }
}

    </style>
 
  <script type="text/javascript">
 
  $(function () {
  'use strict';

  // Add class active when the user clicks the lis of the menu
  $('.nav .list li').on('click', 'a', function () {
    $(this).parent().addClass('active').siblings().removeClass('active');
  });


  var openCategories = $('.nav #open-categories'),
      categories = $('.drop-down');

  // Toggle categories on clicking
  openCategories.on('click', function () {
    $("#" + $(this).data('dropdown')).toggleClass('show');
    // When the user clicks the window if the categories is not the target, close it.
    $(window).on('mouseup', function (e) {
      if ( categories.hasClass('show')
          && ! categories.is(e.target)
          && categories.has(e.target).length === 0
          && ! openCategories.is(e.target) ) {
        categories.removeClass('show');
      }
    });
  });


  // Toggle menu, This will be shown in Extra small screens only
  $('.nav .toggle-nav').on('click', function () {
    $( "#" + $(this).data('toggle') ).slideToggle(300);
  });

});
 
  </script>
     


  <nav class="nav">
    <div class="container">
      <div class="nav-heading">
        <button class="toggle-nav" data-toggle="open-navbar1"><i class="fa fa-align-right"></i></button>
        <a class="brand" href="#">اسم موقعك</a>
      </div>
      <div class="menu" id="open-navbar1">
        <ul class="list">
<li><a href="#">رابط</a></li>
          <li class="categories"><a href="#" id="open-categories" data-dropdown="target" href="#">قائمه<i class="fa fa-caret-down"></i></a>
            <ul class="drop-down" id="target">
<li><a href="#">رابط</a></li>
<li><a href="#">رابط</a></li>
              <li class="sub-drop-down"><a href="#">قائمه</a>
                <ul class="sub-dropdown">
                  <li><a href="#">رابط</a></li>
                  <li><a href="#">رابط</a></li>
                  <li><a href="#">رابط</a></li>
                  <li class="speprator"></li>
                  <li><a href="#">رابط</a></li>
                </ul>
              </li>
              <li class="seprator"></li>
              <li><a href="#">رابط</a></li>
              <li class="seprator"></li>
              <li><a href="#">رابط</a></li>
            </ul>
          </li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">رابط</a></li>
          <li><a href="#">الرئيسيه</a></li>
        </ul>
      </div>
    </div>
  </nav>