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;

}

asked Nov 10 at 0:20

RGriffiths

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

add a comment |

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;

}

asked Nov 10 at 0:20

RGriffiths

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

add a comment |

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;

}

asked Nov 10 at 0:20

RGriffiths

2,233124478

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

asked Nov 10 at 0:20

RGriffiths

2,233124478

asked Nov 10 at 0:20

RGriffiths

2,233124478

asked Nov 10 at 0:20

RGriffiths

2,233124478

asked Nov 10 at 0:20

RGriffiths

2,233124478

asked Nov 10 at 0:20

RGriffiths

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

add a comment |

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

add a comment |

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>

answered Nov 24 at 17:23

Husam Ebish

226217

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

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>

answered Nov 24 at 17:23

Husam Ebish

226217

add a comment |

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>

answered Nov 24 at 17:23

Husam Ebish

226217

add a comment |

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>

answered Nov 24 at 17:23

Husam Ebish

226217

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>

answered Nov 24 at 17:23

Husam Ebish

226217

answered Nov 24 at 17:23

Husam Ebish

226217

answered Nov 24 at 17:23

Husam Ebish

226217

answered Nov 24 at 17:23

Husam Ebish

226217

add a comment |

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

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Xtykutl