navigation submenu showing up before hovering parent

navigation submenu showing up before hovering parent - html

I have a horizontal nav bar and I set the submenu to show only when you hover over the parent but the submenus show up when I move my mouse even a couple inches below the parents. I'm not sure how to fix that.
HTML:
<body>
<header>
<div class="nav">
<ul class="mainmenu">
<li>Home</li>
<li>Photography
<ul class="submenu">
<li>Belize</li>
<li>Fernie BC</li>
<li>Montana</li>
<li>Philippines</li>
<li>Lake Tahoe</li>
<li>The Kids</li>
</ul>
</li>
<li>Woodworking
<ul class="submenu">
<li>Furniture</li>
<li>Cutting Boards</li>
<li>Bandsaw Boxes</li>
<li>Keepsake Boxes</li>
<li>Odds &amp Ends</li>
</ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>
</html>
CSS:
body {
background-color: rgb(51,51,51);
color: white;
}
.nav > ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 100%;
}
.nav > li {
width: 230px;
border-bottom: none;
height: 50px;
line-height: 40px;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
list-style-type: none;
display:inline-block;
padding: 5px 35px 5px 35px;
position: relative;
text-align: left;
line-height: 40px;
font-size: 25px;
}
.nav > ul > li:hover {
background-color: #009933;
}
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 15px;
margin-left: -35px;
opacity: 0;
}
ul.submenu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav li:hover .submenu {
opacity: 1;
}
ul.submenu li:hover {
color: white;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding-left: 15px;
padding-right: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #009933;
color: black;
}

Will Advise adding the visibility property to be hidden on your "li" element. Opacity 0 still makes the "li" present and the "li" element extends with the submenu. See code below hope it helps.
body {
background-color: rgb(51,51,51);
color: white;
}
.nav > ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 100%;
}
.nav > li {
width: 230px;
border-bottom: none;
height: 50px;
line-height: 40px;
display: inline-block;
margin-right: -4px;
}
.nav > ul > li {
list-style-type: none;
display:inline-block;
padding: 5px 35px 5px 35px;
position: relative;
text-align: left;
line-height: 40px;
font-size: 25px;
}
.nav > ul > li:hover {
background-color: #009933;
}
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 15px;
margin-left: -35px;
opacity: 0;
visibility: hidden;
}
ul.submenu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
.nav li:hover .submenu {
opacity: 1;
visibility: visible;
}
ul.submenu li:hover {
color: white;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding-left: 15px;
padding-right: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #009933;
color: black;
}
<body>
<header>
<div class="nav">
<ul class="mainmenu">
<li>Home</li>
<li>Photography
<ul class="submenu">
<li>Belize</li>
<li>Fernie BC</li>
<li>Montana</li>
<li>Philippines</li>
<li>Lake Tahoe</li>
<li>The Kids</li>
</ul>
</li>
<li>Woodworking
<ul class="submenu">
<li>Furniture</li>
<li>Cutting Boards</li>
<li>Bandsaw Boxes</li>
<li>Keepsake Boxes</li>
<li>Odds &amp Ends</li>
</ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
</body>

