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















































             


            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

            Kleinkühnau

            Image
            Kleinkühnau Stadt Dessau-Roßlau 51.839444444444 12.184444444444 57 Koordinaten: 51° 50′ 22″  N , 12° 11′ 4″  O Höhe: 57 m Fläche: 9,93 km² Einwohner: 1649  (31. Dez. 2011) Bevölkerungsdichte: 166 Einwohner/km² Eingemeindung: 1. Oktober 1923 Eingemeindet nach: Dessau Postleitzahl: 06846 Vorwahl: 0340 Rathaus (Amtshaus Kühnau e. V.) Ev. Kirche Kleinkühnau Kleinkühnau ist ein Stadtteil von Dessau-Roßlau, einer kreisfreien Stadt im Bundesland Sachsen-Anhalt. Er liegt ungefähr vier Kilometer westlich des Stadtzentrums. Südlich der Kühnauer Straße befinden sich der Flugplatz Dessau, das Technikmuseum Hugo Junkers sowie der Standort der Polizeidirektion Sachsen-Anhalt Ost. Kleinkühnau hat 1649 Einwohner (Stand 31. Dezember 2011). Inhaltsverzeichnis 1 Geschichte 1.1 Bevölkerungsentwicklung 2 Siehe auch 3 Weblinks 4 E...
            Read more

            Makov (Slowakei)

            Image
            Makov Wappen Karte Makov Basisdaten Staat: Slowakei Kraj: Žilinský kraj Okres: Čadca Region: Kysuce Fläche: 46,052 km² Einwohner: 1.720 (31. Dez. 2017) Bevölkerungsdichte: 37 Einwohner je km² Höhe: 583  m n.m. Postleitzahl: 023 56 Telefonvorwahl: 0 41 Geographische Lage: 49° 22′  N , 18° 29′  O 49.366666666667 18.483333333333 583 Koordinaten: 49° 22′ 0″  N , 18° 29′ 0″  O Kfz-Kennzeichen: CA Kód obce: 509299 Struktur Gemeindeart: Gemeinde Verwaltung (Stand: November 2014) Bürgermeister: Martin Pavlík Adresse: Obecný úrad Makov 60 02356 Makov Webpräsenz: www.makov.sk Statistikinformation auf statistics.sk Makov (ungarisch Trencsénmakó – älter auch Makó , polnisch Maków ) ist eine Gemeinde in der Nordwestslowakei. Inhaltsverzeichnis 1 Geographie 1.1 Bevölkerung 2 Ge...
            Read more

            Deutsches Schauspielhaus

            Image
            Deutsches Schauspielhaus Hamburg Aktie über 1000 Mark der Deutsche Schauspielhaus AG vom 20. Juni 1899 Das Deutsche Schauspielhaus im Hamburger Stadtteil St. Georg ist mit 1200 Plätzen das größte Sprechtheater Deutschlands. Entstanden ist es durch eine private Initiative von Bürgern und der 1899 gegründeten „Aktiengesellschaft Deutsches Schauspielhaus“. Die Pläne stammen von dem Wiener Architekturbüro Fellner und Helmer, die das neobarocke Gebäude nach dem Vorbild des Wiener Volkstheaters gestalteten. Am 15. September 1900 wurde das Theater mit einer Aufführung der Iphigenie auf Tauris feierlich eröffnet. Der Name Deutsches Schauspielhaus knüpft an die Tradition des Hamburger Nationaltheaters an, das Mitte des 18. Jahrhunderts durch Hamburger Bürger betrieben wurde und an dem Gotthold Ephraim Lessing als Dramaturg tätig war. Das Schauspielhaus hat die Theatergeschichte der Stadt im 20. Jahrhundert entsc...
            Read more