Sub menu not following main menu when scrolling horizontally











up vote
0
down vote

favorite












All works fine but if you make the window smaller and scroll the menu horizontally the submenu is out of alignment with its parent:



https://jsfiddle.net/9hjgo1qc/7/



Any thoughts on how to make the submenu follow the main menu on scrolling?



HTML 



<div class="navbar">

  <div class="dropdown">

    <button class="nav_button">M1</button>

  </div> 



  <div class="dropdown">

    <button class="nav_button">M2</button>

    <div class="dropdown-content">

      <button class="menu_sub_button">M2-1</button> 

      <button class="menu_sub_button">M2-2</button> 

    </div>

  </div>

  <div class="dropdown">

      <button class="nav_button">M3</button>

  </div> 

  <div class="dropdown">

    <button class="nav_button">M4</button>

  </div> 

</div> 

More text


CSS



.navbar {

    width:100%;

    overflow-x: auto;

    overflow-y: hidden;

    font-family: Arial, Helvetica, sans-serif;

    white-space: nowrap;

}

.navbar button {

    font-size: 12px;

    color: black;

    text-align: center;

    text-decoration: none;

}

.dropdown {

    overflow: auto;

    min-width: 180px;

    display: inline-block;

 }

.dropdown-content {

     display: none;

     position: absolute;

     background-color: #f9f9f9;

     min-width: 180px;

     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

     z-index: 1;

}

.dropdown:hover .dropdown-content {

     display: block;

}

.nav_button {

     white-space: normal;

     width: 175px;

     height: 30px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #757BD3;

}

.menu_sub_button {

     white-space: normal;

     width: 175px;

     height: 25px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #D8D8D8;

}

.menu_sub_button:hover {

     background-color: #C3C3C3;

}





css







share|improve this question






















  • It's not possible (without javascript). .dropdown should be relative if you want that .dropdown-content follows the .dropdown. .dropdown should have overflow visible But then the problem is that .navbar should have overflow-x: auto; and overflow-y: visible. But the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”
    – Simsteve7
    Nov 10 at 0:47












  • Thanks for the explanation - I will keep looking for something.
    – RGriffiths
    Nov 10 at 19:18















up vote
0
down vote

favorite












All works fine but if you make the window smaller and scroll the menu horizontally the submenu is out of alignment with its parent:



https://jsfiddle.net/9hjgo1qc/7/



Any thoughts on how to make the submenu follow the main menu on scrolling?



HTML 



<div class="navbar">

  <div class="dropdown">

    <button class="nav_button">M1</button>

  </div> 



  <div class="dropdown">

    <button class="nav_button">M2</button>

    <div class="dropdown-content">

      <button class="menu_sub_button">M2-1</button> 

      <button class="menu_sub_button">M2-2</button> 

    </div>

  </div>

  <div class="dropdown">

      <button class="nav_button">M3</button>

  </div> 

  <div class="dropdown">

    <button class="nav_button">M4</button>

  </div> 

</div> 

More text


CSS



.navbar {

    width:100%;

    overflow-x: auto;

    overflow-y: hidden;

    font-family: Arial, Helvetica, sans-serif;

    white-space: nowrap;

}

.navbar button {

    font-size: 12px;

    color: black;

    text-align: center;

    text-decoration: none;

}

.dropdown {

    overflow: auto;

    min-width: 180px;

    display: inline-block;

 }

.dropdown-content {

     display: none;

     position: absolute;

     background-color: #f9f9f9;

     min-width: 180px;

     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

     z-index: 1;

}

.dropdown:hover .dropdown-content {

     display: block;

}

.nav_button {

     white-space: normal;

     width: 175px;

     height: 30px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #757BD3;

}

.menu_sub_button {

     white-space: normal;

     width: 175px;

     height: 25px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #D8D8D8;

}

.menu_sub_button:hover {

     background-color: #C3C3C3;

}





css







share|improve this question






















  • It's not possible (without javascript). .dropdown should be relative if you want that .dropdown-content follows the .dropdown. .dropdown should have overflow visible But then the problem is that .navbar should have overflow-x: auto; and overflow-y: visible. But the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”
    – Simsteve7
    Nov 10 at 0:47












  • Thanks for the explanation - I will keep looking for something.
    – RGriffiths
    Nov 10 at 19:18













up vote
0
down vote

favorite









up vote
0
down vote

favorite











All works fine but if you make the window smaller and scroll the menu horizontally the submenu is out of alignment with its parent:



https://jsfiddle.net/9hjgo1qc/7/



Any thoughts on how to make the submenu follow the main menu on scrolling?



HTML 



<div class="navbar">

  <div class="dropdown">

    <button class="nav_button">M1</button>

  </div> 



  <div class="dropdown">

    <button class="nav_button">M2</button>

    <div class="dropdown-content">

      <button class="menu_sub_button">M2-1</button> 

      <button class="menu_sub_button">M2-2</button> 

    </div>

  </div>

  <div class="dropdown">

      <button class="nav_button">M3</button>

  </div> 

  <div class="dropdown">

    <button class="nav_button">M4</button>

  </div> 

</div> 

More text


CSS



.navbar {

    width:100%;

    overflow-x: auto;

    overflow-y: hidden;

    font-family: Arial, Helvetica, sans-serif;

    white-space: nowrap;

}

.navbar button {

    font-size: 12px;

    color: black;

    text-align: center;

    text-decoration: none;

}

.dropdown {

    overflow: auto;

    min-width: 180px;

    display: inline-block;

 }

.dropdown-content {

     display: none;

     position: absolute;

     background-color: #f9f9f9;

     min-width: 180px;

     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

     z-index: 1;

}

.dropdown:hover .dropdown-content {

     display: block;

}

.nav_button {

     white-space: normal;

     width: 175px;

     height: 30px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #757BD3;

}

.menu_sub_button {

     white-space: normal;

     width: 175px;

     height: 25px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #D8D8D8;

}

.menu_sub_button:hover {

     background-color: #C3C3C3;

}





css







share|improve this question













All works fine but if you make the window smaller and scroll the menu horizontally the submenu is out of alignment with its parent:



https://jsfiddle.net/9hjgo1qc/7/



Any thoughts on how to make the submenu follow the main menu on scrolling?



HTML 



<div class="navbar">

  <div class="dropdown">

    <button class="nav_button">M1</button>

  </div> 



  <div class="dropdown">

    <button class="nav_button">M2</button>

    <div class="dropdown-content">

      <button class="menu_sub_button">M2-1</button> 

      <button class="menu_sub_button">M2-2</button> 

    </div>

  </div>

  <div class="dropdown">

      <button class="nav_button">M3</button>

  </div> 

  <div class="dropdown">

    <button class="nav_button">M4</button>

  </div> 

</div> 

More text


CSS



.navbar {

    width:100%;

    overflow-x: auto;

    overflow-y: hidden;

    font-family: Arial, Helvetica, sans-serif;

    white-space: nowrap;

}

.navbar button {

    font-size: 12px;

    color: black;

    text-align: center;

    text-decoration: none;

}

.dropdown {

    overflow: auto;

    min-width: 180px;

    display: inline-block;

 }

.dropdown-content {

     display: none;

     position: absolute;

     background-color: #f9f9f9;

     min-width: 180px;

     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

     z-index: 1;

}

.dropdown:hover .dropdown-content {

     display: block;

}

.nav_button {

     white-space: normal;

     width: 175px;

     height: 30px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #757BD3;

}

.menu_sub_button {

     white-space: normal;

     width: 175px;

     height: 25px;

     display: block;

     text-align: left;

     color: black;

     border-style: none;

     background-color: #D8D8D8;

}

.menu_sub_button:hover {

     background-color: #C3C3C3;

}





css




css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 10 at 0:20









RGriffiths

2,233124478




2,233124478












  • It's not possible (without javascript). .dropdown should be relative if you want that .dropdown-content follows the .dropdown. .dropdown should have overflow visible But then the problem is that .navbar should have overflow-x: auto; and overflow-y: visible. But the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”
    – Simsteve7
    Nov 10 at 0:47












  • Thanks for the explanation - I will keep looking for something.
    – RGriffiths
    Nov 10 at 19:18


















  • It's not possible (without javascript). .dropdown should be relative if you want that .dropdown-content follows the .dropdown. .dropdown should have overflow visible But then the problem is that .navbar should have overflow-x: auto; and overflow-y: visible. But the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”
    – Simsteve7
    Nov 10 at 0:47












  • Thanks for the explanation - I will keep looking for something.
    – RGriffiths
    Nov 10 at 19:18
















It's not possible (without javascript). .dropdown should be relative if you want that .dropdown-content follows the .dropdown. .dropdown should have overflow visible But then the problem is that .navbar should have overflow-x: auto; and overflow-y: visible. But the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”
– Simsteve7
Nov 10 at 0:47






It's not possible (without javascript). .dropdown should be relative if you want that .dropdown-content follows the .dropdown. .dropdown should have overflow visible But then the problem is that .navbar should have overflow-x: auto; and overflow-y: visible. But the CSS3 Box Model draft says this in section on overflow: “The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.”
– Simsteve7
Nov 10 at 0:47














Thanks for the explanation - I will keep looking for something.
– RGriffiths
Nov 10 at 19:18




Thanks for the explanation - I will keep looking for something.
– RGriffiths
Nov 10 at 19:18












1 Answer
1






active

oldest

votes

















up vote
0
down vote













I have improved your code, it works well on the desktop and on the Smartphone






$("#cssmenu").menumaker({

    title: "Menu",

    breakpoint: 768,

    format: "multitoggle"

});

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a,

#cssmenu #menu-button {

  margin: 0;

  padding: 0;

  border: 0;

  list-style: none;

  line-height: 1;

  display: block;

  position: relative;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

#cssmenu:after,

#cssmenu > ul:after {

  content: ".";

  display: block;

  clear: both;

  visibility: hidden;

  line-height: 0;

  height: 0;

}

#cssmenu #menu-button {

  display: none;

}

#cssmenu {

  font-family: Montserrat, sans-serif;

  background: #757bd3;

}

#cssmenu > ul > li {

  float: left;

}

#cssmenu.align-center > ul {

  font-size: 0;

  text-align: center;

}

#cssmenu.align-center > ul > li {

  display: inline-block;

  float: none;

}