Update your css change margin-top: 15px to margin-top: 5px
Set display: none; when it is hidding, so hover below the nav menu will not trigger it.
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 5px;
margin-left: -35px;
opacity: 0;
display: none;
}
Add this to your .submenu so when it should show set to display:block;:
.nav li:hover .submenu {
opacity: 1;
display: block;
z-index: 9999;
}
Now, the solution:
/* ************************************* HOME PAGE **************************************** */
#homeImage {
background: url("fernielow.jpg");
background-repeat: no-repeat;
background-size: cover;
font-family: 'Oswald', sans-serif;
color: white;
letter-spacing: 2px;
}
h1 {
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 99%;
margin-top: 450px;
}
h1 a {
text-decoration: none;
}
h1 a:visited {
text-decoration: none;
color: white;
}
h1 a:hover {
background-color: #009933;
padding: 10px 20px 10px 20px;
color: black;
}
h1 a:active {
text-decoration: underline;
}
/* ************************************* NAVIGATION **************************************** */
body {
background: url("");
background-color: rgb(51, 51, 51);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Oswald', sans-serif;
color: white;
letter-spacing: 2px;
}
/* LOOK # NAV AND THEN # UL */
.nav>ul {
list-style: none;
background-color: rgba(0, 0, 0, 0.6);
text-align: center;
padding: 10px;
width: 100%;
}
.nav>li {
width: 230px;
border-bottom: none;
height: 50px;
line-height: 40px;
display: inline-block;
margin-right: -4px;
}
/* LOOK # NAV THEN # UL THEN # LI*/
.nav>ul>li {
list-style-type: none;
display: inline-block;
padding: 5px 35px 5px 35px;
position: relative;
text-align: left;
line-height: 40px;
font-size: 25px;
}
.nav>ul>li:hover {
background-color: #009933;
}
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 5px;
margin-left: -35px;
opacity: 0;
display: none;
}
ul.submenu li {
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
}
/* WHEN HOVER OVER NAV LIST, I WANT SUBMENU TO CHANGE */
.nav li:hover .submenu {
opacity: 1;
display: block;
z-index: 9999;
}
ul.submenu li:hover {
color: white;
}
.nav a {
text-decoration: none;
color: white;
display: block;
padding-left: 15px;
padding-right: 15px;
transition: .3s background-color;
}
.nav a:hover {
background-color: #009933;
color: black;
}
/* ************************************* CONTACT PAGE **************************************** */
#contactInfo ul {
list-style: none;
background: rgba(0, 0, 0, 0.8);
border: 5px black solid;
margin-top: 175px;
margin-left: 750px;
width: 300px;
}
.contactAddress {
font-size: 25px;
text-align: center;
padding: 10px;
display: inline-block;
line-height: 40px;
}
#contactInfo ul li a:link {
text-decoration: none;
background-color: rgba(0, 153, 51, 0.8);
padding: 1px 5px 1px 5px;
color: black;
font-weight: bold;
}
#contactInfo ul li a:visited {
text-decoration: none;
}
#contactInfo ul li a:hover {
text-decoration: underline;
}
#contactInfo ul li a:active {
text-decoration: underline;
}
/* ************************************* ABOUT PAGE **************************************** */
#aboutMe {
font-size: 25px;
text-align: center;
padding: 20px;
display: inline-block;
border: 5px black solid;
background-color: rgba(0, 0, 0, 0.8);
width: 800px;
margin-top: 50px;
margin-left: 550px;
line-height: 35px;
}
/* ************************************* PHOTOGRAPHY PAGE **************************************** */
.picContainer {
width: 1032px;
float: left;
margin-top: 50px;
margin-left: 23%;
background-color: rgba(0, 0, 0, 0.8);
border: 5px black solid;
}
.picContainer h2 {
text-align: center;
font-size: 30px;
}
.pic {
width: 300px;
height: 300px;
margin: 15px;
border: 5px black solid;
}
hr {
height: 10px;
border: 0;
box-shadow: 0 10px 10px -3px black inset;
}
/* ************************************* TOP TO PAGE **************************************** */
#myBtn {
display: none;
/* Hidden by default */
position: fixed;
/* Fixed/sticky position */
bottom: 50px;
/* Place the button at the bottom of the page */
right: 50px;
/* Place the button 30px from the right */
z-index: 99;
/* Make sure it does not overlap */
border: none;
/* Remove borders */
outline: none;
/* Remove outline */
background-color: white;
/* Set a background color */
color: black;
/* Text color */
cursor: pointer;
/* Add a mouse pointer on hover */
padding: 10px;
/* Some padding */
border-radius: 3px;
/* Rounded corners */
font-family: 'Oswald', sans-serif;
letter-spacing: 2px;
font-weight: bolder;
font-size: 15px;
}
#myBtn:hover {
background-color: #009933;
/* Add a dark-grey background on hover */
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="sawdust.css" />
<title>Sawdust &amp Splinters</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<header>
<div class="nav">
<ul class="mainmenu">
<li>Home</li>
<li>Photography
<ul class="submenu">
<li>Belize</li>
<li>Fernie BC</li>
<li>Montana</li>
<li>Philippines</li>
<li>Lake Tahoe</li>
<li>The Kids</li>
</ul>
</li>
<li>Woodworking
<ul class="submenu">
<li>Furniture</li>
<li>Cutting Boards</li>
<li>Bandsaw Boxes</li>
<li>Keepsake Boxes</li>
<li>Odds &amp Ends</li>
</ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</header>
<button onclick="topFunction()" id="myBtn" title="Go to top">Go back to top</button>
<div class=picContainer>
<span id="belize">
<h2>BELIZE</h2>
<img class="pic" src="photos/belize/pano-thumb.jpg" alt="San Pedro Panoramic"/>
<img class="pic" src="photos/belize/broken-thumb.jpg" alt="San Pedro Broken Bridge"/>
<img class="pic" src="photos/belize/beach-thumb.jpg" alt="San Pedro Beach"/>
<img class="pic" src="photos/belize/ruins-thumb.jpg" alt="Xunantunich Ruins"/>
<img class="pic" src="photos/belize/zoo1-thumb.jpg" alt="San Pedro Zoo"/>
<img class="pic" src="photos/belize/zoo2-thumb.jpg" alt="San Pedro Zoo"/>
<img class="pic" src="photos/belize/zoo3-thumb.jpg" alt="San Pedro Zoo"/>
<img class="pic" src="photos/belize/zoo4-thumb.jpg" alt="San Pedro Zoo"/>
<img class="pic" src="photos/belize/cotton-tree-thumb.jpg" alt="Belize Cotton Tree"/>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="fernie">
<h2>FERNIE, BC</h2>
<img class="pic" src="photos/fernie/fernie-thumb.jpg" alt="Fernie"/>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="montana">
<h2>MONTANA</h2>
<img class="pic" src="photos/montana/dog-park-mtns-thumb.jpg" alt="Spanish Peaks"/>
<img class="pic" src="photos/montana/fairy-lake-bw-thumb.jpg" alt="Fairy Lake"/>
<img class="pic" src="photos/montana/gallatin-thumb.jpg" alt="Gallatin River"/>
<img class="pic" src="photos/montana/grotto-thumb.jpg" alt="Grott Falls"/>
<img class="pic" src="photos/montana/hyalite-thumb.jpg" alt="Hyalite River"/>
<img class="pic" src="photos/montana/mtns-thumb.jpg" alt="Mountains"/>
<img class="pic" src="photos/montana/natural-thumb.jpg" alt="Natural Bridge Falls"/>
<img class="pic" src="photos/montana/palisades1-thumb.jpg" alt="Palisades Mountain"/>
<img class="pic" src="photos/montana/palisades2-thumb.jpg" alt="Palisades Falls"/>
<img class="pic" src="photos/montana/sunset1-thumb.jpg" alt="Sunset"/>
<img class="pic" src="photos/montana/sunset2-thumb.jpg" alt="Sunset"/>
<img class="pic" src="photos/montana/sunset3-thumb.jpg" alt="Sunset"/>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="philippines">
<h2>PHILIPPINES</h2>
<img class="pic" src="photos/philippines/temple-thumb.jpg" alt="Sunken Temple"/>
<img class="pic" src="photos/philippines/katibawasan-thumb.jpg" alt="Katibawasan Falls"/>
<img class="pic" src="photos/philippines/camiguin1-thumb.jpg" alt="Camiguin"/>
<img class="pic" src="photos/philippines/camiguin2-thumb.jpg" alt="Camiguin"/>
<img class="pic" src="photos/philippines/camiguin3-thumb.jpg" alt="Camiguin"/>
<img class="pic" src="photos/philippines/camiguin4-thumb.jpg" alt="Camiguin"/>
<img class="pic" src="photos/philippines/camiguin5-thumb.jpg" alt="Camiguin"/>
</span>
<br>
<br>
<br>
<br>
<hr>
<span id="tahoe">
<h2>LAKE TAHOE</h2>
<img class="pic" src="photos/tahoe/tahoe1-thumb.jpg" alt="Lake Tahoe"/>
<img class="pic" src="photos/tahoe/tahoe2-thumb.jpg" alt="Lake Tahoe"/>
<img class="pic" src="photos/tahoe/tahoe3-thumb.jpg" alt="Lake Tahoe"/>
<img class="pic" src="photos/tahoe/tahoe4-thumb.jpg" alt="Lake Tahoe"/>
<img class="pic" src="photos/tahoe/tahoe5-thumb.jpg" alt="Lake Tahoe"/>
</span>
</div>
</body>
</html>

