How I Can fix my menu, I would want the space also for the element in dropdown, (the element with white...
up vote
2
down vote
favorite
The problem is this, I can not get to readjust the space in my list containing my menu with with her elements:
I want get the space to show the with white background and I would want the list occuped all space available.
I would to have this effect:
enter image description here
Html code:
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current">Home</a>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Servizi</a>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Galleria</a>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>
The lists under link are the submenus.
Css code:
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
line-height: 32px;
padding: 0 15px;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
background: #fff;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
This code is only for the tag nav in my page html.
Thanks for the help.
html css
asked Nov 20 at 13:01
Carlo17
183
add a comment |
up vote
2
down vote
favorite
The problem is this, I can not get to readjust the space in my list containing my menu with with her elements:
I want get the space to show the with white background and I would want the list occuped all space available.
I would to have this effect:
enter image description here
Html code:
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current">Home</a>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Servizi</a>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Galleria</a>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>
The lists under link are the submenus.
Css code:
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
line-height: 32px;
padding: 0 15px;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
background: #fff;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
This code is only for the tag nav in my page html.
Thanks for the help.
html css
asked Nov 20 at 13:01
Carlo17
183
Just to make it clear: You want the nav elements to have the same width as your dropdown, correct?
– Michael
Nov 20 at 13:07
Can you post an image how it supposed to look like?
– passatgt
Nov 20 at 13:07
I posted the image of the result that I want
– Carlo17
Nov 21 at 17:34
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
The problem is this, I can not get to readjust the space in my list containing my menu with with her elements:
I want get the space to show the with white background and I would want the list occuped all space available.
I would to have this effect:
enter image description here
Html code:
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current">Home</a>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Servizi</a>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Galleria</a>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>
The lists under link are the submenus.
Css code:
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
line-height: 32px;
padding: 0 15px;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
background: #fff;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
This code is only for the tag nav in my page html.
Thanks for the help.
html css
asked Nov 20 at 13:01
Carlo17
183
The problem is this, I can not get to readjust the space in my list containing my menu with with her elements:
I want get the space to show the with white background and I would want the list occuped all space available.
I would to have this effect:
enter image description here
Html code:
<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current">Home</a>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Servizi</a>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link">Galleria</a>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>
The lists under link are the submenus.
Css code:
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
line-height: 32px;
padding: 0 15px;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
background: #fff;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover>ul {
display: block
}
This code is only for the tag nav in my page html.
Thanks for the help.
html css
html css
asked Nov 20 at 13:01
Carlo17
183
asked Nov 20 at 13:01
Carlo17
183
edited Nov 21 at 17:32
asked Nov 20 at 13:01
Carlo17
183
asked Nov 20 at 13:01
Carlo17
183
asked Nov 20 at 13:01
Carlo17
183
183
Just to make it clear: You want the nav elements to have the same width as your dropdown, correct?
– Michael
Nov 20 at 13:07
Can you post an image how it supposed to look like?
– passatgt
Nov 20 at 13:07
I posted the image of the result that I want
– Carlo17
Nov 21 at 17:34
add a comment |
Just to make it clear: You want the nav elements to have the same width as your dropdown, correct?
– Michael
Nov 20 at 13:07
Can you post an image how it supposed to look like?
– passatgt
Nov 20 at 13:07
I posted the image of the result that I want
– Carlo17
Nov 21 at 17:34
Just to make it clear: You want the nav elements to have the same width as your dropdown, correct?
– Michael
Nov 20 at 13:07
Just to make it clear: You want the nav elements to have the same width as your dropdown, correct?
– Michael
Nov 20 at 13:07
Can you post an image how it supposed to look like?
– passatgt
Nov 20 at 13:07
Can you post an image how it supposed to look like?
– passatgt
Nov 20 at 13:07
I posted the image of the result that I want
– Carlo17
Nov 21 at 17:34
I posted the image of the result that I want
– Carlo17
Nov 21 at 17:34
add a comment |
4 Answers
4
active
oldest
votes
up vote
0
down vote
accepted
HTML:
Do not forget to copy the tags that in <head> to your html file.
<!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="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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>
CSS:
@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: #333333;
}
#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: #dddddd;
font-weight: 400;
background: #333333;
}
#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: #dddddd;
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: #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.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: #262626;
}
#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;
}
JavaScript:
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
The results on Desktop:
The result on smartphone:
answered Nov 24 at 16:07
Husam Ebish
226217
add a comment |
up vote
0
down vote
Assuming I understood your questions correctly, I made an example using flexbox. I also added some classes, to make the css readable.
#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 12:17
Shivam Sharma
10912
answered Nov 20 at 13:28
Michael
254111
add a comment |
up vote
0
down vote
try this and set own style
nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 13:02
Shivam Sharma
10912
answered Nov 20 at 13:54
New Developer
762
add a comment |
up vote
0
down vote
Another style:
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 16:36
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393569%2fhow-i-can-fix-my-menu-i-would-want-the-space-also-for-the-element-in-dropdown%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
HTML:
Do not forget to copy the tags that in <head> to your html file.
<!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="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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>
CSS:
@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: #333333;
}
#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: #dddddd;
font-weight: 400;
background: #333333;
}
#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: #dddddd;
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: #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.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: #262626;
}
#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;
}
JavaScript:
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
The results on Desktop:
The result on smartphone:
answered Nov 24 at 16:07
Husam Ebish
226217
add a comment |
up vote
0
down vote
accepted
HTML:
Do not forget to copy the tags that in <head> to your html file.
<!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="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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>
CSS:
@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: #333333;
}
#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: #dddddd;
font-weight: 400;
background: #333333;
}
#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: #dddddd;
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: #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.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: #262626;
}
#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;
}
JavaScript:
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
The results on Desktop:
The result on smartphone:
answered Nov 24 at 16:07
Husam Ebish
226217
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
HTML:
Do not forget to copy the tags that in <head> to your html file.
<!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="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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>
CSS:
@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: #333333;
}
#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: #dddddd;
font-weight: 400;
background: #333333;
}
#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: #dddddd;
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: #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.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: #262626;
}
#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;
}
JavaScript:
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
The results on Desktop:
The result on smartphone:
answered Nov 24 at 16:07
Husam Ebish
226217
HTML:
Do not forget to copy the tags that in <head> to your html file.
<!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="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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>
CSS:
@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: #333333;
}
#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: #dddddd;
font-weight: 400;
background: #333333;
}
#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: #dddddd;
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: #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.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: #262626;
}
#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;
}
JavaScript:
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
The results on Desktop:
The result on smartphone:
answered Nov 24 at 16:07
Husam Ebish
226217
answered Nov 24 at 16:07
Husam Ebish
226217
answered Nov 24 at 16:07
Husam Ebish
226217
answered Nov 24 at 16:07
Husam Ebish
226217
226217
add a comment |
add a comment |
up vote
0
down vote
Assuming I understood your questions correctly, I made an example using flexbox. I also added some classes, to make the css readable.
#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 12:17
Shivam Sharma
10912
answered Nov 20 at 13:28
Michael
254111
add a comment |
up vote
0
down vote
Assuming I understood your questions correctly, I made an example using flexbox. I also added some classes, to make the css readable.
#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 12:17
Shivam Sharma
10912
answered Nov 20 at 13:28
Michael
254111
add a comment |
up vote
0
down vote
up vote
0
down vote
Assuming I understood your questions correctly, I made an example using flexbox. I also added some classes, to make the css readable.
#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 12:17
Shivam Sharma
10912
answered Nov 20 at 13:28
Michael
254111
Assuming I understood your questions correctly, I made an example using flexbox. I also added some classes, to make the css readable.
#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>#primary_nav_wrap ul {
display: flex;
list-style: none;
position: relative;
margin: 0;
padding: 0;
justify-content: space-between;
}
#primary_nav_wrap .nav-link {
padding: 0 20px 0 0;
}
#primary_nav_wrap ul li a {
display: block;
}
#primary_nav_wrap a {
color: black;
text-decoration: none;
}
#primary_nav_wrap .secondary-list {
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
background: #ffed00;
}
#primary_nav_wrap .secondary-list li a {
padding: 5px;
}
#primary_nav_wrap .secondary-list li:hover {
background: blue;
}
#primary_nav_wrap .secondary-list li:hover a {
color: white;
}
#primary_nav_wrap .primary-list > li:hover .secondary-list {
opacity: 1;
cursor: pointer;
pointer-events: auto;
}
.nav-drop-true::after{
content: " 25bc";
}<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul class="primary-list">
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<ul class="secondary-list">
<li><a href="#">Chi siamo</a></li>
</ul>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<ul class="secondary-list">
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<ul class="secondary-list">
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 12:17
Shivam Sharma
10912
answered Nov 20 at 13:28
Michael
254111
edited Nov 21 at 12:17
Shivam Sharma
10912
edited Nov 21 at 12:17
Shivam Sharma
10912
edited Nov 21 at 12:17
Shivam Sharma
10912
10912
answered Nov 20 at 13:28
Michael
254111
answered Nov 20 at 13:28
Michael
254111
answered Nov 20 at 13:28
Michael
254111
254111
add a comment |
add a comment |
up vote
0
down vote
try this and set own style
nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 13:02
Shivam Sharma
10912
answered Nov 20 at 13:54
New Developer
762
add a comment |
up vote
0
down vote
try this and set own style
nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 13:02
Shivam Sharma
10912
answered Nov 20 at 13:54
New Developer
762
add a comment |
up vote
0
down vote
up vote
0
down vote
try this and set own style
nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 13:02
Shivam Sharma
10912
answered Nov 20 at 13:54
New Developer
762
try this and set own style
nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>nav{
display:block;
}
a{
color:#fff;
text-decoration: none;
}
ul{
padding:0;
list-style: none;
}
#primary_nav_wrap>ul {
list-style: none;
position: relative;
display:block;
margin: 0;
background-color:teal;
}
#primary_nav_wrap>ul>li {
display: inline-block;
position: relative;
padding: 10px 0;
}
#primary_nav_wrap>ul>li>a {
display: block;
text-decoration: none;
padding: 0 15px;
}
#primary_nav_wrap>ul>li>div {
display: none;
position:absolute;
top:100%;
left:0;
background-color:#999;
padding:10px;
}
#primary_nav_wrap>ul>li>div>ul>li {
display:block;
}
#primary_nav_wrap>ul>li>div>ul>li a {
display:block;
white-space: nowrap;
padding:5px 2px;
}
#primary_nav_wrap>ul>li:hover>div {
display: block
}
.nav-drop-true::after{
content: " 25bc";
}
/*
#primary_nav_wrap ul li {
position: relative;
display:inline-block;
margin: 0;
padding: 0
}
#primary_nav_wrap>ul ul {
display:inline-block;
position: absolute;
top: 100%;
left: 0;
background-color:#fff;
padding: 0
}
#primary_nav_wrap ul ul li {
background: teal;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 10px 15px;
color: #000;
}
#primary_nav_wrap ul ul li:hover {
background: #ffed00;
}
#primary_nav_wrap ul ul a:hover {
color: #fff;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%;
}
*/<nav role="navigation" class="nav-menu w-nav-menu" id="primary_nav_wrap">
<ul>
<li>
<a href="index.html" class="nav-link w-nav-link w--current nav-drop-true">Home</a>
<div>
<ul>
<li><a href="#">Chi siamo</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Servizi</a>
<div>
<ul>
<li><a href="#">Servizi mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="vantaggi.html" class="nav-link w-nav-link">I vantaggi per voi</a>
</li>
<li>
<a href="#" class="nav-link w-nav-link nav-drop-true">Galleria</a>
<div>
<ul>
<li><a href="#">Riparazione mobile</a></li>
<li><a href="#">Oscuramento vetri</a></li>
<li><a href="#">Wrapping</a></li>
</ul>
</div>
</li>
<li>
<a href="contatti.html" class="nav-link w-nav-link">Contatti</a>
</li>
</ul>
</nav>edited Nov 21 at 13:02
Shivam Sharma
10912
answered Nov 20 at 13:54
New Developer
762
edited Nov 21 at 13:02
Shivam Sharma
10912
edited Nov 21 at 13:02
Shivam Sharma
10912
edited Nov 21 at 13:02
Shivam Sharma
10912
10912
answered Nov 20 at 13:54
New Developer
762
answered Nov 20 at 13:54
New Developer
762
answered Nov 20 at 13:54
New Developer
762
762
add a comment |
add a comment |
up vote
0
down vote
Another style:
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 16:36
Husam Ebish
226217
add a comment |
up vote
0
down vote
Another style:
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 16:36
Husam Ebish
226217
add a comment |
up vote
0
down vote
up vote
0
down vote
Another style:
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 16:36
Husam Ebish
226217
Another style:
$('#cssmenu li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 li.active').addClass('open').children('ul').show();
$('#cssmenu li.has-sub>a').on('click', function(){
$(this).removeAttr('href');
var element = $(this).parent('li');
if (element.hasClass('open')) {
element.removeClass('open');
element.find('li').removeClass('open');
element.find('ul').slideUp();
} else {
element.addClass('open');
element.children('ul').slideDown();
element.siblings('li').children('ul').slideUp();
element.siblings('li').removeClass('open');
element.siblings('li').find('li').removeClass('open');
element.siblings('li').find('ul').slideUp();
}
});@import url('https://fonts.googleapis.com/css?family=Roboto:300,400');
#cssmenu {
margin: 0;
position: relative;
font-family: 'Roboto';
line-height: 1;
width: 250px;
}
.align-right {
float: right;
}
#cssmenu ul {
margin: 0;
padding: 0;
list-style: none;
display: block;
}
#cssmenu ul li {
position: relative;
margin: 0;
padding: 0;
}
#cssmenu ul li a {
text-decoration: none;
cursor: pointer;
}
#cssmenu > ul > li > a {
color: #ddd;
text-transform: uppercase;
display: block;
padding: 20px;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #222;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-size: 16px;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
position: relative;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
#cssmenu > ul > li:last-child > a {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom: 1px solid #000;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.open > a,
#cssmenu > ul > li.active > a {
background: #151515;
color: #fff;
}
#cssmenu ul > li.has-sub > a::after {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #000;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -13px;
bottom: 0px;
z-index: 1;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub > a::before {
content: "";
position: absolute;
display: block;
width: 0;
height: 0;
border-top: 13px solid #151515;
border-botom: 13px solid transparent;
border-left: 125px solid transparent;
border-right: 125px solid transparent;
left: 0;
bottom: -12px;
bottom: -1px;
z-index: 3;
opacity: 0;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu ul > li.has-sub::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 7px solid transparent;
border-top-color: #ddd;
z-index: 2;
right: 20px;
top: 24.5px;
pointer-events: none;
}
#cssmenu ul > li:hover::after,
#cssmenu ul > li.active::after,
#cssmenu ul > li.open::after {
border-top-color: #fff;
}
#cssmenu ul > li.has-sub.open > a::after {
opacity: 1;
bottom: -13px;
}
#cssmenu ul > li.has-sub.open > a::before {
opacity: 1;
bottom: -12px;
}
#cssmenu ul ul {
display: none;
}
#cssmenu > ul > li.active > ul {
display: block;
}
#cssmenu ul ul li {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#cssmenu ul ul li a {
background: #f1f1f1;
display: block;
position: relative;
font-size: 15px;
padding: 14px 20px;
border-bottom: 1px solid #ddd;
color: #777;
font-weight: 300;
-webkit-transition: all 0.25s ease-in;
-moz-transition: all 0.25s ease-in;
-ms-transition: all 0.25s ease-in;
-o-transition: all 0.25s ease-in;
transition: all 0.25s ease-in;
}
#cssmenu ul ul li:first-child > a {
padding-top: 18px;
}
#cssmenu ul ul ul li {
border: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #e4e4e4;
color: #666;
}
#cssmenu ul ul > li.has-sub > a::after {
border-top: 13px solid #ddd;
}
#cssmenu ul ul > li.has-sub > a::before {
border-top: 13px solid #e4e4e4;
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu ul ul > li.has-sub::after {
top: 18.5px;
border-width: 6px;
border-top-color: #777;
}
#cssmenu ul ul > li:hover::after,
#cssmenu ul ul > li.active::after,
#cssmenu ul ul > li.open::after {
border-top-color: #666;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.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 class="active"><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
<li class="has-sub"><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
<ul>
<li class="has-sub"><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</li>
<li class="has-sub"><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
<li><a href="#">Menu 2.4</a></li>
</ul>
</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 16:36
Husam Ebish
226217
answered Nov 24 at 16:36
Husam Ebish
226217
answered Nov 24 at 16:36
Husam Ebish
226217
answered Nov 24 at 16:36
Husam Ebish
226217
226217
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393569%2fhow-i-can-fix-my-menu-i-would-want-the-space-also-for-the-element-in-dropdown%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
Just to make it clear: You want the nav elements to have the same width as your dropdown, correct?
– Michael
Nov 20 at 13:07
Can you post an image how it supposed to look like?
– passatgt
Nov 20 at 13:07
I posted the image of the result that I want
– Carlo17
Nov 21 at 17:34