#cssmenu.align-center ul ul {

  text-align: left;

}

#cssmenu.align-right > ul > li {

  float: right;

}

#cssmenu > ul > li > a {

  padding: 17px;

  font-size: 12px;

  letter-spacing: 1px;

  text-decoration: none;

  color: #dddddd;

  font-weight: 700;

  text-transform: uppercase;

}

#cssmenu > ul > li:hover > a {

  color: #ffffff;

}

#cssmenu > ul > li.has-sub > a {

  padding-right: 30px;

}

#cssmenu > ul > li.has-sub > a:after {

  position: absolute;

  top: 22px;

  right: 11px;

  width: 8px;

  height: 2px;

  display: block;

  background: #dddddd;

  content: '';

}

#cssmenu > ul > li.has-sub > a:before {

  position: absolute;

  top: 19px;

  right: 14px;

  display: block;

  width: 2px;

  height: 8px;

  background: #dddddd;

  content: '';

  -webkit-transition: all .25s ease;

  -moz-transition: all .25s ease;

  -ms-transition: all .25s ease;

  -o-transition: all .25s ease;

  transition: all .25s ease;

}

#cssmenu > ul > li.has-sub:hover > a:before {

  top: 23px;

  height: 0;

}

#cssmenu ul ul {

  position: absolute;

  left: -9999px;

}

#cssmenu.align-right ul ul {

  text-align: right;

}

#cssmenu ul ul li {

  height: 0;

  -webkit-transition: all .25s ease;

  -moz-transition: all .25s ease;

  -ms-transition: all .25s ease;

  -o-transition: all .25s ease;

  transition: all .25s ease;

}

#cssmenu li:hover > ul {

  left: auto;

}

#cssmenu.align-right li:hover > ul {

  left: auto;

  right: 0;

}

#cssmenu li:hover > ul > li {

  height: 35px;

}

#cssmenu ul ul ul {

  margin-left: 100%;

  top: 0;

}

#cssmenu.align-right ul ul ul {

  margin-left: 0;

  margin-right: 100%;

}

#cssmenu ul ul li a {

  border-bottom: 1px solid rgba(150, 150, 150, 0.15);

  padding: 11px 15px;

  width: 170px;

  font-size: 12px;

  text-decoration: none;

  color: #000000;

  font-weight: 400;

  background: #d8d8d8;

}

#cssmenu ul ul li:last-child > a,

#cssmenu ul ul li.last-item > a {

  border-bottom: 0;

}

#cssmenu ul ul li:hover > a,

#cssmenu ul ul li a:hover {

  color: #ffffff;

}

#cssmenu ul ul li.has-sub > a:after {

  position: absolute;

  top: 16px;

  right: 11px;

  width: 8px;

  height: 2px;

  display: block;

  background: #000000;

  content: '';

}

#cssmenu.align-right ul ul li.has-sub > a:after {

  right: auto;

  left: 11px;

}

#cssmenu ul ul li.has-sub > a:before {

  position: absolute;

  top: 13px;

  right: 14px;

  display: block;

  width: 2px;

  height: 8px;

  background: #000000;

  content: '';

  -webkit-transition: all .25s ease;

  -moz-transition: all .25s ease;

  -ms-transition: all .25s ease;

  -o-transition: all .25s ease;

  transition: all .25s ease;

}

#cssmenu.align-right ul ul li.has-sub > a:before {

  right: auto;

  left: 14px;

}

#cssmenu ul ul > li.has-sub:hover > a:before {

  top: 17px;

  height: 0;

}

#cssmenu.small-screen {

  width: 100%;

}

#cssmenu.small-screen ul {

  width: 100%;

  display: none;

}

#cssmenu.small-screen.align-center > ul {

  text-align: left;

}

#cssmenu.small-screen ul li {

  width: 100%;

  border-top: 1px solid rgba(120, 120, 120, 0.2);

}

#cssmenu.small-screen ul ul li,

#cssmenu.small-screen li:hover > ul > li {

  height: auto;

}

#cssmenu.small-screen ul li a,

#cssmenu.small-screen ul ul li a {

  width: 100%;

  border-bottom: 0;

}

#cssmenu.small-screen > ul > li {

  float: none;

}

#cssmenu.small-screen ul ul li a {

  padding-left: 25px;

}

#cssmenu.small-screen ul ul ul li a {

  padding-left: 35px;

}

#cssmenu.small-screen ul ul li a {

  color: #dddddd;

  background: none;

}

#cssmenu.small-screen ul ul li:hover > a,

#cssmenu.small-screen ul ul li.active > a {

  color: #ffffff;

}

#cssmenu.small-screen ul ul,

#cssmenu.small-screen ul ul ul,

#cssmenu.small-screen.align-right ul ul {

  position: relative;

  left: 0;

  width: 100%;

  margin: 0;

  text-align: left;

}

#cssmenu.small-screen > ul > li.has-sub > a:after,

#cssmenu.small-screen > ul > li.has-sub > a:before,

#cssmenu.small-screen ul ul > li.has-sub > a:after,

#cssmenu.small-screen ul ul > li.has-sub > a:before {

  display: none;

}

#cssmenu.small-screen #menu-button {

  display: block;

  padding: 17px;

  color: #dddddd;

  cursor: pointer;

  font-size: 12px;

  text-transform: uppercase;

  font-weight: 700;

}

#cssmenu.small-screen #menu-button:after {

  position: absolute;

  top: 22px;

  right: 17px;

  display: block;

  height: 4px;

  width: 20px;

  border-top: 2px solid #dddddd;

  border-bottom: 2px solid #dddddd;

  content: '';

  box-sizing: content-box;

}

#cssmenu.small-screen #menu-button:before {

  position: absolute;

  top: 16px;

  right: 17px;

  display: block;

  height: 2px;

  width: 20px;

  background: #dddddd;

  content: '';

  box-sizing: content-box;

}

#cssmenu.small-screen #menu-button.menu-opened:after {

  top: 23px;

  border: 0;

  height: 2px;

  width: 15px;

  background: #ffffff;

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}

#cssmenu.small-screen #menu-button.menu-opened:before {

  top: 23px;

  background: #ffffff;

  width: 15px;

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

#cssmenu.small-screen .submenu-button {

  position: absolute;

  z-index: 99;

  right: 0;

  top: 0;

  display: block;

  border-left: 1px solid rgba(120, 120, 120, 0.2);

  height: 46px;

  width: 46px;

  cursor: pointer;

}

#cssmenu.small-screen .submenu-button.submenu-opened {

  background: #6269cd;

}

#cssmenu.small-screen ul ul .submenu-button {

  height: 34px;

  width: 34px;

}

#cssmenu.small-screen .submenu-button:after {

  position: absolute;

  top: 22px;

  right: 19px;

  width: 8px;

  height: 2px;

  display: block;

  background: #dddddd;

  content: '';

}

#cssmenu.small-screen ul ul .submenu-button:after {

  top: 15px;

  right: 13px;

}

#cssmenu.small-screen .submenu-button.submenu-opened:after {

  background: #ffffff;

}

#cssmenu.small-screen .submenu-button:before {

  position: absolute;

  top: 19px;

  right: 22px;

  display: block;

  width: 2px;

  height: 8px;

  background: #dddddd;

  content: '';

}

#cssmenu.small-screen ul ul .submenu-button:before {

  top: 12px;

  right: 16px;

}

#cssmenu.small-screen .submenu-button.submenu-opened:before {

  display: none;

}

#cssmenu.small-screen.select-list {

  padding: 5px;

}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">



<!-- jQuery -->

<script src="http://code.jquery.com/jquery-latest.min.js"></script>



<!-- MenuMaker Plugin -->

<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>



<!-- Icon Library -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">



<title>Test</title>

</head>



<body>

<div id="cssmenu">

  <ul>

     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>

     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>

        <ul>

           <li><a href="#">Sub menu 1</a>

              <ul>

                 <li><a href="#">Child menu 1</a></li>

                 <li><a href="#">Child menu 2</a></li>

              </ul>

           </li>

           <li><a href="#">Sub menu 2</a>

              <ul>

                 <li><a href="#">Child menu 1</a></li>

                 <li><a href="#">Child menu 2</a>

                    <ul>

                       <li><a href="#">Grand menu</a></li>

                    </ul>

                 </li>

              </ul>

           </li>

           <li><a href="#">Sub menu 3</a></li>

        </ul>

     </li>

     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>

     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>

  </ul>

</div>

</body>



</html>








share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53234911%2fsub-menu-not-following-main-menu-when-scrolling-horizontally%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    I have improved your code, it works well on the desktop and on the Smartphone






    $("#cssmenu").menumaker({
    
    title: "Menu",
    
    breakpoint: 768,
    
    format: "multitoggle"
    
});

    @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
    
#cssmenu,
    
#cssmenu ul,
    
#cssmenu ul li,
    
#cssmenu ul li a,
    
#cssmenu #menu-button {
    
  margin: 0;
    
  padding: 0;
    
  border: 0;
    
  list-style: none;
    
  line-height: 1;
    
  display: block;
    
  position: relative;
    
  -webkit-box-sizing: border-box;
    
  -moz-box-sizing: border-box;
    
  box-sizing: border-box;
    
}
    
#cssmenu:after,
    
#cssmenu > ul:after {
    
  content: ".";
    
  display: block;
    
  clear: both;
    
  visibility: hidden;
    
  line-height: 0;
    
  height: 0;
    
}
    
#cssmenu #menu-button {
    
  display: none;
    
}
    
#cssmenu {
    
  font-family: Montserrat, sans-serif;
    
  background: #757bd3;
    
}
    
#cssmenu > ul > li {
    
  float: left;
    
}
    
#cssmenu.align-center > ul {
    
  font-size: 0;
    
  text-align: center;
    
}
    
#cssmenu.align-center > ul > li {
    
  display: inline-block;
    
  float: none;
    
}
    
#cssmenu.align-center ul ul {
    
  text-align: left;
    
}
    
#cssmenu.align-right > ul > li {
    
  float: right;
    
}
    
#cssmenu > ul > li > a {
    
  padding: 17px;
    
  font-size: 12px;
    
  letter-spacing: 1px;
    
  text-decoration: none;
    
  color: #dddddd;
    
  font-weight: 700;
    
  text-transform: uppercase;
    
}
    
#cssmenu > ul > li:hover > a {
    
  color: #ffffff;
    
}
    