Just add visibility:hidden; and visibility:visible;
ul.submenu {
position: absolute;
background-color: #141414;
list-style-type: none;
width: 190px;
padding-left: 0px;
padding-top: 5px;
padding-right: 60px;
margin-top: 15px;
margin-left: -35px;
opacity: 0;
visibility:hidden; //add this
}
.nav li:hover .submenu {
opacity: 1;
visibility:visible; //add this
}

$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #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: #00ff00;
}
#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: #00ff00;
}
#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: #00ff00;
}
#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: #00ff00;
-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: #00ff00;
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: #00ff00;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-camera"></i> Photography
<ul>
<li>Belize</li>
<li>Fernie BC</li>
<li>Montana</li>
<li>Philippines</li>
<li>Lake Tahoe</li>
<li>The Kids</li>
</ul>
</li>
<li><i class="fa fa-fw fa-magic"></i> Woodworking
<ul>
<li>Furniture</li>
<li>Cutting Boards</li>
<li>Bandsaw Boxes</li>
<li>Keepsake Boxes</li>
<li>Odds & Ends</li>
</ul>
</li>
<li><i class="fa fa-fw fa-info"></i> About</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

Related

How I Can fix my menu, I would want the space also for the element in dropdown, (the element with white background)?

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>
Home
<ul>
<li>Chi siamo</li>
</ul>
</li>
<li>
Servizi
<ul>
<li>Servizi mobile</li>
<li>Oscuramento vetri</li>
<li>Wrapping</li>
</ul>
</li>
<li>
I vantaggi per voi
</li>
<li>
Galleria
<ul>
<li>Riparazione mobile</li>
<li>Oscuramento vetri</li>
<li>Wrapping</li>
</ul>
</li>
<li>
Contatti
</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:
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><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Menus
<ul>
<li>Menu 1
<ul>
<li>Menu 1.1</li>
<li>Menu 1.2</li>
<li>Menu 1.3</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2.1</li>
<li>Menu 2.2</li>
<li>Menu 2.3</li>
<li>Menu 2.4</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-cog"></i> Settings</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</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:

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>
Home
<ul class="secondary-list">
<li>Chi siamo</li>
</ul>
</li>
<li>
Servizi
<ul class="secondary-list">
<li>Servizi mobile</li>
<li>Oscuramento vetri</li>
<li>Wrapping</li>
</ul>
</li>
<li>
I vantaggi per voi
</li>
<li>
Galleria
<ul class="secondary-list">
<li>Riparazione mobile</li>
<li>Oscuramento vetri</li>
<li>Wrapping</li>
</ul>
</li>
<li>
Contatti
</li>
</ul>
</nav>

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>
Home
<div>
<ul>
<li>Chi siamo</li>
</ul>
</div>
</li>
<li>
Servizi
<div>
<ul>
<li>Servizi mobile</li>
<li>Oscuramento vetri</li>
<li>Wrapping</li>
</ul>
</div>
</li>
<li>
I vantaggi per voi
</li>
<li>
Galleria
<div>
<ul>
<li>Riparazione mobile</li>
<li>Oscuramento vetri</li>
<li>Wrapping</li>
</ul>
</div>
</li>
<li>
Contatti
</li>
</ul>
</nav>

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"><i class="fa fa-fw fa-home"></i> Home</li>
<li class="has-sub"><i class="fa fa-fw fa-bars"></i> Menus
<ul>
<li class="has-sub">Menu 1
<ul>
<li>Menu 1.1</li>
<li>Menu 1.2</li>
<li>Menu 1.3</li>
</ul>
</li>
<li class="has-sub">Menu 2
<ul>
<li>Menu 2.1</li>
<li>Menu 2.2</li>
<li>Menu 2.3</li>
<li>Menu 2.4</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-cog"></i> Settings</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

Dropdown Submenu HTML and CSS (shaking)

I need to create a very simple responsive menu with submenu. The problem that I currently have is that my submenu "shakes", and I can't figure out why.
Thanks!
This is my HTML
<header>
<a href="inicio.html" id="logo">
</a>
<nav>
<ul>
<li>Nosotros</li>
<li>Productos
<ul class="hidden">
<li>Sub 1</li>
</ul>
</li>
<li>Soluciones</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</nav>
</header>
This is my CSS:
header {
background-color: #102a42;
background-image: linear-gradient(0deg, #102a42 0%, #171c31 100%);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#logo {
margin: 20px;
float: left;
width: 230px;
height: 46px;
background: url(../images/logo-header.png) no-repeat center;
display: block;
}
nav {
float: right;
padding: 10px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../images/menu-icon.png) center;
}
ul{
list-style: none;
font-size: 1em;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
li a {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-decoration: none;
color: #fff;
font-size: 1em;
}
li a:hover {
color: #00BFA1;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 200px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
I would really appreciate any help, I need to solve this issue by today! :) I haven't been able to upload my site anywhere just yet, so I don't have a way to show you what's going on.

On your last CSS rule you can change instead the hovering on the anchor tag into the li and that way it won't be jumping. Another way is to add padding to your anchor so then you can target the hover on the anchor. Hope this helps.
Fiddle
header {
background-color: #102a42;
background-image: linear-gradient(0deg, #102a42 0%, #171c31 100%);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#logo {
margin: 20px;
float: left;
width: 230px;
height: 46px;
background: url(../images/logo-header.png) no-repeat center;
display: block;
}
nav {
float: right;
padding: 10px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../images/menu-icon.png) center;
}
ul{
list-style: none;
font-size: 1em;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
li a {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-decoration: none;
color: #fff;
font-size: 1em;
}
li a:hover {
color: #00BFA1;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 200px;
padding: 0 20px;
}
ul li:hover a + .hidden, .hidden:hover {
display: block;
}
<header>
<a href="inicio.html" id="logo">
</a>
<nav>
<ul>
<li>Nosotros</li>
<li>Productos
<ul class="hidden">
<li>Sub 1</li>
</ul>
</li>
<li>Soluciones</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</nav>
</header>

When you show .hidden, the a tag is shifting to the left and the .hidden element appears beneath the a tag. As soon as your hover rule take effect you are no longer hovering over a or .hidden so it hides, then you are hovering so the cycle repeats. Target the containing li's hover state instead of the one for the a tag.
header {
background-color: #102a42;
background-image: linear-gradient(0deg, #102a42 0%, #171c31 100%);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: 100;
}
#logo {
margin: 20px;
float: left;
width: 230px;
height: 46px;
background: url(../images/logo-header.png) no-repeat center;
display: block;
}
nav {
float: right;
padding: 10px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(../images/menu-icon.png) center;
}
ul{
list-style: none;
font-size: 1em;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
li a {
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-decoration: none;
color: #fff;
font-size: 1em;
}
li a:hover {
color: #00BFA1;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 200px;
padding: 0 20px;
}
ul li:hover a + .hidden, .hidden:hover {
display: block;
}
<header>
<a href="inicio.html" id="logo">
</a>
<nav>
<ul>
<li>Nosotros</li>
<li>Productos
<ul class="hidden">
<li>Sub 1</li>
</ul>
</li>
<li>Soluciones</li>
<li>Servicios</li>
<li>Contacto</li>
</ul>
</nav>
</header>

I hope that my submenu has solved the problem
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #102a42;
}
#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: #ffffff;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #00bfa1;
}
#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: #ffffff;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ffffff;
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: #ffffff;
font-weight: 400;
background: #102a42;
}
#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: #00bfa1;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ffffff;
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: #ffffff;
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: #ffffff;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #00bfa1;
}
#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: #ffffff;
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 #ffffff;
border-bottom: 2px solid #ffffff;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #ffffff;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #00bfa1;
-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: #00bfa1;
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: #0b1d2d;
}
#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: #ffffff;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #00bfa1;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ffffff;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-circle-o"></i> Nosotros</li>
<li><i class="fa fa-fw fa-navicon"></i> Productos
<ul>
<li>Categoría 1
<ul>
<li>Categoría 1.1
<ul>
<li>Categoría 1.1.1</li>
<li>Categoría 1.1.2</li>
<li>Categoría 1.1.3</li>
</ul>
</li>
<li>Categoría 1.2</li>
<li>Categoría 1.3</li>
<li>Categoría 1.4</li>
</ul>
</li>
<li>Categoría 2
<ul>
<li>Categoría 2.1</li>
<li>Categoría 2.2</li>
<li>Categoría 2.3</li>
</ul>
</li>
<li>Categoría 3
<ul>
<li>Categoría 3.1</li>
<li>Categoría 3.2</li>
</ul>
</li>
<li>Categoría 4
<ul>
<li>Categoría 4.1</li>
<li>Categoría 4.2</li>
<li>Categoría 4.3</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-check-circle-o"></i> Soluciones</li>
<li><i class="fa fa-fw fa-cog"></i> Servicios</li>
<li><i class="fa fa-fw fa-phone"></i> Contacto</li>
</ul>
</div>
</body>
</html>