#cssmenu > ul > li.has-sub > a {
    
  padding-right: 30px;
    
}
    
#cssmenu > ul > li.has-sub > a:after {
    
  position: absolute;
    
  top: 22px;
    
  right: 11px;
    
  width: 8px;
    
  height: 2px;
    
  display: block;
    
  background: #dddddd;
    
  content: '';
    
}
    
#cssmenu > ul > li.has-sub > a:before {
    
  position: absolute;
    
  top: 19px;
    
  right: 14px;
    
  display: block;
    
  width: 2px;
    
  height: 8px;
    
  background: #dddddd;
    
  content: '';
    
  -webkit-transition: all .25s ease;
    
  -moz-transition: all .25s ease;
    
  -ms-transition: all .25s ease;
    
  -o-transition: all .25s ease;
    
  transition: all .25s ease;
    
}
    
#cssmenu > ul > li.has-sub:hover > a:before {
    
  top: 23px;
    
  height: 0;
    
}
    
#cssmenu ul ul {
    
  position: absolute;
    
  left: -9999px;
    
}
    
#cssmenu.align-right ul ul {
    
  text-align: right;
    
}
    
#cssmenu ul ul li {
    
  height: 0;
    
  -webkit-transition: all .25s ease;
    
  -moz-transition: all .25s ease;
    
  -ms-transition: all .25s ease;
    
  -o-transition: all .25s ease;
    
  transition: all .25s ease;
    
}
    
#cssmenu li:hover > ul {
    
  left: auto;
    
}
    
#cssmenu.align-right li:hover > ul {
    
  left: auto;
    
  right: 0;
    
}
    
#cssmenu li:hover > ul > li {
    
  height: 35px;
    
}
    
#cssmenu ul ul ul {
    
  margin-left: 100%;
    
  top: 0;
    
}
    
#cssmenu.align-right ul ul ul {
    
  margin-left: 0;
    
  margin-right: 100%;
    
}
    
#cssmenu ul ul li a {
    
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    
  padding: 11px 15px;
    
  width: 170px;
    
  font-size: 12px;
    
  text-decoration: none;
    
  color: #000000;
    
  font-weight: 400;
    
  background: #d8d8d8;
    
}
    
#cssmenu ul ul li:last-child > a,
    
#cssmenu ul ul li.last-item > a {
    
  border-bottom: 0;
    
}
    
#cssmenu ul ul li:hover > a,
    
#cssmenu ul ul li a:hover {
    
  color: #ffffff;
    
}
    
#cssmenu ul ul li.has-sub > a:after {
    
  position: absolute;
    
  top: 16px;
    
  right: 11px;
    
  width: 8px;
    
  height: 2px;
    
  display: block;
    
  background: #000000;
    
  content: '';
    
}
    
#cssmenu.align-right ul ul li.has-sub > a:after {
    
  right: auto;
    
  left: 11px;
    
}
    
#cssmenu ul ul li.has-sub > a:before {
    
  position: absolute;
    
  top: 13px;
    
  right: 14px;
    
  display: block;
    
  width: 2px;
    
  height: 8px;
    
  background: #000000;
    
  content: '';
    
  -webkit-transition: all .25s ease;
    
  -moz-transition: all .25s ease;
    
  -ms-transition: all .25s ease;
    
  -o-transition: all .25s ease;
    
  transition: all .25s ease;
    
}
    
#cssmenu.align-right ul ul li.has-sub > a:before {
    
  right: auto;
    
  left: 14px;
    
}
    
#cssmenu ul ul > li.has-sub:hover > a:before {
    
  top: 17px;
    
  height: 0;
    
}
    
#cssmenu.small-screen {
    
  width: 100%;
    
}
    
#cssmenu.small-screen ul {
    
  width: 100%;
    
  display: none;
    
}
    
#cssmenu.small-screen.align-center > ul {
    
  text-align: left;
    
}
    
#cssmenu.small-screen ul li {
    
  width: 100%;
    
  border-top: 1px solid rgba(120, 120, 120, 0.2);
    
}
    
#cssmenu.small-screen ul ul li,
    
#cssmenu.small-screen li:hover > ul > li {
    
  height: auto;
    
}
    
#cssmenu.small-screen ul li a,
    
#cssmenu.small-screen ul ul li a {
    
  width: 100%;
    
  border-bottom: 0;
    
}
    
#cssmenu.small-screen > ul > li {
    
  float: none;
    
}
    
#cssmenu.small-screen ul ul li a {
    
  padding-left: 25px;
    
}
    
#cssmenu.small-screen ul ul ul li a {
    
  padding-left: 35px;
    
}
    
#cssmenu.small-screen ul ul li a {
    
  color: #dddddd;
    
  background: none;
    
}
    
#cssmenu.small-screen ul ul li:hover > a,
    
#cssmenu.small-screen ul ul li.active > a {
    
  color: #ffffff;
    
}
    
#cssmenu.small-screen ul ul,
    
#cssmenu.small-screen ul ul ul,
    
#cssmenu.small-screen.align-right ul ul {
    
  position: relative;
    
  left: 0;
    
  width: 100%;
    
  margin: 0;
    
  text-align: left;
    
}
    
#cssmenu.small-screen > ul > li.has-sub > a:after,
    
#cssmenu.small-screen > ul > li.has-sub > a:before,
    
#cssmenu.small-screen ul ul > li.has-sub > a:after,
    
#cssmenu.small-screen ul ul > li.has-sub > a:before {
    
  display: none;
    
}
    
#cssmenu.small-screen #menu-button {
    
  display: block;
    
  padding: 17px;
    
  color: #dddddd;
    
  cursor: pointer;
    
  font-size: 12px;
    
  text-transform: uppercase;
    
  font-weight: 700;
    
}
    
#cssmenu.small-screen #menu-button:after {
    
  position: absolute;
    
  top: 22px;
    
  right: 17px;
    
  display: block;
    
  height: 4px;
    
  width: 20px;
    
  border-top: 2px solid #dddddd;
    
  border-bottom: 2px solid #dddddd;
    
  content: '';
    
  box-sizing: content-box;
    
}
    
#cssmenu.small-screen #menu-button:before {
    
  position: absolute;
    
  top: 16px;
    
  right: 17px;
    
  display: block;
    
  height: 2px;
    
  width: 20px;
    
  background: #dddddd;
    
  content: '';
    
  box-sizing: content-box;
    
}
    
#cssmenu.small-screen #menu-button.menu-opened:after {
    
  top: 23px;
    
  border: 0;
    
  height: 2px;
    
  width: 15px;
    
  background: #ffffff;
    
  -webkit-transform: rotate(45deg);
    
  -moz-transform: rotate(45deg);
    
  -ms-transform: rotate(45deg);
    
  -o-transform: rotate(45deg);
    
  transform: rotate(45deg);
    
}
    
#cssmenu.small-screen #menu-button.menu-opened:before {
    
  top: 23px;
    
  background: #ffffff;
    
  width: 15px;
    
  -webkit-transform: rotate(-45deg);
    
  -moz-transform: rotate(-45deg);
    
  -ms-transform: rotate(-45deg);
    
  -o-transform: rotate(-45deg);
    
  transform: rotate(-45deg);
    
}
    
#cssmenu.small-screen .submenu-button {
    
  position: absolute;
    
  z-index: 99;
    
  right: 0;
    
  top: 0;
    
  display: block;
    
  border-left: 1px solid rgba(120, 120, 120, 0.2);
    
  height: 46px;
    
  width: 46px;
    
  cursor: pointer;
    
}
    
#cssmenu.small-screen .submenu-button.submenu-opened {
    
  background: #6269cd;
    
}
    
#cssmenu.small-screen ul ul .submenu-button {
    
  height: 34px;
    
  width: 34px;
    
}
    
#cssmenu.small-screen .submenu-button:after {
    
  position: absolute;
    
  top: 22px;
    
  right: 19px;
    
  width: 8px;
    
  height: 2px;
    
  display: block;
    
  background: #dddddd;
    
  content: '';
    
}
    
#cssmenu.small-screen ul ul .submenu-button:after {
    
  top: 15px;
    
  right: 13px;
    
}
    
#cssmenu.small-screen .submenu-button.submenu-opened:after {
    
  background: #ffffff;
    
}
    
#cssmenu.small-screen .submenu-button:before {
    
  position: absolute;
    
  top: 19px;
    
  right: 22px;
    
  display: block;
    
  width: 2px;
    
  height: 8px;
    
  background: #dddddd;
    
  content: '';
    
}
    
#cssmenu.small-screen ul ul .submenu-button:before {
    
  top: 12px;
    
  right: 16px;
    
}
    
#cssmenu.small-screen .submenu-button.submenu-opened:before {
    
  display: none;
    
}
    
#cssmenu.small-screen.select-list {
    
  padding: 5px;
    
}

    <!DOCTYPE html>
    
<html>
    
<head>
    
<meta charset="UTF-8">
    

    
<!-- jQuery -->
    
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
    

    
<!-- MenuMaker Plugin -->
    
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
    

    
<!-- Icon Library -->
    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    

    
<title>Test</title>
    
</head>
    

    
<body>
    
<div id="cssmenu">
    
  <ul>
    
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
    
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
    
        <ul>
    
           <li><a href="#">Sub menu 1</a>
    
              <ul>
    
                 <li><a href="#">Child menu 1</a></li>
    
                 <li><a href="#">Child menu 2</a></li>
    
              </ul>
    
           </li>
    
           <li><a href="#">Sub menu 2</a>
    
              <ul>
    
                 <li><a href="#">Child menu 1</a></li>
    
                 <li><a href="#">Child menu 2</a>
    
                    <ul>
    
                       <li><a href="#">Grand menu</a></li>
    
                    </ul>
    
                 </li>
    
              </ul>
    
           </li>
    
           <li><a href="#">Sub menu 3</a></li>
    
        </ul>
    
     </li>
    
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
    
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
    
  </ul>
    
</div>
    
</body>
    

    
</html>








    share|improve this answer

























      up vote
      0
      down vote













      I have improved your code, it works well on the desktop and on the Smartphone






      $("#cssmenu").menumaker({
      
    title: "Menu",
      
    breakpoint: 768,
      
    format: "multitoggle"
      
});

      @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
      
#cssmenu,
      