Render a div on the right and keep the nav centered

I would like to render a nav and a div containing several buttons on the same "line" by getting the nav centered. However, I can not get a satisfying result. If I put my div after the nav, the div is displayed on the right side but under the nav, in part due to the following CSS statements:
header {
position: relative;
width: 100%
background: #333;
}
nav {
position: relative;
margin: 0 auto;
}
If I remove the header width attribute and make the nav float to the left, then I lose the centered position of my nav.
Here is the HTML code:
<div class='header'>
<div class='header-content'>
<div class='welcome-div'>
<h1>
Hello
</h1>
<header>
<nav id='drop-down-menu'>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
<div class='lang'>
<a class='hover-fade'>Français</a>
<a class='hover-fade'>English</a>
<a class='hover-fade'>日本語</a>
</div>
</header>
</div>
</div>
</div>
<div class='clear'/>
The CSS one:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
header {
position: relative;
width: 100%
background: #333;
}
nav {
position: relative;
margin: 0 auto;
}
#drop-down-menu,
#drop-down-menu ul,
#drop-down-menu ul li,
#drop-down-menu ul li a,
#drop-down-menu
#head-mobile {
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;
z-index: 1;
}
#drop-down-menu:after,
#drop-down-menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#drop-down-menu
#head-mobile {
display: none
}
#drop-down-menu {
font-family: sans-serif;
background: #333
}
#drop-down-menu > ul > li {
display:inline-block;
position: relative;
}
#drop-down-menu > ul {
text-align: center;
}
#drop-down-menu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight: 700;
}
#drop-down-menu > ul > li:hover > a,
#drop-down-menu ul li.active a {
color: #fff
}
#drop-down-menu > ul > li:hover,
#drop-down-menu ul li.active:hover,
#drop-down-menu ul li.active,
#drop-down-menu ul li.has-sub.active:hover {
background: #448D00 !important;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#drop-down-menu > ul > li.has-sub > a {
padding-right: 30px
}
#drop-down-menu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#drop-down-menu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#drop-down-menu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#drop-down-menu ul ul {
position: absolute;
left: -9999px
}
#drop-down-menu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
background: #333;
transition: all .25s ease
}
#drop-down-menu ul ul li:hover {
}
#drop-down-menu li:hover > ul {
left: auto
}
#drop-down-menu li:hover > ul > li {
height: 35px
}
#drop-down-menu ul ul ul {
margin-left: 100%;
top: 0
}
#drop-down-menu 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: #ddd;
font-weight: 400;
}
#drop-down-menu ul ul li:last-child > a,
#drop-down-menu ul ul li.last-item > a {
border-bottom: 0
}
#drop-down-menu ul ul li:hover > a,
#drop-down-menu ul ul li a:hover {
color: #fff
}
#drop-down-menu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#drop-down-menu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#drop-down-menu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#drop-down-menu ul ul li.has-sub:hover,
#drop-down-menu ul li.has-sub ul li.has-sub ul li:hover {
background: #363636;
}
#drop-down-menu ul ul ul li.active a {
border-left: 1px solid #333
}
#drop-down-menu > ul > li.has-sub > ul > li.active > a,
#drop-down-menu > ul ul > li.has-sub > ul > li.active > a {
border-top: 1px solid #333
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
background-color: #2098D1;
color: white;
}
.hover-fade {
display: inline-block;
vertical-align: middle;
font-family: 'Roboto', sans-serif;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
margin: .1em;
padding: .5em;
cursor: pointer;
background: #e1e1e1;
background-color: rgb(225, 225, 225);
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
width: 100%;
margin: 0;
padding: 0;
min-width: 1200px;
background-color: #111;
}
.header {
float: left;
min-width: 100%;
background-color: #333;
}
.header-content {
color: #ffffff;
}
.welcome-div {
text-align: center;
}
.welcome-div h1 {
padding: 1.5em;
vertical-align: middle;
font-family: 'Helvetica Neue', sans-serif;
font-size: 46px;
font-weight: 500;
line-height: 10px;
letter-spacing: 1px;
}
.lang {
float: right;
padding: 0.5em;
}
.content {
padding: 2em 0 2em 0;
margin-left: auto;
margin-right: auto;
width: 60%;
}
.box {
position: relative;
width: 80%;
margin: 0 auto;
color: #ffffff;
}
.box h1 {
padding: 0.5em 0 0.5em 0;
font-family: 'Graduate', sans-serif;
font-size: 36px;
font-weight: 600;
letter-spacing: 1px;
text-align: center;
background-color: #448D00;
}
.clear {
clear: both;
}
And a JSFiddle sample.
I would like to keep the same layout, but with the 3 buttons aligned with the nav.
Thanks for your answers.