#cssmenu ul,
      
#cssmenu ul li,
      
#cssmenu ul li a,
      
#cssmenu #menu-button {
      
  margin: 0;
      
  padding: 0;
      
  border: 0;
      
  list-style: none;
      
  line-height: 1;
      
  display: block;
      
  position: relative;
      
  -webkit-box-sizing: border-box;
      
  -moz-box-sizing: border-box;
      
  box-sizing: border-box;
      
}
      
#cssmenu:after,
      
#cssmenu > ul:after {
      
  content: ".";
      
  display: block;
      
  clear: both;
      
  visibility: hidden;
      
  line-height: 0;
      
  height: 0;
      
}
      
#cssmenu #menu-button {
      
  display: none;
      
}
      
#cssmenu {
      
  font-family: Montserrat, sans-serif;
      
  background: #757bd3;
      
}
      
#cssmenu > ul > li {
      
  float: left;
      
}
      
#cssmenu.align-center > ul {
      
  font-size: 0;
      
  text-align: center;
      
}
      
#cssmenu.align-center > ul > li {
      
  display: inline-block;
      
  float: none;
      
}
      
#cssmenu.align-center ul ul {
      
  text-align: left;
      
}
      
#cssmenu.align-right > ul > li {
      
  float: right;
      
}
      
#cssmenu > ul > li > a {
      
  padding: 17px;
      
  font-size: 12px;
      
  letter-spacing: 1px;
      
  text-decoration: none;
      
  color: #dddddd;
      
  font-weight: 700;
      
  text-transform: uppercase;
      
}
      
#cssmenu > ul > li:hover > a {
      
  color: #ffffff;
      
}
      
#cssmenu > ul > li.has-sub > a {
      
  padding-right: 30px;
      
}
      
#cssmenu > ul > li.has-sub > a:after {
      
  position: absolute;
      
  top: 22px;
      
  right: 11px;
      
  width: 8px;
      
  height: 2px;
      
  display: block;
      
  background: #dddddd;
      
  content: '';
      
}
      
#cssmenu > ul > li.has-sub > a:before {
      
  position: absolute;
      
  top: 19px;
      
  right: 14px;
      
  display: block;
      
  width: 2px;
      
  height: 8px;
      
  background: #dddddd;
      
  content: '';
      
  -webkit-transition: all .25s ease;
      
  -moz-transition: all .25s ease;
      
  -ms-transition: all .25s ease;
      
  -o-transition: all .25s ease;
      
  transition: all .25s ease;
      
}
      
#cssmenu > ul > li.has-sub:hover > a:before {
      
  top: 23px;
      
  height: 0;
      
}
      
#cssmenu ul ul {
      
  position: absolute;
      
  left: -9999px;
      
}
      
#cssmenu.align-right ul ul {
      
  text-align: right;
      
}
      
#cssmenu ul ul li {
      
  height: 0;
      
  -webkit-transition: all .25s ease;
      
  -moz-transition: all .25s ease;
      
  -ms-transition: all .25s ease;
      
  -o-transition: all .25s ease;
      
  transition: all .25s ease;
      
}
      
#cssmenu li:hover > ul {
      
  left: auto;
      
}
      
#cssmenu.align-right li:hover > ul {
      
  left: auto;
      
  right: 0;
      
}
      
#cssmenu li:hover > ul > li {
      
  height: 35px;
      
}
      
#cssmenu ul ul ul {
      
  margin-left: 100%;
      
  top: 0;
      
}
      
#cssmenu.align-right ul ul ul {
      
  margin-left: 0;
      
  margin-right: 100%;
      
}
      
#cssmenu ul ul li a {
      
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
      
  padding: 11px 15px;
      
  width: 170px;
      
  font-size: 12px;
      
  text-decoration: none;
      
  color: #000000;
      
  font-weight: 400;
      
  background: #d8d8d8;
      
}
      
#cssmenu ul ul li:last-child > a,
      
#cssmenu ul ul li.last-item > a {
      
  border-bottom: 0;
      
}
      
#cssmenu ul ul li:hover > a,
      
#cssmenu ul ul li a:hover {
      
  color: #ffffff;
      
}
      
#cssmenu ul ul li.has-sub > a:after {
      
  position: absolute;
      
  top: 16px;
      
  right: 11px;
      
  width: 8px;
      
  height: 2px;
      
  display: block;
      
  background: #000000;
      
  content: '';
      
}
      
#cssmenu.align-right ul ul li.has-sub > a:after {
      
  right: auto;
      
  left: 11px;
      
}
      
#cssmenu ul ul li.has-sub > a:before {
      
  position: absolute;
      
  top: 13px;
      
  right: 14px;
      
  display: block;
      
  width: 2px;
      
  height: 8px;
      
  background: #000000;
      
  content: '';
      
  -webkit-transition: all .25s ease;
      
  -moz-transition: all .25s ease;
      
  -ms-transition: all .25s ease;
      
  -o-transition: all .25s ease;
      
  transition: all .25s ease;
      
}
      
#cssmenu.align-right ul ul li.has-sub > a:before {
      
  right: auto;
      
  left: 14px;
      
}
      
#cssmenu ul ul > li.has-sub:hover > a:before {
      
  top: 17px;
      
  height: 0;
      
}
      
#cssmenu.small-screen {
      
  width: 100%;
      
}
      
#cssmenu.small-screen ul {
      
  width: 100%;
      
  display: none;
      
}
      
#cssmenu.small-screen.align-center > ul {
      
  text-align: left;
      
}
      
#cssmenu.small-screen ul li {
      
  width: 100%;
      
  border-top: 1px solid rgba(120, 120, 120, 0.2);
      
}
      
#cssmenu.small-screen ul ul li,
      
#cssmenu.small-screen li:hover > ul > li {
      
  height: auto;
      
}
      
#cssmenu.small-screen ul li a,
      
#cssmenu.small-screen ul ul li a {
      
  width: 100%;
      
  border-bottom: 0;
      
}
      
#cssmenu.small-screen > ul > li {
      
  float: none;
      
}
      
#cssmenu.small-screen ul ul li a {
      
  padding-left: 25px;
      
}
      
#cssmenu.small-screen ul ul ul li a {
      
  padding-left: 35px;
      
}
      
#cssmenu.small-screen ul ul li a {
      
  color: #dddddd;
      
  background: none;
      
}
      
#cssmenu.small-screen ul ul li:hover > a,
      
#cssmenu.small-screen ul ul li.active > a {
      
  color: #ffffff;
      
}
      
#cssmenu.small-screen ul ul,
      
#cssmenu.small-screen ul ul ul,
      
#cssmenu.small-screen.align-right ul ul {
      
  position: relative;
      
  left: 0;
      
  width: 100%;
      
  margin: 0;
      
  text-align: left;
      
}
      
#cssmenu.small-screen > ul > li.has-sub > a:after,
      
#cssmenu.small-screen > ul > li.has-sub > a:before,
      
#cssmenu.small-screen ul ul > li.has-sub > a:after,
      
#cssmenu.small-screen ul ul > li.has-sub > a:before {
      
  display: none;
      
}
      
#cssmenu.small-screen #menu-button {
      
  display: block;
      
  padding: 17px;
      
  color: #dddddd;
      
  cursor: pointer;
      
  font-size: 12px;
      
  text-transform: uppercase;
      
  font-weight: 700;
      
}
      
#cssmenu.small-screen #menu-button:after {
      
  position: absolute;
      
  top: 22px;
      
  right: 17px;
      
  display: block;
      
  height: 4px;
      
  width: 20px;
      
  border-top: 2px solid #dddddd;
      
  border-bottom: 2px solid #dddddd;
      
  content: '';
      
  box-sizing: content-box;
      
}
      
#cssmenu.small-screen #menu-button:before {
      
  position: absolute;
      
  top: 16px;
      
  right: 17px;
      
  display: block;
      
  height: 2px;
      
  width: 20px;
      
  background: #dddddd;
      
  content: '';
      
  box-sizing: content-box;
      
}
      
#cssmenu.small-screen #menu-button.menu-opened:after {
      
  top: 23px;
      
  border: 0;
      
  height: 2px;
      
  width: 15px;
      
  background: #ffffff;
      
  -webkit-transform: rotate(45deg);
      
  -moz-transform: rotate(45deg);
      
  -ms-transform: rotate(45deg);
      
  -o-transform: rotate(45deg);
      
  transform: rotate(45deg);
      
}
      
#cssmenu.small-screen #menu-button.menu-opened:before {
      
  top: 23px;
      
  background: #ffffff;
      
  width: 15px;
      
  -webkit-transform: rotate(-45deg);
      
  -moz-transform: rotate(-45deg);
      
  -ms-transform: rotate(-45deg);
      
  -o-transform: rotate(-45deg);
      
  transform: rotate(-45deg);
      
}
      
#cssmenu.small-screen .submenu-button {
      
  position: absolute;
      
  z-index: 99;
      
  right: 0;
      
  top: 0;
      
  display: block;
      
  border-left: 1px solid rgba(120, 120, 120, 0.2);
      
  height: 46px;
      
  width: 46px;
      
  cursor: pointer;
      
}
      
#cssmenu.small-screen .submenu-button.submenu-opened {
      
  background: #6269cd;
      
}
      
#cssmenu.small-screen ul ul .submenu-button {
      
  height: 34px;
      
  width: 34px;
      
}
      
#cssmenu.small-screen .submenu-button:after {
      
  position: absolute;
      
  top: 22px;
      
  right: 19px;
      
  width: 8px;
      
  height: 2px;
      
  display: block;
      
  background: #dddddd;
      
  content: '';
      
}
      
#cssmenu.small-screen ul ul .submenu-button:after {
      
  top: 15px;
      
  right: 13px;
      
}
      
#cssmenu.small-screen .submenu-button.submenu-opened:after {
      
  background: #ffffff;
      
}
      
#cssmenu.small-screen .submenu-button:before {
      
  position: absolute;
      
  top: 19px;
      
  right: 22px;
      
  display: block;
      
  width: 2px;
      
  height: 8px;
      
  background: #dddddd;
      
  content: '';
      
}
      
#cssmenu.small-screen ul ul .submenu-button:before {
      
  top: 12px;
      
  right: 16px;
      
}
      
#cssmenu.small-screen .submenu-button.submenu-opened:before {
      
  display: none;
      
}
      