Absolutely position your lang block in top right of header:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
header {
position: relative;
width: 100%
background: #333;
}
nav {
position: relative;
margin: 0 auto;
}
#drop-down-menu,
#drop-down-menu ul,
#drop-down-menu ul li,
#drop-down-menu ul li a,
#drop-down-menu
#head-mobile {
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;
z-index: 1;
}
#drop-down-menu:after,
#drop-down-menu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#drop-down-menu
#head-mobile {
display: none
}
#drop-down-menu {
font-family: sans-serif;
background: #333
}
#drop-down-menu > ul > li {
display:inline-block;
position: relative;
}
#drop-down-menu > ul {
text-align: center;
}
#drop-down-menu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #ddd;
font-weight: 700;
}
#drop-down-menu > ul > li:hover > a,
#drop-down-menu ul li.active a {
color: #fff
}
#drop-down-menu > ul > li:hover,
#drop-down-menu ul li.active:hover,
#drop-down-menu ul li.active,
#drop-down-menu ul li.has-sub.active:hover {
background: #448D00 !important;
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#drop-down-menu > ul > li.has-sub > a {
padding-right: 30px
}
#drop-down-menu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#drop-down-menu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#drop-down-menu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0
}
#drop-down-menu ul ul {
position: absolute;
left: -9999px
}
#drop-down-menu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
background: #333;
transition: all .25s ease
}
#drop-down-menu ul ul li:hover {
}
#drop-down-menu li:hover > ul {
left: auto
}
#drop-down-menu li:hover > ul > li {
height: 35px
}
#drop-down-menu ul ul ul {
margin-left: 100%;
top: 0
}
#drop-down-menu 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: #ddd;
font-weight: 400;
}
#drop-down-menu ul ul li:last-child > a,
#drop-down-menu ul ul li.last-item > a {
border-bottom: 0
}
#drop-down-menu ul ul li:hover > a,
#drop-down-menu ul ul li a:hover {
color: #fff
}
#drop-down-menu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#drop-down-menu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#drop-down-menu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#drop-down-menu ul ul li.has-sub:hover,
#drop-down-menu ul li.has-sub ul li.has-sub ul li:hover {
background: #363636;
}
#drop-down-menu ul ul ul li.active a {
border-left: 1px solid #333
}
#drop-down-menu > ul > li.has-sub > ul > li.active > a,
#drop-down-menu > ul ul > li.has-sub > ul > li.active > a {
border-top: 1px solid #333
}
.hover-fade:hover, .hover-fade:focus, .hover-fade:active {
background-color: #2098D1;
color: white;
}
.hover-fade {
display: inline-block;
vertical-align: middle;
font-family: 'Roboto', sans-serif;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
overflow: hidden;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: color, background-color;
transition-property: color, background-color;
margin: .1em;
padding: .5em;
cursor: pointer;
background: #e1e1e1;
background-color: rgb(225, 225, 225);
text-decoration: none;
color: #666;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
width: 100%;
margin: 0;
padding: 0;
min-width: 1200px;
background-color: #111;
}
.header {
float: left;
min-width: 100%;
background-color: #333;
}
.header-content {
color: #ffffff;
}
.welcome-div {
text-align: center;
}
.welcome-div h1 {
padding: 1.5em;
vertical-align: middle;
font-family: 'Helvetica Neue', sans-serif;
font-size: 46px;
font-weight: 500;
line-height: 10px;
letter-spacing: 1px;
}
.content {
padding: 2em 0 2em 0;
margin-left: auto;
margin-right: auto;
width: 60%;
}
.box {
position: relative;
width: 80%;
margin: 0 auto;
color: #ffffff;
}
.box h1 {
padding: 0.5em 0 0.5em 0;
font-family: 'Graduate', sans-serif;
font-size: 36px;
font-weight: 600;
letter-spacing: 1px;
text-align: center;
background-color: #448D00;
}
.clear {
clear: both;
}
.lang {
padding: 0.5em;
position: absolute;
top: 0;
right: 0;
z-index: 1000;
}
<div class='header'>
<div class='header-content'>
<div class='welcome-div'>
<h1>
Hello
</h1>
<header>
<nav id='drop-down-menu'>
<div class="button"></div>
<ul>
<li class='active'><a href='#'>HOME</a></li>
<li><a href='#'>ABOUT</a></li>
<li><a href='#'>PRODUCTS</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>BIO</a></li>
<li><a href='#'>VIDEO</a></li>
<li><a href='#'>GALLERY</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
</nav>
<div class='lang'>
<a class='hover-fade'>Français</a>
<a class='hover-fade'>English</a>
<a class='hover-fade'>日本語</a>
</div>
</header>
</div>
</div>
</div>
<div class='clear'/>

not able to access submenu on hover when content div is added