#cssmenu.small-screen.select-list {
      
  padding: 5px;
      
}

      <!DOCTYPE html>
      
<html>
      
<head>
      
<meta charset="UTF-8">
      

      
<!-- jQuery -->
      
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
      

      
<!-- MenuMaker Plugin -->
      
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
      

      
<!-- Icon Library -->
      
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
      

      
<title>Test</title>
      
</head>
      

      
<body>
      
<div id="cssmenu">
      
  <ul>
      
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
      
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
      
        <ul>
      
           <li><a href="#">Sub menu 1</a>
      
              <ul>
      
                 <li><a href="#">Child menu 1</a></li>
      
                 <li><a href="#">Child menu 2</a></li>
      
              </ul>
      
           </li>
      
           <li><a href="#">Sub menu 2</a>
      
              <ul>
      
                 <li><a href="#">Child menu 1</a></li>
      
                 <li><a href="#">Child menu 2</a>
      
                    <ul>
      
                       <li><a href="#">Grand menu</a></li>
      
                    </ul>
      
                 </li>
      
              </ul>
      
           </li>
      
           <li><a href="#">Sub menu 3</a></li>
      
        </ul>
      
     </li>
      
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
      
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
      
  </ul>
      
</div>
      
</body>
      

      
</html>








      share|improve this answer























        up vote
        0
        down vote










        up vote
        0
        down vote









        I have improved your code, it works well on the desktop and on the Smartphone






        $("#cssmenu").menumaker({
        
    title: "Menu",
        
    breakpoint: 768,
        
    format: "multitoggle"
        
});

        @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
        
#cssmenu,
        
#cssmenu ul,
        
#cssmenu ul li,
        
#cssmenu ul li a,
        
#cssmenu #menu-button {
        
  margin: 0;
        
  padding: 0;
        
  border: 0;
        
  list-style: none;
        
  line-height: 1;
        
  display: block;
        
  position: relative;
        
  -webkit-box-sizing: border-box;
        
  -moz-box-sizing: border-box;
        
  box-sizing: border-box;
        
}
        
#cssmenu:after,
        
#cssmenu > ul:after {
        
  content: ".";
        
  display: block;
        
  clear: both;
        
  visibility: hidden;
        
  line-height: 0;
        
  height: 0;
        
}
        
#cssmenu #menu-button {
        
  display: none;
        
}
        
#cssmenu {
        
  font-family: Montserrat, sans-serif;
        
  background: #757bd3;
        
}
        
#cssmenu > ul > li {
        
  float: left;
        
}
        
#cssmenu.align-center > ul {
        
  font-size: 0;
        
  text-align: center;
        
}
        
#cssmenu.align-center > ul > li {
        
  display: inline-block;
        
  float: none;
        
}
        
#cssmenu.align-center ul ul {
        
  text-align: left;
        
}
        
#cssmenu.align-right > ul > li {
        
  float: right;
        
}
        
#cssmenu > ul > li > a {
        
  padding: 17px;
        
  font-size: 12px;
        
  letter-spacing: 1px;
        
  text-decoration: none;
        
  color: #dddddd;
        
  font-weight: 700;
        
  text-transform: uppercase;
        
}
        
#cssmenu > ul > li:hover > a {
        
  color: #ffffff;
        
}
        
#cssmenu > ul > li.has-sub > a {
        
  padding-right: 30px;
        
}
        
#cssmenu > ul > li.has-sub > a:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu > ul > li.has-sub > a:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu > ul > li.has-sub:hover > a:before {
        
  top: 23px;
        
  height: 0;
        
}
        
#cssmenu ul ul {
        
  position: absolute;
        
  left: -9999px;
        
}
        
#cssmenu.align-right ul ul {
        
  text-align: right;
        
}
        
#cssmenu ul ul li {
        
  height: 0;
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu li:hover > ul {
        
  left: auto;
        
}
        
#cssmenu.align-right li:hover > ul {
        
  left: auto;
        
  right: 0;
        
}
        
#cssmenu li:hover > ul > li {
        
  height: 35px;
        
}
        
#cssmenu ul ul ul {
        
  margin-left: 100%;
        
  top: 0;
        
}
        
#cssmenu.align-right ul ul ul {
        
  margin-left: 0;
        
  margin-right: 100%;
        
}
        
#cssmenu ul ul li a {
        
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
        
  padding: 11px 15px;
        
  width: 170px;
        
  font-size: 12px;
        
  text-decoration: none;
        
  color: #000000;
        
  font-weight: 400;
        
  background: #d8d8d8;
        
}
        
#cssmenu ul ul li:last-child > a,
        
#cssmenu ul ul li.last-item > a {
        
  border-bottom: 0;
        
}
        
#cssmenu ul ul li:hover > a,
        
#cssmenu ul ul li a:hover {
        
  color: #ffffff;
        
}
        
#cssmenu ul ul li.has-sub > a:after {
        
  position: absolute;
        
  top: 16px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #000000;
        
  content: '';
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:after {
        
  right: auto;
        
  left: 11px;
        
}
        
#cssmenu ul ul li.has-sub > a:before {
        
  position: absolute;
        
  top: 13px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #000000;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:before {
        
  right: auto;
        
  left: 14px;
        
}
        
#cssmenu ul ul > li.has-sub:hover > a:before {
        
  top: 17px;
        
  height: 0;
        
}
        
#cssmenu.small-screen {
        
  width: 100%;
        
}
        
#cssmenu.small-screen ul {
        
  width: 100%;
        
  display: none;
        
}
        
#cssmenu.small-screen.align-center > ul {
        
  text-align: left;
        
}
        
#cssmenu.small-screen ul li {
        
  width: 100%;
        
  border-top: 1px solid rgba(120, 120, 120, 0.2);
        
}
        
#cssmenu.small-screen ul ul li,
        
#cssmenu.small-screen li:hover > ul > li {
        
  height: auto;
        
}
        
#cssmenu.small-screen ul li a,
        
#cssmenu.small-screen ul ul li a {
        
  width: 100%;
        
  border-bottom: 0;
        
}
        
#cssmenu.small-screen > ul > li {
        
  float: none;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  padding-left: 25px;
        
}
        
#cssmenu.small-screen ul ul ul li a {
        
  padding-left: 35px;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  color: #dddddd;
        
  background: none;
        
}
        
#cssmenu.small-screen ul ul li:hover > a,
        
#cssmenu.small-screen ul ul li.active > a {
        
  color: #ffffff;
        
}
        
#cssmenu.small-screen ul ul,
        
#cssmenu.small-screen ul ul ul,
        
#cssmenu.small-screen.align-right ul ul {
        
  position: relative;
        
  left: 0;
        
  width: 100%;
        
  margin: 0;
        
  text-align: left;
        
}
        
#cssmenu.small-screen > ul > li.has-sub > a:after,
        
#cssmenu.small-screen > ul > li.has-sub > a:before,
        
#cssmenu.small-screen ul ul > li.has-sub > a:after,
        
#cssmenu.small-screen ul ul > li.has-sub > a:before {
        
  display: none;
        
}
        
#cssmenu.small-screen #menu-button {
        
  display: block;
        
  padding: 17px;
        
  color: #dddddd;
        
  cursor: pointer;
        
  font-size: 12px;
        
  text-transform: uppercase;
        
  font-weight: 700;
        
}
        
#cssmenu.small-screen #menu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 17px;
        
  display: block;
        
  height: 4px;
        
  width: 20px;
        
  border-top: 2px solid #dddddd;
        
  border-bottom: 2px solid #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button:before {
        
  position: absolute;
        
  top: 16px;
        
  right: 17px;
        
  display: block;
        
  height: 2px;
        
  width: 20px;
        
  background: #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:after {
        
  top: 23px;
        
  border: 0;
        
  height: 2px;
        
  width: 15px;
        
  background: #ffffff;
        
  -webkit-transform: rotate(45deg);
        
  -moz-transform: rotate(45deg);
        
  -ms-transform: rotate(45deg);
        
  -o-transform: rotate(45deg);
        
  transform: rotate(45deg);
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:before {
        
  top: 23px;
        
  background: #ffffff;
        
  width: 15px;
        
  -webkit-transform: rotate(-45deg);
        
  -moz-transform: rotate(-45deg);
        
  -ms-transform: rotate(-45deg);
        
  -o-transform: rotate(-45deg);
        
  transform: rotate(-45deg);
        
}
        
#cssmenu.small-screen .submenu-button {
        
  position: absolute;
        
  z-index: 99;
        
  right: 0;
        
  top: 0;
        
  display: block;
        
  border-left: 1px solid rgba(120, 120, 120, 0.2);
        
  height: 46px;
        
  width: 46px;
        
  cursor: pointer;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened {
        
  background: #6269cd;
        
}
        
#cssmenu.small-screen ul ul .submenu-button {
        
  height: 34px;
        
  width: 34px;
        
}
        
#cssmenu.small-screen .submenu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 19px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:after {
        
  top: 15px;
        
  right: 13px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:after {
        
  background: #ffffff;
        
}
        
#cssmenu.small-screen .submenu-button:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 22px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:before {
        
  top: 12px;
        
  right: 16px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:before {
        
  display: none;
        
}
        
#cssmenu.small-screen.select-list {
        
  padding: 5px;
        
}

        <!DOCTYPE html>
        
<html>
        
<head>
        
<meta charset="UTF-8">
        

        
<!-- jQuery -->
        
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

        
<!-- MenuMaker Plugin -->
        
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
        

        
<!-- Icon Library -->
        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        

        
<title>Test</title>
        
</head>
        

        
<body>
        
<div id="cssmenu">
        
  <ul>
        
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        
        <ul>
        
           <li><a href="#">Sub menu 1</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a></li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 2</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a>
        
                    <ul>
        
                       <li><a href="#">Grand menu</a></li>
        
                    </ul>
        
                 </li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 3</a></li>
        
        </ul>
        
     </li>
        
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
        
  </ul>
        
</div>
        
</body>
        

        
</html>








        share|improve this answer












        I have improved your code, it works well on the desktop and on the Smartphone






        $("#cssmenu").menumaker({
        
    title: "Menu",
        
    breakpoint: 768,
        
    format: "multitoggle"
        
});

        @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
        
#cssmenu,
        
#cssmenu ul,
        
#cssmenu ul li,
        
#cssmenu ul li a,
        
#cssmenu #menu-button {
        
  margin: 0;
        
  padding: 0;
        
  border: 0;
        
  list-style: none;
        
  line-height: 1;
        
  display: block;
        
  position: relative;
        
  -webkit-box-sizing: border-box;
        
  -moz-box-sizing: border-box;
        
  box-sizing: border-box;
        
}
        
#cssmenu:after,
        
#cssmenu > ul:after {
        
  content: ".";
        
  display: block;
        
  clear: both;
        
  visibility: hidden;
        
  line-height: 0;
        
  height: 0;
        
}
        
#cssmenu #menu-button {
        
  display: none;
        
}
        
#cssmenu {
        
  font-family: Montserrat, sans-serif;
        
  background: #757bd3;
        
}
        
#cssmenu > ul > li {
        
  float: left;
        
}
        
#cssmenu.align-center > ul {
        
  font-size: 0;
        
  text-align: center;
        
}
        
#cssmenu.align-center > ul > li {
        
  display: inline-block;
        
  float: none;
        
}
        
#cssmenu.align-center ul ul {
        
  text-align: left;
        
}
        
#cssmenu.align-right > ul > li {
        
  float: right;
        
}
        
#cssmenu > ul > li > a {
        
  padding: 17px;
        
  font-size: 12px;
        
  letter-spacing: 1px;
        
  text-decoration: none;
        
  color: #dddddd;
        
  font-weight: 700;
        
  text-transform: uppercase;
        
}
        
#cssmenu > ul > li:hover > a {
        
  color: #ffffff;
        
}
        
#cssmenu > ul > li.has-sub > a {
        
  padding-right: 30px;
        
}
        
#cssmenu > ul > li.has-sub > a:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu > ul > li.has-sub > a:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu > ul > li.has-sub:hover > a:before {
        
  top: 23px;
        
  height: 0;
        
}
        
#cssmenu ul ul {
        
  position: absolute;
        
  left: -9999px;
        
}
        
#cssmenu.align-right ul ul {
        
  text-align: right;
        
}
        
#cssmenu ul ul li {
        
  height: 0;
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu li:hover > ul {
        
  left: auto;
        
}
        
#cssmenu.align-right li:hover > ul {
        
  left: auto;
        
  right: 0;
        
}
        
#cssmenu li:hover > ul > li {
        
  height: 35px;
        
}
        
#cssmenu ul ul ul {
        
  margin-left: 100%;
        
  top: 0;
        
}
        
#cssmenu.align-right ul ul ul {
        
  margin-left: 0;
        
  margin-right: 100%;
        
}
        
#cssmenu ul ul li a {
        
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
        
  padding: 11px 15px;
        
  width: 170px;
        
  font-size: 12px;
        
  text-decoration: none;
        
  color: #000000;
        
  font-weight: 400;
        
  background: #d8d8d8;
        
}
        
#cssmenu ul ul li:last-child > a,
        
#cssmenu ul ul li.last-item > a {
        
  border-bottom: 0;
        
}
        
#cssmenu ul ul li:hover > a,
        
#cssmenu ul ul li a:hover {
        
  color: #ffffff;
        
}
        
#cssmenu ul ul li.has-sub > a:after {
        
  position: absolute;
        
  top: 16px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #000000;
        
  content: '';
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:after {
        
  right: auto;
        
  left: 11px;
        
}
        
#cssmenu ul ul li.has-sub > a:before {
        
  position: absolute;
        
  top: 13px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #000000;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:before {
        
  right: auto;
        
  left: 14px;
        
}
        
#cssmenu ul ul > li.has-sub:hover > a:before {
        
  top: 17px;
        
  height: 0;
        
}
        
#cssmenu.small-screen {
        
  width: 100%;
        
}
        
#cssmenu.small-screen ul {
        
  width: 100%;
        
  display: none;
        
}
        
#cssmenu.small-screen.align-center > ul {
        
  text-align: left;
        
}
        
#cssmenu.small-screen ul li {
        
  width: 100%;
        
  border-top: 1px solid rgba(120, 120, 120, 0.2);
        
}
        
#cssmenu.small-screen ul ul li,
        
#cssmenu.small-screen li:hover > ul > li {
        
  height: auto;
        
}
        
#cssmenu.small-screen ul li a,
        
#cssmenu.small-screen ul ul li a {
        
  width: 100%;
        
  border-bottom: 0;
        
}
        
#cssmenu.small-screen > ul > li {
        
  float: none;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  padding-left: 25px;
        
}
        
#cssmenu.small-screen ul ul ul li a {
        
  padding-left: 35px;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  color: #dddddd;
        
  background: none;
        
}
        
#cssmenu.small-screen ul ul li:hover > a,
        
#cssmenu.small-screen ul ul li.active > a {
        
  color: #ffffff;
        
}
        
#cssmenu.small-screen ul ul,
        
#cssmenu.small-screen ul ul ul,
        
#cssmenu.small-screen.align-right ul ul {
        
  position: relative;
        
  left: 0;
        
  width: 100%;
        
  margin: 0;
        
  text-align: left;
        
}
        
#cssmenu.small-screen > ul > li.has-sub > a:after,
        
#cssmenu.small-screen > ul > li.has-sub > a:before,
        
#cssmenu.small-screen ul ul > li.has-sub > a:after,
        
#cssmenu.small-screen ul ul > li.has-sub > a:before {
        
  display: none;
        
}
        
#cssmenu.small-screen #menu-button {
        
  display: block;
        
  padding: 17px;
        
  color: #dddddd;
        
  cursor: pointer;
        
  font-size: 12px;
        
  text-transform: uppercase;
        
  font-weight: 700;
        
}
        
#cssmenu.small-screen #menu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 17px;
        
  display: block;
        
  height: 4px;
        
  width: 20px;
        
  border-top: 2px solid #dddddd;
        
  border-bottom: 2px solid #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button:before {
        
  position: absolute;
        
  top: 16px;
        
  right: 17px;
        
  display: block;
        
  height: 2px;
        
  width: 20px;
        
  background: #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:after {
        
  top: 23px;
        
  border: 0;
        
  height: 2px;
        
  width: 15px;
        
  background: #ffffff;
        
  -webkit-transform: rotate(45deg);
        
  -moz-transform: rotate(45deg);
        
  -ms-transform: rotate(45deg);
        
  -o-transform: rotate(45deg);
        
  transform: rotate(45deg);
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:before {
        
  top: 23px;
        
  background: #ffffff;
        
  width: 15px;
        
  -webkit-transform: rotate(-45deg);
        
  -moz-transform: rotate(-45deg);
        
  -ms-transform: rotate(-45deg);
        
  -o-transform: rotate(-45deg);
        
  transform: rotate(-45deg);
        
}
        
#cssmenu.small-screen .submenu-button {
        
  position: absolute;
        
  z-index: 99;
        
  right: 0;
        
  top: 0;
        
  display: block;
        
  border-left: 1px solid rgba(120, 120, 120, 0.2);
        
  height: 46px;
        
  width: 46px;
        
  cursor: pointer;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened {
        
  background: #6269cd;
        
}
        
#cssmenu.small-screen ul ul .submenu-button {
        
  height: 34px;
        
  width: 34px;
        
}
        
#cssmenu.small-screen .submenu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 19px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:after {
        
  top: 15px;
        
  right: 13px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:after {
        
  background: #ffffff;
        
}
        
#cssmenu.small-screen .submenu-button:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 22px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:before {
        
  top: 12px;
        
  right: 16px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:before {
        
  display: none;
        
}
        
#cssmenu.small-screen.select-list {
        
  padding: 5px;
        
}

        <!DOCTYPE html>
        
<html>
        
<head>
        
<meta charset="UTF-8">
        

        
<!-- jQuery -->
        
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

        
<!-- MenuMaker Plugin -->
        
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
        

        
<!-- Icon Library -->
        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        

        
<title>Test</title>
        
</head>
        

        
<body>
        
<div id="cssmenu">
        
  <ul>
        
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        
        <ul>
        
           <li><a href="#">Sub menu 1</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a></li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 2</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a>
        
                    <ul>
        
                       <li><a href="#">Grand menu</a></li>
        
                    </ul>
        
                 </li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 3</a></li>
        
        </ul>
        
     </li>
        
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
        
  </ul>
        
</div>
        
</body>
        

        
</html>








        $("#cssmenu").menumaker({
        
    title: "Menu",
        
    breakpoint: 768,
        
    format: "multitoggle"
        
});

        @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
        
#cssmenu,
        
#cssmenu ul,
        
#cssmenu ul li,
        
#cssmenu ul li a,
        
#cssmenu #menu-button {
        
  margin: 0;
        
  padding: 0;
        
  border: 0;
        
  list-style: none;
        
  line-height: 1;
        
  display: block;
        
  position: relative;
        
  -webkit-box-sizing: border-box;
        
  -moz-box-sizing: border-box;
        
  box-sizing: border-box;
        
}
        
#cssmenu:after,
        
#cssmenu > ul:after {
        
  content: ".";
        
  display: block;
        
  clear: both;
        
  visibility: hidden;
        
  line-height: 0;
        
  height: 0;
        
}
        
#cssmenu #menu-button {
        
  display: none;
        
}
        
#cssmenu {
        
  font-family: Montserrat, sans-serif;
        
  background: #757bd3;
        
}
        
#cssmenu > ul > li {
        
  float: left;
        
}
        
#cssmenu.align-center > ul {
        
  font-size: 0;
        
  text-align: center;
        
}
        
#cssmenu.align-center > ul > li {
        
  display: inline-block;
        
  float: none;
        
}
        
#cssmenu.align-center ul ul {
        
  text-align: left;
        
}
        
#cssmenu.align-right > ul > li {
        
  float: right;
        
}
        
#cssmenu > ul > li > a {
        
  padding: 17px;
        
  font-size: 12px;
        
  letter-spacing: 1px;
        
  text-decoration: none;
        
  color: #dddddd;
        
  font-weight: 700;
        
  text-transform: uppercase;
        
}
        
#cssmenu > ul > li:hover > a {
        
  color: #ffffff;
        
}
        
#cssmenu > ul > li.has-sub > a {
        
  padding-right: 30px;
        
}
        