I am trying to design a website with a horizantal navigation bar and with a side bar. The problem started when I added a div (content) which is obstructing the submenu
I am adding the code for your reference. Please help me out
html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 50px 120px;
float: left;
}
.nav ul ul {
display: none;
position: fixed;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 160px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 140px;
bottom: 0;
width: 75%;
float: left;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ajax.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<!---header and side bar for user name and logout menu -starts here -->
<div class="header">
<div class="dropdown">
<a class="account">
<?php $y=$ _SESSION[ 'user']; echo "UserID: $y";?>
</a>
<div class="submenu">
<ul class="root">
<li>Dashboard
</li>
<li>Profile
</li>
<li>Settings
</li>
<li>LogOut
</li>
</ul>
</div>
</div>
</div>
<!--header ended here-->
<!--horizantal navigation bar starts here -->
<div class="nav">
<ul>
<li>Home
</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads
</li>
<li>Blog
</li>
<li>News
</li>
<li>Contact US
</li>
</ul>
</div>
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User
</li>
<li class="animate">Domain Password Reset
</li>
<li class="animate">Domain Joining
</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>

html,
body {
height: 100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;
}
.header {
width: 100%;
height: 60px;
}
/*http://jsfiddle.net/EnKwU/4/*/
.nav {
text-align: center;
width: 85%;
padding: 10px;
margin: 12px 50px 50px 120px;
float: left;
}
.nav ul ul {
display: none;
position: fixed;
z-index:999;
}
.nav ul li:hover > ul {
display: block;
}
.nav ul {
background-color: #fff;
margin-top: 10px;
padding: 0 20px;
list-style: none;
position: relative;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: -80px;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul li {
float: left;
}
.nav ul li:hover {
border-bottom: 5px solid #339966;
color: #fff;
}
.nav ul li a:hover {
color: #ffffff;
background: #1bbc9b;
}
.nav ul li a {
display: block;
padding: 0.3em 0.8em;
font-family: 'Lato', sans-serif;
font-size: 0.9em;
color: #444;
text-decoration: none;
}
.nav ul ul {
background-color: #fff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
}
.nav ul ul li {
float: none;
position: relative;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 0.85em;
}
.nav ul ul li a {
padding: 0.4em 1.2em;
color: #000;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 1em;
}
.nav ul ul:before {
content: "";
display: block;
height: 20px;
position: absolute;
top: -20px;
width: 100%;
}
.nav1 {
position: absolute;
left: 25px;
top: 160px;
bottom: 0;
width: 25%;
float: left;
}
.content {
border: 1px solid black;
position: absolute;
left: 26%;
top: 140px;
bottom: 0;
width: 75%;
float: left;
}
/*http://www.9lessons.info/2012/06/simple-drop-down-menu-with-jquery-and.html*/
.dropdown {
color: #555;
margin: 3px -22px 0 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
float: right;
}
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
clear: both;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #155FB0;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(icons/arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
/* http://codepen.io/daniesy/pen/pfxFi
icons : http://fontawesome.io/
*/
* {
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
box-sizing: border-box;
}
.float-right {
float: right;
}
.fa {
font-size: .8em;
line-height: 22px !important;
}
.nav1 {
display: inline-block;
margin: 20px 50px;
}
.nav1 label {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 ul li {
display: block;
width: 250px;
background: #ECF0F1;
padding: 15px 20px;
}
.nav1 label:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 ul li:hover {
background: #1ABC9C;
color: white;
cursor: pointer;
}
.nav1 label {
color: #1ABC9C;
border-left: 4px solid #1ABC9C;
border-radius: 0 5px 0 0;
position: relative;
z-index: 2;
}
.nav1 input {
display: none;
}
.nav1 input ~ ul {
position: relative;
visibility: hidden;
opacity: 0;
top: -20px;
z-index: 1;
}
.nav1 input:checked + label {
background: #1ABC9C;
color: white;
}
.nav1 input:checked ~ ul {
visibility: visible;
opacity: 1;
top: 0;
}
.nav1 ul li a {
text-decoration: none;
}
.nav1 ul li:nth-child(1) {
border-left: 4px solid #E74C3C;
}
.nav1 ul li:nth-child(1) .fa {
color: #E74C3C;
}
.nav1 ul li:nth-child(1):hover {
background: #E74C3C;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(2) {
border-left: 4px solid #0072B5;
}
.nav1 ul li:nth-child(2) .fa {
color: #0072B5;
}
.nav1 ul li:nth-child(2):hover {
background: #0072B5;
color: white;
font-weight: bold;
}
.nav1 ul li:nth-child(3) {
border-left: 4px solid #EC1559;
}
.nav1 ul li:nth-child(3) .fa {
color: #EC1559;
}
.nav1 ul li:nth-child(3):hover {
background: #EC1559;
color: white;
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<link href="menu.css" rel="stylesheet" type="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.ajax.js"></script>
<script type="text/javascript" src="js/func.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compliance patch for Microsoft browsers -->
<!--[if lt IE 9]><script src="js/IE9.js"></script><![endif]-->
</head>
<body>
<!---header and side bar for user name and logout menu -starts here -->
<div class="header">
<div class="dropdown">
<a class="account">
<?php $y=$ _SESSION[ 'user']; echo "UserID: $y";?>
</a>
<div class="submenu">
<ul class="root">
<li>Dashboard
</li>
<li>Profile
</li>
<li>Settings
</li>
<li>LogOut
</li>
</ul>
</div>
</div>
</div>
<!--header ended here-->
<!--horizantal navigation bar starts here -->
<div class="nav">
<ul>
<li>Home
</li>
<li>Portfolio
<ul>
<li>Active Directory
<li>HelpDesk
<li>CTS
<li>Exchange/Infra
<li>Others
</ul>
</li>
<li>Downloads
</li>
<li>Blog
</li>
<li>News
</li>
<li>Contact US
</li>
</ul>
</div>
<div class="nav1">
<label for="toggle2" id="kl">Active Directory</label>
<ul class="animate" style="display:none" id="kll">
<li class="animate">Create Domain User
</li>
<li class="animate">Domain Password Reset
</li>
<li class="animate">Domain Joining
</li>
</ul>
</div>
<div class="content">
</div>
</body>
</html>

You simply need to increase the z-index of the submenu, by e.g. adding
.nav ul ul{
z-index:99;
}
The z-index property specifies the z-order of an element and its
descendants. When elements overlap, z-order determines which one
covers the other. An element with a larger z-index generally covers an
element with a lower one.
Although a value of 99 is likely excessive in this case, z-index effectively dictates the layering precedence of the element in question. note that in order to apply, the element will also need a position set (which your sub menu's already have)

Add
.content{
z-index: -100;
}
The content was like becoming an overlay on your dropdown menu item. So the cursor active scope was getting lost.
or add z-index in positive value for the menu

How to open submenu on hover of main menu?

Hi I am making menu and submenu. I have made menu with all effect. I want to open submenu on hover of menu item, but it's not opening; it shows me already open.
My JSFiddle
#companymenu {
background-color: #999;
height:35px;
width:100%;
margin-top: -10px;
}
.companymenuul {
list-style-type: none;
}
.companymenuli {
float: left;
display:block;
line-height: 35px;
padding: 0 15px;
}
.alisting {
color:#000;
text-decoration:none;
}
.aactive {
color: #333;
background-color: #fff;
border-top: 2px solid #999;
margin-top: -2px;
}
.companymenuli a:hover {
color:#C63;
text-decoration:none;
cursor:pointer;
padding-top:10px;
padding-left:24px;
padding-right: 23px;
padding-bottom: 11px;
background-color: #fff;
border-top: 2px solid #999;
margin-top: -2px;
}
.caret {
display: inline-block;
width: 0;
height: 0;
vertical-align: top;
border-top: 4px solid #fff;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
content:"";
margin-top: 15px;
margin-left: 5px;
border-bottom-color: #fff;
filter: alpha(opacity=100);
background-image:url(images/topnav-arrow-down-white-ie6.png)no-repeat 0 0 transparent;
_display: inline;
_zoom: 1;
_width: 7px;
_height: 4px;
_margin-top: 8px;
_margin-left: 5px;
_line-height: 4px;
_border: none;
_vertical-align: baseline;
}
<div id="companymenu">
<ul class="companymenuul">
<li class="companymenuli aactive"><a class="alisting">Home</a></li>
<li class="companymenuli"><a class="alisting">Product Categories<b class="caret"></b></a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="companymenuli"><a class="alisting">Company Profile <b class="caret"></b></a>
</li>
<li class="companymenuli"><a class="alisting">Contacts</a>
</li>
</ul>
</div>
I want to open <ul> on hover of Product Categories <li>

Are you looking for something like this? JSFiddle
Give your submenu a class and add display:none; to it. After you can give your hover display:block;
So you have something like this:
.submenu{
display:none;
}
.companymenuli:hover > ul{
display:block;
}
<li class="companymenuli"><a class="alisting">Product Categories <b class="caret"></b></a>
<ul class="submenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
For removing the bullets just add list-style-type:none; to your submenu li tag. Here your updated fiddle:
Updated JSFiddle

add this css in your existing css:
.companymenuli ul {
display:none;
}
.companymenuli:hover ul {
display:block;
}
then it will work

Try below HTML and CSS
<li class="companymenuli"><a class="alisting">Product Categories <b class="caret"></b></a>
<ul class="ul">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<style>
.ul
{
display:none;
}
.companymenuli:hover .ul
{
display:block
}
</style>

Check the solution Here
http://jsfiddle.net/n7J8x/4/
By default hide Sub Menus
.submenu{
display:none;
}
Open Submenus on hover of Main Menus
.companymenuul > li:hover ul{
display: block;
}

Fully Solved answer fiddle.
I have solved it byself.
Thank You to everyone who help me or not.
.companymenuli:hover > ul{
display:block;
background-color: #999;
color:#FFF;
}
.submenu{
display:none;
position:absolute;
z-index:1;
width: 120px;
}
.submenu li{
list-style-type:none;
}
.m-header {
border: none;
border-bottom: 2px solid #999;
background-color: #fff;
color: #333;
font-size: 16px;
width:100%;
position:absolute;
}

$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #1b9bff;
}
#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: #eeeeee;
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: #eeeeee;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #eeeeee;
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: #eeeeee;
font-weight: 400;
background: #1b9bff;
}
#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: #eeeeee;
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: #eeeeee;
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: #eeeeee;
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: #eeeeee;
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 #eeeeee;
border-bottom: 2px solid #eeeeee;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #eeeeee;
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: #0190ff;
}
#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: #eeeeee;
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: #eeeeee;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 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">
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Product Categories
<ul>
<li>Menu 1
<ul>
<li>Menu 1.1
<ul>
<li>Menu 1.1.1</li>
<li>Menu 1.1.2</li>
<li>Menu 1.1.3</li>
</ul>
</li>
<li>Menu 1.2</li>
<li>Menu 1.3</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Menu 2.1</li>
<li>Menu 2.2</li>
<li>Menu 2.3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Menu 3.1</li>
<li>Menu 3.2</li>
<li>Menu 3.3</li>
</ul>
</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
</li>
<li><i class="fa fa-fw fa-edit"></i> Company Profile</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

.companymenuul .companymenuli aactive:hover ul{
display:block;
}

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

navigation submenu showing up before hovering parent - html

Related

How I Can fix my menu, I would want the space also for the element in dropdown, (the element with white background)?

Dropdown Submenu HTML and CSS (shaking)

Render a div on the right and keep the nav centered

not able to access submenu on hover when content div is added

How to open submenu on hover of main menu?

Categories

Resources