#cssmenu > ul > li.has-sub > a:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu > ul > li.has-sub > a:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu > ul > li.has-sub:hover > a:before {
        
  top: 23px;
        
  height: 0;
        
}
        
#cssmenu ul ul {
        
  position: absolute;
        
  left: -9999px;
        
}
        
#cssmenu.align-right ul ul {
        
  text-align: right;
        
}
        
#cssmenu ul ul li {
        
  height: 0;
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu li:hover > ul {
        
  left: auto;
        
}
        
#cssmenu.align-right li:hover > ul {
        
  left: auto;
        
  right: 0;
        
}
        
#cssmenu li:hover > ul > li {
        
  height: 35px;
        
}
        
#cssmenu ul ul ul {
        
  margin-left: 100%;
        
  top: 0;
        
}
        
#cssmenu.align-right ul ul ul {
        
  margin-left: 0;
        
  margin-right: 100%;
        
}
        
#cssmenu ul ul li a {
        
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
        
  padding: 11px 15px;
        
  width: 170px;
        
  font-size: 12px;
        
  text-decoration: none;
        
  color: #000000;
        
  font-weight: 400;
        
  background: #d8d8d8;
        
}
        
#cssmenu ul ul li:last-child > a,
        
#cssmenu ul ul li.last-item > a {
        
  border-bottom: 0;
        
}
        
#cssmenu ul ul li:hover > a,
        
#cssmenu ul ul li a:hover {
        
  color: #ffffff;
        
}
        
#cssmenu ul ul li.has-sub > a:after {
        
  position: absolute;
        
  top: 16px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #000000;
        
  content: '';
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:after {
        
  right: auto;
        
  left: 11px;
        
}
        
#cssmenu ul ul li.has-sub > a:before {
        
  position: absolute;
        
  top: 13px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #000000;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:before {
        
  right: auto;
        
  left: 14px;
        
}
        
#cssmenu ul ul > li.has-sub:hover > a:before {
        
  top: 17px;
        
  height: 0;
        
}
        
#cssmenu.small-screen {
        
  width: 100%;
        
}
        
#cssmenu.small-screen ul {
        
  width: 100%;
        
  display: none;
        
}
        
#cssmenu.small-screen.align-center > ul {
        
  text-align: left;
        
}
        
#cssmenu.small-screen ul li {
        
  width: 100%;
        
  border-top: 1px solid rgba(120, 120, 120, 0.2);
        
}
        
#cssmenu.small-screen ul ul li,
        
#cssmenu.small-screen li:hover > ul > li {
        
  height: auto;
        
}
        
#cssmenu.small-screen ul li a,
        
#cssmenu.small-screen ul ul li a {
        
  width: 100%;
        
  border-bottom: 0;
        
}
        
#cssmenu.small-screen > ul > li {
        
  float: none;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  padding-left: 25px;
        
}
        
#cssmenu.small-screen ul ul ul li a {
        
  padding-left: 35px;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  color: #dddddd;
        
  background: none;
        
}
        
#cssmenu.small-screen ul ul li:hover > a,
        
#cssmenu.small-screen ul ul li.active > a {
        
  color: #ffffff;
        
}
        
#cssmenu.small-screen ul ul,
        
#cssmenu.small-screen ul ul ul,
        
#cssmenu.small-screen.align-right ul ul {
        
  position: relative;
        
  left: 0;
        
  width: 100%;
        
  margin: 0;
        
  text-align: left;
        
}
        
#cssmenu.small-screen > ul > li.has-sub > a:after,
        
#cssmenu.small-screen > ul > li.has-sub > a:before,
        
#cssmenu.small-screen ul ul > li.has-sub > a:after,
        
#cssmenu.small-screen ul ul > li.has-sub > a:before {
        
  display: none;
        
}
        
#cssmenu.small-screen #menu-button {
        
  display: block;
        
  padding: 17px;
        
  color: #dddddd;
        
  cursor: pointer;
        
  font-size: 12px;
        
  text-transform: uppercase;
        
  font-weight: 700;
        
}
        
#cssmenu.small-screen #menu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 17px;
        
  display: block;
        
  height: 4px;
        
  width: 20px;
        
  border-top: 2px solid #dddddd;
        
  border-bottom: 2px solid #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button:before {
        
  position: absolute;
        
  top: 16px;
        
  right: 17px;
        
  display: block;
        
  height: 2px;
        
  width: 20px;
        
  background: #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:after {
        
  top: 23px;
        
  border: 0;
        
  height: 2px;
        
  width: 15px;
        
  background: #ffffff;
        
  -webkit-transform: rotate(45deg);
        
  -moz-transform: rotate(45deg);
        
  -ms-transform: rotate(45deg);
        
  -o-transform: rotate(45deg);
        
  transform: rotate(45deg);
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:before {
        
  top: 23px;
        
  background: #ffffff;
        
  width: 15px;
        
  -webkit-transform: rotate(-45deg);
        
  -moz-transform: rotate(-45deg);
        
  -ms-transform: rotate(-45deg);
        
  -o-transform: rotate(-45deg);
        
  transform: rotate(-45deg);
        
}
        
#cssmenu.small-screen .submenu-button {
        
  position: absolute;
        
  z-index: 99;
        
  right: 0;
        
  top: 0;
        
  display: block;
        
  border-left: 1px solid rgba(120, 120, 120, 0.2);
        
  height: 46px;
        
  width: 46px;
        
  cursor: pointer;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened {
        
  background: #6269cd;
        
}
        
#cssmenu.small-screen ul ul .submenu-button {
        
  height: 34px;
        
  width: 34px;
        
}
        
#cssmenu.small-screen .submenu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 19px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:after {
        
  top: 15px;
        
  right: 13px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:after {
        
  background: #ffffff;
        
}
        
#cssmenu.small-screen .submenu-button:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 22px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:before {
        
  top: 12px;
        
  right: 16px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:before {
        
  display: none;
        
}
        
#cssmenu.small-screen.select-list {
        
  padding: 5px;
        
}

        <!DOCTYPE html>
        
<html>
        
<head>
        
<meta charset="UTF-8">
        

        
<!-- jQuery -->
        
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

        
<!-- MenuMaker Plugin -->
        
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
        

        
<!-- Icon Library -->
        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        

        
<title>Test</title>
        
</head>
        

        
<body>
        
<div id="cssmenu">
        
  <ul>
        
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        
        <ul>
        
           <li><a href="#">Sub menu 1</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a></li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 2</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a>
        
                    <ul>
        
                       <li><a href="#">Grand menu</a></li>
        
                    </ul>
        
                 </li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 3</a></li>
        
        </ul>
        
     </li>
        
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
        
  </ul>
        
</div>
        
</body>
        

        
</html>





        $("#cssmenu").menumaker({
        
    title: "Menu",
        
    breakpoint: 768,
        
    format: "multitoggle"
        
});

        @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
        
#cssmenu,
        
#cssmenu ul,
        
#cssmenu ul li,
        
#cssmenu ul li a,
        
#cssmenu #menu-button {
        
  margin: 0;
        
  padding: 0;
        
  border: 0;
        
  list-style: none;
        
  line-height: 1;
        
  display: block;
        
  position: relative;
        
  -webkit-box-sizing: border-box;
        
  -moz-box-sizing: border-box;
        
  box-sizing: border-box;
        
}
        
#cssmenu:after,
        
#cssmenu > ul:after {
        
  content: ".";
        
  display: block;
        
  clear: both;
        
  visibility: hidden;
        
  line-height: 0;
        
  height: 0;
        
}
        
#cssmenu #menu-button {
        
  display: none;
        
}
        
#cssmenu {
        
  font-family: Montserrat, sans-serif;
        
  background: #757bd3;
        
}
        
#cssmenu > ul > li {
        
  float: left;
        
}
        
#cssmenu.align-center > ul {
        
  font-size: 0;
        
  text-align: center;
        
}
        
#cssmenu.align-center > ul > li {
        
  display: inline-block;
        
  float: none;
        
}
        
#cssmenu.align-center ul ul {
        
  text-align: left;
        
}
        
#cssmenu.align-right > ul > li {
        
  float: right;
        
}
        
#cssmenu > ul > li > a {
        
  padding: 17px;
        
  font-size: 12px;
        
  letter-spacing: 1px;
        
  text-decoration: none;
        
  color: #dddddd;
        
  font-weight: 700;
        
  text-transform: uppercase;
        
}
        
#cssmenu > ul > li:hover > a {
        
  color: #ffffff;
        
}
        
#cssmenu > ul > li.has-sub > a {
        
  padding-right: 30px;
        
}
        
#cssmenu > ul > li.has-sub > a:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu > ul > li.has-sub > a:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu > ul > li.has-sub:hover > a:before {
        
  top: 23px;
        
  height: 0;
        
}
        
#cssmenu ul ul {
        
  position: absolute;
        
  left: -9999px;
        
}
        
#cssmenu.align-right ul ul {
        
  text-align: right;
        
}
        
#cssmenu ul ul li {
        
  height: 0;
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu li:hover > ul {
        
  left: auto;
        
}
        
#cssmenu.align-right li:hover > ul {
        
  left: auto;
        
  right: 0;
        
}
        
#cssmenu li:hover > ul > li {
        
  height: 35px;
        
}
        
#cssmenu ul ul ul {
        
  margin-left: 100%;
        
  top: 0;
        
}
        
#cssmenu.align-right ul ul ul {
        
  margin-left: 0;
        
  margin-right: 100%;
        
}
        
#cssmenu ul ul li a {
        
  border-bottom: 1px solid rgba(150, 150, 150, 0.15);
        
  padding: 11px 15px;
        
  width: 170px;
        
  font-size: 12px;
        
  text-decoration: none;
        
  color: #000000;
        
  font-weight: 400;
        
  background: #d8d8d8;
        
}
        
#cssmenu ul ul li:last-child > a,
        
#cssmenu ul ul li.last-item > a {
        
  border-bottom: 0;
        
}
        
#cssmenu ul ul li:hover > a,
        
#cssmenu ul ul li a:hover {
        
  color: #ffffff;
        
}
        
#cssmenu ul ul li.has-sub > a:after {
        
  position: absolute;
        
  top: 16px;
        
  right: 11px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #000000;
        
  content: '';
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:after {
        
  right: auto;
        
  left: 11px;
        
}
        
#cssmenu ul ul li.has-sub > a:before {
        
  position: absolute;
        
  top: 13px;
        
  right: 14px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #000000;
        
  content: '';
        
  -webkit-transition: all .25s ease;
        
  -moz-transition: all .25s ease;
        
  -ms-transition: all .25s ease;
        
  -o-transition: all .25s ease;
        
  transition: all .25s ease;
        
}
        
#cssmenu.align-right ul ul li.has-sub > a:before {
        
  right: auto;
        
  left: 14px;
        
}
        
#cssmenu ul ul > li.has-sub:hover > a:before {
        
  top: 17px;
        
  height: 0;
        
}
        
#cssmenu.small-screen {
        
  width: 100%;
        
}
        
#cssmenu.small-screen ul {
        
  width: 100%;
        
  display: none;
        
}
        
#cssmenu.small-screen.align-center > ul {
        
  text-align: left;
        
}
        
#cssmenu.small-screen ul li {
        
  width: 100%;
        
  border-top: 1px solid rgba(120, 120, 120, 0.2);
        
}
        
#cssmenu.small-screen ul ul li,
        
#cssmenu.small-screen li:hover > ul > li {
        
  height: auto;
        
}
        
#cssmenu.small-screen ul li a,
        
#cssmenu.small-screen ul ul li a {
        
  width: 100%;
        
  border-bottom: 0;
        
}
        
#cssmenu.small-screen > ul > li {
        
  float: none;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  padding-left: 25px;
        
}
        
#cssmenu.small-screen ul ul ul li a {
        
  padding-left: 35px;
        
}
        
#cssmenu.small-screen ul ul li a {
        
  color: #dddddd;
        
  background: none;
        
}
        
#cssmenu.small-screen ul ul li:hover > a,
        
#cssmenu.small-screen ul ul li.active > a {
        
  color: #ffffff;
        
}
        
#cssmenu.small-screen ul ul,
        
#cssmenu.small-screen ul ul ul,
        
#cssmenu.small-screen.align-right ul ul {
        
  position: relative;
        
  left: 0;
        
  width: 100%;
        
  margin: 0;
        
  text-align: left;
        
}
        
#cssmenu.small-screen > ul > li.has-sub > a:after,
        
#cssmenu.small-screen > ul > li.has-sub > a:before,
        
#cssmenu.small-screen ul ul > li.has-sub > a:after,
        
#cssmenu.small-screen ul ul > li.has-sub > a:before {
        
  display: none;
        
}
        
#cssmenu.small-screen #menu-button {
        
  display: block;
        
  padding: 17px;
        
  color: #dddddd;
        
  cursor: pointer;
        
  font-size: 12px;
        
  text-transform: uppercase;
        
  font-weight: 700;
        
}
        
#cssmenu.small-screen #menu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 17px;
        
  display: block;
        
  height: 4px;
        
  width: 20px;
        
  border-top: 2px solid #dddddd;
        
  border-bottom: 2px solid #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button:before {
        
  position: absolute;
        
  top: 16px;
        
  right: 17px;
        
  display: block;
        
  height: 2px;
        
  width: 20px;
        
  background: #dddddd;
        
  content: '';
        
  box-sizing: content-box;
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:after {
        
  top: 23px;
        
  border: 0;
        
  height: 2px;
        
  width: 15px;
        
  background: #ffffff;
        
  -webkit-transform: rotate(45deg);
        
  -moz-transform: rotate(45deg);
        
  -ms-transform: rotate(45deg);
        
  -o-transform: rotate(45deg);
        
  transform: rotate(45deg);
        
}
        
#cssmenu.small-screen #menu-button.menu-opened:before {
        
  top: 23px;
        
  background: #ffffff;
        
  width: 15px;
        
  -webkit-transform: rotate(-45deg);
        
  -moz-transform: rotate(-45deg);
        
  -ms-transform: rotate(-45deg);
        
  -o-transform: rotate(-45deg);
        
  transform: rotate(-45deg);
        
}
        
#cssmenu.small-screen .submenu-button {
        
  position: absolute;
        
  z-index: 99;
        
  right: 0;
        
  top: 0;
        
  display: block;
        
  border-left: 1px solid rgba(120, 120, 120, 0.2);
        
  height: 46px;
        
  width: 46px;
        
  cursor: pointer;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened {
        
  background: #6269cd;
        
}
        
#cssmenu.small-screen ul ul .submenu-button {
        
  height: 34px;
        
  width: 34px;
        
}
        
#cssmenu.small-screen .submenu-button:after {
        
  position: absolute;
        
  top: 22px;
        
  right: 19px;
        
  width: 8px;
        
  height: 2px;
        
  display: block;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:after {
        
  top: 15px;
        
  right: 13px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:after {
        
  background: #ffffff;
        
}
        
#cssmenu.small-screen .submenu-button:before {
        
  position: absolute;
        
  top: 19px;
        
  right: 22px;
        
  display: block;
        
  width: 2px;
        
  height: 8px;
        
  background: #dddddd;
        
  content: '';
        
}
        
#cssmenu.small-screen ul ul .submenu-button:before {
        
  top: 12px;
        
  right: 16px;
        
}
        
#cssmenu.small-screen .submenu-button.submenu-opened:before {
        
  display: none;
        
}
        
#cssmenu.small-screen.select-list {
        
  padding: 5px;
        
}

        <!DOCTYPE html>
        
<html>
        
<head>
        
<meta charset="UTF-8">
        

        
<!-- jQuery -->
        
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
        

        
<!-- MenuMaker Plugin -->
        
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
        

        
<!-- Icon Library -->
        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        

        
<title>Test</title>
        
</head>
        

        
<body>
        
<div id="cssmenu">
        
  <ul>
        
     <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
        
        <ul>
        
           <li><a href="#">Sub menu 1</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a></li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 2</a>
        
              <ul>
        
                 <li><a href="#">Child menu 1</a></li>
        
                 <li><a href="#">Child menu 2</a>
        
                    <ul>
        
                       <li><a href="#">Grand menu</a></li>
        
                    </ul>
        
                 </li>
        
              </ul>
        
           </li>
        
           <li><a href="#">Sub menu 3</a></li>
        
        </ul>
        
     </li>
        
     <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
        
     <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
        
  </ul>
        
</div>
        
</body>
        

        
</html>






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 24 at 17:23









        Husam Ebish

        226217




        226217






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid …



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53234911%2fsub-menu-not-following-main-menu-when-scrolling-horizontally%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            -

            Popular posts from this blog

            Schultheiß

            Image
            Der Titel dieses Artikels ist mehrdeutig. Weitere Bedeutungen sind unter Schultheiß (Begriffsklärung) aufgeführt. Ein Schultheiß. Holzschnitt von Peter Flötner (16. Jahrhundert) Der Schultheiß oder Schuldheiß (von althochdeutsch  sculdheizo ‚Leistung Befehlender‘, vgl. mittelniederdeutsch  schult(h)ēte , latinisiert (mittellat.) sculte(t)us , schwäbisch heute noch Schultes für „Bürgermeister“) bezeichnet einen in vielen westgermanischen Rechtsordnungen vorgesehenen Beamten, der Schuld heischt : Er hatte im Auftrag seines Herren (Landesherrn, Stadtherrn, Grundherrn) die Mitglieder einer Gemeinde zur Leistung ihrer Schuldigkeit anzuhalten, also Abgaben einzuziehen oder für das Beachten anderer Verpflichtungen Sorge zu tragen. Sprachliche Varianten des Schultheißen sind Schulte , Schultes oder Schulze . Früher wurde zwischen dem Stadtschulzen und dem Dorfschulzen unterschieden. In der städtischen Gerichts- und Gemeindeverfassung war er ein vom städtischen Rat oder vom L...
            Read more

            Verwaltungsgliederung Dänemarks

            Image
            Das Königreich Dänemark umfasst neben dem kontinentaleuropäischen Kernland auch die autonomen Außengebiete Färöer und Grönland. Die staatsrechtliche Einheit von Mutterland und ehemaligen Besitzungen wird als „Reichsgemeinschaft“ (dänisch rigsfællesskabet ) bezeichnet. Die Verwaltungsgliederung des dänischen Kernlandes umfasst seit dem 1. Januar 2007 fünf Regionen und 98 Kommunen. Die Amtsbezirke/Kreise (dän. amt ) wurden im Zuge einer Gebietsreform abgeschafft. Ihre Zuständigkeiten wurden auf Regional- und kommunale Ebene verteilt. Inhaltsverzeichnis 1 Regionen 2 Kommunen 3 Historische Verwaltungsgliederungen 3.1 Älteste Strukturen 3.2 Bistümer (ab 10. Jahrhundert) 3.3 17. und 18. Jahrhundert 3.4 Von 1793 bis 1970 3.5 Von 1970 bis 2007 3.5.1 Fusionen bis Ende 2006 und große Kommunalgebietsreform 4 Literatur 5 Einzelnachweise 6 Weblinks Regionen | → Hauptartikel : Region (Dänemark) Dänemarks Regionen (seit 2007...
            Read more

            Liste der Kulturdenkmale in Wilsdruff

            Image
            Wappen von Wilsdruff Die Liste der Kulturdenkmale in Wilsdruff enthält die Kulturdenkmale in Wilsdruff. Die Anmerkungen sind zu beachten. Diese Liste ist eine Teilliste der Liste der Kulturdenkmale im Landkreis Sächsische Schweiz-Osterzgebirge. Diese Liste ist eine Teilliste der Liste der Kulturdenkmale in Sachsen. Inhaltsverzeichnis 1 Legende 2 Wilsdruff 3 Birkenhain 4 Blankenstein 5 Braunsdorf 6 Grumbach 7 Grund 8 Helbigsdorf 9 Herzogswalde 10 Kaufbach 11 Kesselsdorf 12 Kleinopitz 13 Limbach 14 Mohorn 15 Oberhermsdorf 16 Anmerkungen 17 Ausführliche Denkmaltexte 18 Quellen 19 Weblinks Legende | Bild: zeigt ein Bild des Kulturdenkmals und gegebenenfalls einen Link zu weiteren Fotos des Kulturdenkmals Bezeichnung: Name, Bezeichnung oder die Art des Kulturdenkmals Lage: Straßenname und wenn vorhanden Hausnummer des Kulturdenkmals; Grundsortierung der Liste erfolgt nach dieser A...
            Read more