I'm trying to set up this 2 column menu that is side by side with each of the columns submenus opening to a different side. The left menu is working correctly, and the submenu buttons are clickable, but the right menu submenu items are located under the left menu elements. I tried using z-index, which worked, but made the left-menu items not clickable (hover did not work as well). Please see http://kink.cz/najforever/index_copy.html for reference.
Could you please suggest how I can have the right menu submenu items shown correctly?
Your help is much appreciated.
HTML:
<div class='people'>
<div id='cssmenu'>
<ul>
<li class='active has-sub' id='fake'><a href='#'><span>A fake artist</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='danny'><a href='#'><span>Danny Rose Fashion</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='heels'><a href='#'><span>Heels in Prague</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='hodanajan'><a href='#'><span>Hodanajan</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='jakub'><a href='#'><span>Jakub Mařík</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Web</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
</ul>
</div>
<div id='cssmenu2'>
<ul>
<li class='active has-sub' id='kaa'><a href='#'><span>Kaa Glo</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='pau'><a href='#'><span>Paulinemma</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='red'><a href='#'><span>Red Poppy Stories</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='kisic'><a href='#'>Sandra Kisic</a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='aesthet'><a href='#'><span>The Aesthet</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
</ul>
</div>
CSS:
/* ===========================
====== Name Menu Right ======
=========================== */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
text-align:left
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 200px;
z-index: 598;
}
#cssmenu ul ul li {
float: none;
right:250px;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles Menu Right*/
#cssmenu {
width: 130px;
background: white;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
float:right;
margin-left:5px;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 6px 0px;
color: black;
text-decoration: none;
padding-right:5px;
}
#cssmenu > ul {
width: 130px;
}
#cssmenu ul ul {
width: 130px;
}
#cssmenu > ul > li > a {
color: black;
}
#cssmenu > ul > li > a:hover {
color: black;
}
#cssmenu > ul > li.active a {
background: white;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: white;
}
#cssmenu li {
position: relative;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
margin-left:2px;
text-align:right;
}
#cssmenu ul ul a {
font-size: 12px;
color: black;
}
#cssmenu ul ul a:hover {
color: black;
}
#cssmenu ul ul li {
}
#cssmenu ul ul li:hover > a {
background: black;
color: #ffffff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid black;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
/* ===========================
====== Name Menu Left ======
=========================== */
#cssmenu2 {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
text-align:right;
}
#cssmenu2 ul,
#cssmenu2 ul li,
#cssmenu2 ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu2 ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu2 ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu2 ul li.hover,
#cssmenu2 ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu2 ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
text-align:left;
}
#cssmenu2 ul ul li {
float: none;
margin-left:4px;
}
#cssmenu2 ul ul ul {
top: -2px;
right: 0;
}
#cssmenu2 ul li:hover > ul {
visibility: visible;
}
#cssmenu2 ul ul {
top: 1px;
left: 99%;
}
#cssmenu2 ul li {
float: none;
}
#cssmenu2 ul ul {
margin-top: 1px;
}
#cssmenu2 ul ul li {
font-weight: normal;
}
/* Custom CSS Styles Menu Left*/
#cssmenu2 {
width: 130px;
background: white;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
float:right;
margin-left:5px;
}
#cssmenu2:before {
content: '';
display: block;
}
#cssmenu2:after {
content: '';
display: table;
clear: both;
}
#cssmenu2 a {
display: block;
padding: 6px 0px;
color: black;
text-decoration: none;
padding-right:5px;
}
#cssmenu2 > ul {
width: 130px;
}
#cssmenu2 ul ul {
width: 130px;
}
#cssmenu2 > ul > li > a {
border-right: 4px solid black;
color: black;
}
#cssmenu2 > ul > li > a:hover {
color: black;
}
#cssmenu2 > ul > li.active a {
background: white;
}
#cssmenu2 > ul > li a:hover,
#cssmenu2 > ul > li:hover a {
background: white;
}
#cssmenu2 li {
position: relative;
}
#cssmenu2 ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu2 ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu2 ul ul {
border-right: 2px solid black;
background:white;
margin-top:-2px;
}
#cssmenu2 ul ul {
margin-left:2px;
}
#cssmenu2 ul ul a {
font-size: 12px;
color: black;
}
#cssmenu2 ul ul a:hover {
color: black;
}
#cssmenu2 ul ul li {
}
#cssmenu2 ul ul li:hover > a {
background: black;
color: #ffffff;
}
#cssmenu2.align-right > ul > li > a {
border-left: 4px solid black;
border-right: none;
}
#cssmenu2.align-right {
float: right;
}
#cssmenu2.align-right li {
text-align: right;
}
#cssmenu2.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu2.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu2.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu2.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu2.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
/* ===========================
====== Contact Form ======
=========================== */
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 400px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
color: #999999;
}
/* Submit Button */
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Hopefully It will work, I have checked #MarianRehak..
just remove z-index from
#cssmenu2 ul{}
and add this class
#cssmenu2 ul li:hover ul {
z-index: 999999 !important;
}
Rest you can play with the position.. the basic issue will be resolved now..
Fixed your CSS. Changes applied on many places. You'll need to apply some more CSS to make menu look same is the left menu.
#cssmenu {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
text-align:left
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
display:none;
position: absolute;
top: 100%;
z-index: 598;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
display:block;
z-index:99999;
}
#cssmenu ul ul {
top: 1px;
right: 100%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles Menu Right*/
#cssmenu {
width: 130px;
background: white;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
float:right;
margin-left:5px;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 6px 0px;
color: black;
text-decoration: none;
padding-right:5px;
}
#cssmenu > ul {
width: 130px;
}
#cssmenu ul ul {
width: 130px;
}
#cssmenu > ul > li > a {
color: black;
}
#cssmenu > ul > li > a:hover {
color: black;
}
#cssmenu > ul > li.active a {
background: white;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: white;
}
#cssmenu li {
position: relative;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
margin-left:2px;
text-align:right;
}
#cssmenu ul ul a {
font-size: 12px;
color: black;
}
#cssmenu ul ul a:hover {
color: black;
}
#cssmenu ul ul li {
}
#cssmenu ul ul li:hover > a {
background: black;
color: #ffffff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid black;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
/* ===========================
====== Name Menu Left ======
=========================== */
#cssmenu2 {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
text-align:right;
}
#cssmenu2 ul,
#cssmenu2 ul li,
#cssmenu2 ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu2 ul {
position: relative;
float: left;
}
#cssmenu2 ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu2 ul li.hover,
#cssmenu2 ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu2 ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
text-align:left;
}
#cssmenu2 ul ul li {
float: none;
margin-left:4px;
}
#cssmenu2 ul ul ul {
top: -2px;
right: 0;
}
#cssmenu2 ul li:hover > ul {
visibility: visible;
}
#cssmenu2 ul ul {
top: 1px;
left: 99%;
}
#cssmenu2 ul li {
float: none;
}
#cssmenu2 ul ul {
margin-top: 1px;
}
#cssmenu2 ul ul li {
font-weight: normal;
}
/* Custom CSS Styles Menu Left*/
#cssmenu2 {
width: 130px;
background: white;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
float:right;
margin-left:5px;
}
#cssmenu2:before {
content: '';
display: block;
}
#cssmenu2:after {
content: '';
display: table;
clear: both;
}
#cssmenu2 a {
display: block;
padding: 6px 0px;
color: black;
text-decoration: none;
padding-right:5px;
}
#cssmenu2 > ul {
width: 130px;
}
#cssmenu2 ul ul {
width: 130px;
}
#cssmenu2 > ul > li > a {
border-right: 4px solid black;
color: black;
}
#cssmenu2 > ul > li > a:hover {
color: black;
}
#cssmenu2 > ul > li.active a {
background: white;
}
#cssmenu2 > ul > li a:hover,
#cssmenu2 > ul > li:hover a {
background: white;
}
#cssmenu2 li {
position: relative;
}
#cssmenu2 ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu2 ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu2 ul ul {
border-right: 2px solid black;
background:white;
margin-top:-2px;
}
#cssmenu2 ul ul {
margin-left:2px;
}
#cssmenu2 ul ul a {
font-size: 12px;
color: black;
}
#cssmenu2 ul ul a:hover {
color: black;
}
#cssmenu2 ul ul li {
}
#cssmenu2 ul ul li:hover > a {
background: black;
color: #ffffff;
}
#cssmenu2.align-right > ul > li > a {
border-left: 4px solid black;
border-right: none;
}
#cssmenu2.align-right {
float: right;
}
#cssmenu2.align-right li {
text-align: right;
}
#cssmenu2.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu2.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu2.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu2.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu2.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
/* ===========================
====== Contact Form ======
=========================== */
input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 400px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}
.form label {
color: #999999;
}
/* Submit Button */
.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
<div class='people'>
<div id='cssmenu'>
<ul>
<li class='active has-sub' id='fake'><a href='#'><span>A fake artist</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='danny'><a href='#'><span>Danny Rose Fashion</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='heels'><a href='#'><span>Heels in Prague</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='hodanajan'><a href='#'><span>Hodanajan</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='jakub'><a href='#'><span>Jakub Mařík</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Web</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
</ul>
</div>
<div id='cssmenu2'>
<ul>
<li class='active has-sub' id='kaa'><a href='#'><span>Kaa Glo</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='pau'><a href='#'><span>Paulinemma</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='red'><a href='#'><span>Red Poppy Stories</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='kisic'><a href='#'>Sandra Kisic</a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
<li class='active has-sub' id='aesthet'><a href='#'><span>The Aesthet</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Blog</span></a></li>
<li class='has-sub'><a href='#'><span>Facebook</span></a></li>
<li class='has-sub'><a href='#'><span>Instagram</span></a></li>
</ul>
</li>
</ul>
</div>
Just try changing this class.. it will work.
#cssmenu ul ul {
margin-left: 113px;
text-align: right;
}
Let me know any issues
Related
Hey i have quite a bit of a design to my dropdown menu and im having trouble adding a submenu to lets say to the first element on the dropdown-cotent div.
I simply want the sub menu to start where the hover of the submeneu is defined and to the right and drop down the same way as my current sub menu does it.
Here is my html:
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
And here is the css to it all:
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 105px;
line-height: 80px;
height: 80px
}
nav .main-nav .dropdown-content a {
height: auto;
line-height: initial;
padding: 3px 0;
}
nav .main-nav ul a {
text-align: center;
font-weight: 550;
font-size: 12px;
color: #84827d;
text-shadow: 1px 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {
}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 30px;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
nav .main-nav ul.left {
float: left;
margin-left: 5px;
}
nav .main-nav ul.right {
float: right;
margin-left: 5px
}
Here is snippet,
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 105px;
line-height: 80px;
height: 80px
}
nav .main-nav .dropdown-content a {
height: auto;
line-height: initial;
padding: 3px 0;
}
nav .main-nav ul a {
text-align: center;
font-weight: 550;
font-size: 12px;
color: #84827d;
text-shadow: 1px 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {
}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 30px;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
nav .main-nav ul.left {
float: left;
margin-left: 5px;
}
nav .main-nav ul.right {
float: right;
margin-left: 5px
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
Third
Third Link
Third Link 3
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click", function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">HTML</a></li>
<li><a tabindex="-1" href="#">CSS</a></li>
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li><a tabindex="-1" href="#">2nd level dropdown</a></li>
<li class="dropdown-submenu">
<a class="test" href="#">Another dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>3rd level dropdown</li>
<li>3rd level dropdown</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Did you mean to say this?
nav {
padding-left: 5px
}
nav .main-nav {
height: 80px;
width: 100%;
margin-top: 64px;
background: url(../images/navHeader.png) no-repeat top;
position: relative
}
nav .main-nav > ul {
width: 360px;
height: 80px;
margin-top: 2px;
padding: 0;
list-style-type: none
}
nav .main-nav ul a,
nav .main-nav ul li {
display: inline-block;
width: 105px;
line-height: 80px;
height: 80px
}
nav .main-nav .dropdown-content a {
height: auto;
line-height: initial;
padding: 3px 0;
}
nav .main-nav ul a {
text-align: center;
font-weight: 550;
font-size: 12px;
color: #84827d;
text-shadow: 1px 1px 1px 1px #000;
text-transform: uppercase;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out
}
nav .main-nav ul a:hover {
text-decoration: none;
color: #7289da
}
nav .main-nav li .dropdown {
}
nav .main-nav .dropdown-content {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 30px;
top: 60px;
}
nav .main-nav .dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
nav .main-nav .dropdown-content a:hover {
background-color: #3A4FC5
}
nav .main-nav .dropdown:hover .dropdown-content {
display: inline-block;
}
nav .main-nav ul.left {
float: left;
margin-left: 5px;
}
.dropdown-content ul {
padding: 0;
width: auto !important;
display: flex;
flex-direction: column;
}
.dropdown-content ul li {
height: auto !important;
position: relative;
}
.dropdown-content ul li:hover > .dropdown-content-second {
display: block;
}
.dropdown-content-second {
position: absolute;
display: none;
float: left;
z-index: 10;
-webkit-box-shadow: 0 3px 5px 0 #999;
-moz-box-shadow: 0 3px 5px 0 #999;
box-shadow: 0 3px 5px 0 #999;
border: 1px solid #CCC;
background: #3A4FC5;
color: #656161;
opacity: .8;
min-width: 30px;
top: 0;
left: 100%;
}
.dropdown-content-second ul li {
position: relative;
}
nav .main-nav ul.right {
float: right;
margin-left: 5px
}
<nav>
<div class="main-nav">
<ul class="left">
<li class="dropdown">Home
<div class="dropdown-content">
<ul>
<li>
Third
<div class="dropdown-content-second">
<ul>
<li>
Navi 1
</li>
<li>
Navi 2
</li>
<li>
Navi 3
<div class="dropdown-content-second">
<ul>
<li>
Navi 1
</li>
<li>
Navi 2
</li>
<li>
Navi 3
</li>
<li>
Navi 4
</li>
<li>
Navi 5
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>
Third Link
</li>
<li>
Third Link 3
</li>
</ul>
</div>
</li>
<li>Gods</li>
<li>Goddesses</li>
</ul>
<div class="play-now"></div>
<ul class="right">
<li>Heroes</li>
<li>Myths</li>
<li>Beasts</li>
</ul>
</div>
</nav>
Take a look on my menu
#import url(https://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
width: auto;
}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 0;
left: 190px;
width: 190px;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
bottom: 0;
left: 0;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu ul ul li {
font-weight: normal;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
background: #333;
border-bottom: 4px solid #9c9797;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 12px;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #9c9797;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #9c9797;
color: #ffffff;
border: 1px solid #837d7d;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
font-size: 12px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #837d7d;
}
#cssmenu ul ul li:hover > a {
background: #b5b1b1;
color: #ffffff;
}
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #9c9797;
-webkit-box-shadow: 0 1px 0 #9c9797;
box-shadow: 0 1px 0 #9c9797;
}
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
background: #9c9797;
color: #ffffff;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu > ul > li > a {
line-height: 48px;
font-size: 12px;
}
#cssmenu.align-center > ul {
text-align: center;
font-size: 0;
}
#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.align-right ul ul {
left: auto;
right: 0;
text-align: right;
}
#cssmenu.align-right ul ul ul {
left: auto;
right: 190px;
}
#cssmenu.align-right ul ul li.has-sub > a:after {
left: 15px;
right: auto;
}
<html lang="ru" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</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>
<li class="has-sub">Menu 1.4
<ul>
<li>Menu 1.4.1</li>
<li>Menu 1.4.2</li>
<li>Menu 1.4.3</li>
<li>Menu 1.4.4</li>
</ul>
</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>
</ul>
</li>
<li class="has-sub">Menu 3
<ul>
<li>Menu 3.1</li>
<li>Menu 3.2</li>
<li class="has-sub">Menu 3.3
<ul>
<li>Menu 3.3.1</li>
<li>Menu 3.3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-cog"></i> About us</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>
I am using a menu and I am trying to change the way it looks. I want the submenus (ul li) to be horizontal and not vertical. I tried everything on CSS like adding float but nothing worked.
I am using this HTML code :
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li class='has-sub'><a href='#'>Page2</a>
<ul>
<li><a href='#'>Page1</a></li>
<li><a href='#'>Page3</a></li>
<li class='last'><a href='#'>Page4</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>YOLO</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>
I am using this CSS code :
#cssmenu > ul {
background: url(images/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
position: relative;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #9e3825;
text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/active.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/highlight-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 64px;
left: 0;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
width: 150px;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #de553b;
background: url(images/hover.png) repeat;
color: white;
text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) repeat;
}
You want something like this?
body{
background: #CCC;
}
#cssmenu > ul {
background: url(images/highlight-bg.png) repeat;
padding-bottom: 3px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#cssmenu:before,
#cssmenu:after,
#cssmenu > ul:before,
#cssmenu > ul:after {
content: "";
display: table;
}
#cssmenu:after,
#cssmenu > ul:after {
clear: both;
}
#cssmenu {
width: auto;
zoom: 1;
}
#cssmenu > ul {
background: url(images/menu-bg.png) repeat;
margin: 0;
padding: 0;
position: relative;
}
#cssmenu > ul li {
margin: 0;
padding: 0;
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
padding: 23px 26px;
display: block;
color: white;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 -1px 0 #9e3825;
text-shadow: 0 -1px 0 rgba(116, 37, 2, 0.7);
line-height: 18px;
}
#cssmenu > ul > li:hover > a {
background: url(images/hover.png) repeat;
text-shadow: 0 -1px 0 #97321f;
text-shadow: 0 -1px 0 rgba(122, 42, 26, 0.64);
}
#cssmenu > ul > li > a > span {
line-height: 18px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a:active {
background: url(images/active.png) repeat;
}
/* Childs */
#cssmenu > ul ul {
opacity: 0;
visibility: hidden;
position: absolute;
top: 120px;
background: url(images/highlight-bg.png) repeat;
margin: 0;
padding: 0;
z-index: -1;
}
#cssmenu > ul li:hover ul {
opacity: 1;
visibility: visible;
margin: 0;
color: #000;
z-index: 2;
top: 50px;
left: 0;
position: absolute;
width: 100%;
}
#cssmenu > ul ul:before {
content: "";
position: absolute;
top: -10px;
width: 100%;
height: 20px;
background: transparent;
}
#cssmenu > ul ul li {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
#cssmenu > ul ul li a {
padding: 18px 26px;
display: block;
color: #393939;
font-size: 13px;
text-decoration: none;
text-transform: uppercase;
border-left: 4px solid transparent;
-webkit-transition: all 0.35s ease-in-out;
-moz-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
text-shadow: 0 1px 0 white;
}
#cssmenu > ul ul li a:hover {
border-left: 4px solid #de553b;
background: url(images/hover.png) repeat;
color: white;
text-shadow: 0 1px 0 black;
}
#cssmenu > ul ul li a:active {
background: url(images/menu-bg.png) repeat;
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'>Home</a></li>
<li class='has-sub'><a href='#'>Page2</a>
<ul>
<li><a href='#'>Page1</a></li>
<li><a href='#'>Page3</a></li>
<li class='last'><a href='#'>Page4</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>About</a>
<ul>
<li><a href='#'>YOLO</a></li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</li>
<li class='last'><a href='#'>Contact</a></li>
</ul>
</div>
I am trying to create a drop down navigation that you can see the sub menu within the drop down a little like this![enter image description here
I have the essential layout i want though i am failing to actually create the drop down float left.
HTML
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Services</span></a>
<div class="sub">
<div class="subinner">
<ul>
<li><a href='#'><span>Consultancy</span></a></li>
<li><a href='#'><span>Project Managment & Execution</span></a></li>
<li><a href='#'><span>Commissioning</span></a></li>
</ul>
<ul>
<li>Training</li>
<li>Plant Performance Enchancement</li>
</ul>
</div> <!-- End of Sub -->
</div> <!-- End of Subinner -->
</li>
<li class='sub'><a href='#'><span>About</span></a>
<div class="sub">
<div class="subinner">
<ul>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Below is the CSS controls the drop down no JS is used.
#cssmenu ul {
margin: 0;
padding: 7px 6px 0;
background: #493B88;
line-height: 100%;
width: auto;
}
#cssmenu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
}
#cssmenu a:hover {
background: #000;
color: #000;
}
#cssmenu .active a,
#cssmenu li:hover > a {
background: #ccc;
color: #000;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
background: none;
border: none;
color: #000;
width: 30%;
}
#cssmenu ul ul a:hover {
background: #7d7d7d;
color: #000 !important;
width: 400px;
}
#cssmenu li:hover > .sub .subinner ul {
display: block;
position: absolute;
left: 0;
}
#cssmenu ul ul {
z-index: 1000;
display: none;
margin: 0;
padding: 0;
width: 300px;
position: absolute;
top: 40px;
left: 0;
background: #ffffff;
border: solid 1px #b4b4b4;
}
#cssmenu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #cssmenu ul {
height: 1%;
}
Here is a link to view my drop down menu Live
https://jsfiddle.net/pj8kL8dL/
I have spent 2-3 hours to get this result, i hope it is what you need.
By the way, I would avoid using position:something so often.
It seems a responsive one, did you like the result?
body{
margin: 0;
}
#cssmenu ul {
margin: 0;
}
#cssmenu ul > li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
list-style: none;
}
#cssmenu ul > ul li {
margin: 0 5px;
padding: 0 0 8px;
float: none;
list-style: none;
}
#cssmenu a,
#cssmenu a:link {
font-weight: bold;
font-size: 13px;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
}
#cssmenu a:hover {
background: #000;
color: #000;
}
#cssmenu .active a,
#cssmenu li:hover > a {
background: #ccc;
color: #000;
}
#cssmenu ul ul li:hover a,
#cssmenu li:hover li a {
background: none;
border: none;
color: #000;
}
#cssmenu ul ul a:hover {
background: #7d7d7d;
color: #000 !important;
}
#cssmenu li:hover > .sub .subinner ul {
display: block;
}
#cssmenu ul ul {
z-index: 1000;
display: none;
margin: 0;
padding: 0;
background: #ffffff;
border-bottom: solid 1px #b4b4b4;
border-top: solid 1px #b4b4b4;
}
#cssmenu ul ul li {
float: left;
margin: 0;
padding: 3px;
}
#cssmenu li:nth-child(2) ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#cssmenu li:nth-child(2) ul ul li a{
border-bottom: 1px solid #B4B4B4;
}
#cssmenu ul ul a,
#cssmenu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#cssmenu ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
* html #cssmenu ul {
height: 1%;
}
#cssmenu ul li:nth-child(2) .subinner{
top: 47px;
position: absolute;
left: 0px;
width: 100%;
}
#cssmenu ul li:nth-child(3) .subinner{
top: 47px;
position: absolute;
left: 0px;
width: 100%;
}
#cssmenu{
margin: 0px;
padding: 7px 6px 0px;
background: #493B88 none repeat scroll 0% 0%;
line-height: 100%;
width: auto;
height: 40px;
}
#cssmenu li:nth-child(2):hover > .sub .subinner ul {
width: 100%;
}
#cssmenu li:hover > .sub .subinner ul {
width: 100%;
}
#cssmenu .subinner ul ul{
float: left;
width: 33% !important;
border: none;
}
<div id='cssmenu'>
<ul>
<li><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Services</span></a>
<div class="sub">
<div class="subinner">
<ul>
<ul>
<li><a href='#'><span>Consultancy</span></a></li>
<li><a href='#'><span>Project Managment & Execution</span></a></li>
</ul>
<ul>
<li><a href='#'><span>Commissioning</span></a></li>
<li><span>Training</span></li>
<li><span>Plant Performance Enchancement</span></li>
</ul>
<ul>
<li><a href='#'><span>Something</span></a></li>
<li><a href='#'><span>Something</span></a></li>
</ul>
</ul>
</div> <!-- End of Sub -->
</div> <!-- End of Subinner -->
</li>
<li class='sub'><a href='#'><span>About</span></a>
<div class="sub">
<div class="subinner">
<ul>
<li><a href='#'><span>Company</span></a></li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</div>
</li>
<li><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Remove the position: relative; in #cssmenu li so the sub menu will be relative to any outer div or body.
Also increase width of sub menu to 100% in #cssmenu ul ul
Consider the following HTML
HTML
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#'><span>Skills</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Analysis</span></a>
<ul>
<li><a href='#'><span>Category and Skills</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Employee Skills </span></a>
</li>
<li class='has-sub'><a href='#'><span>Setup </span></a>
<ul>
<li><a href='#'><span>Skills</span></a></li>
<li class='last'><a href='#'><span>Skills Categories</span></a></li>
<li class='last'><a href='#'><span>Skill Level</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Proposals</span></a>
<ul>
<li><a href='#'><span>New Propsals</span></a></li>
<li class='last'><a href='#'><span>List of Proposals</span></a></li>
</ul>
</li>
<li class="has-sub"><a href='#'><span>Procurement</span></a>
<ul>
<li><a href='#'><span>Indents</span></a></li>
<li><a href='#'><span>Status</span></a></li>
</ul>
</li>
</ul>
</div>
CSS
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Please Keep this font import at the very top of any CSS file */
#charset "UTF-8";
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 4px solid #1b9bff;
color: #ffffff;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover,
#cssmenu > ul > li:hover a {
background: #1b9bff;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #ffffff;
}
#cssmenu ul ul a:hover {
color: #ffffff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
jsfiddle
Here I have made a multilevel menu items.What I want is that on clicking any of the child element the root element will have it's background color changed(sort of selected items style) and child element panel disappear. How can I do that?
MY TRY
$(document).ready(function () {
$( "a" ).click(function( event ) {
$( ".has-sub" ).css("background-color","blue");
});
I have tried above code to try two things but did not work.
would use jQuery.
-- not sure exactly which elements you want the background changed on but this is the basic idea.
$(function() {
$('.last').click(function() {
$(".has-sub").css("background", "yellow");
})
});
Please let me know if this is what you are looking for?
<html>
<head>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Please Keep this font import at the very top of any CSS file */
#charset "UTF-8";
/* Starter CSS for Flyout Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
line-height: 1;
}
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul ul {
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu ul {
position: relative;
z-index: 597;
float: left;
}
#cssmenu ul li {
float: left;
min-height: 1px;
line-height: 1em;
vertical-align: middle;
position: relative;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0px;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: -2px;
right: 0;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
top: 1px;
left: 99%;
}
#cssmenu ul li {
float: none;
}
#cssmenu ul ul {
margin-top: 1px;
}
#cssmenu ul ul li {
font-weight: normal;
}
/* Custom CSS Styles */
#cssmenu {
width: 200px;
background: #333333;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
zoom: 1;
font-size: 12px;
}
#cssmenu:before {
content: '';
display: block;
}
#cssmenu:after {
content: '';
display: table;
clear: both;
}
#cssmenu a {
display: block;
padding: 15px 20px;
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
}
#cssmenu > ul {
width: 200px;
}
#cssmenu ul ul {
width: 200px;
}
#cssmenu > ul > li > a {
border-right: 4px solid #1b9bff;
color: #ffffff;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li.active a {
background: #1b9bff;
}
#cssmenu > ul > li a:hover
{
background: #1b9bff;
}
#cssmenu ul ul li
{
background-color:#1b9bff;
}
#cssmenu li {
position: relative;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -6px;
}
#cssmenu ul ul li.first {
-webkit-border-radius: 0 3px 0 0;
-moz-border-radius: 0 3px 0 0;
border-radius: 0 3px 0 0;
}
#cssmenu ul ul li.last {
-webkit-border-radius: 0 0 3px 0;
-moz-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
border-bottom: 0;
}
#cssmenu ul ul {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#cssmenu ul ul {
border: 1px solid #0082e7;
}
#cssmenu ul ul a {
font-size: 12px;
color: #ffffff;
}
#cssmenu ul ul a:hover {
color: #ffffff;
}
#cssmenu ul ul li {
border-bottom: 1px solid #0082e7;
}
#cssmenu ul ul li:hover > a {
background: #4eb1ff;
color: #ffffff;
}
#cssmenu.align-right > ul > li > a {
border-left: 4px solid #1b9bff;
border-right: none;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right li {
text-align: right;
}
#cssmenu.align-right ul li.has-sub > a:before {
content: '+';
position: absolute;
top: 50%;
left: 15px;
margin-top: -6px;
}
#cssmenu.align-right ul li.has-sub > a:after {
content: none;
}
#cssmenu.align-right ul ul {
visibility: hidden;
position: absolute;
top: 0;
left: -100%;
z-index: 598;
width: 100%;
}
#cssmenu.align-right ul ul li.first {
-webkit-border-radius: 3px 0 0 0;
-moz-border-radius: 3px 0 0 0;
border-radius: 3px 0 0 0;
}
#cssmenu.align-right ul ul li.last {
-webkit-border-radius: 0 0 0 3px;
-moz-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
}
#cssmenu.align-right ul ul {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
</style>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#'><span>Skills</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Analysis</span></a>
<ul>
<li><a href='#'><span>Category and Skills</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Employee Skills </span></a>
</li>
<li class='has-sub'><a href='#'><span>Setup </span></a>
<ul>
<li><a href='#'><span>Skills</span></a></li>
<li class='last'><a href='#'><span>Skills Categories</span></a></li>
<li class='last'><a href='#'><span>Skill Level</span></a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Proposals</span></a>
<ul>
<li><a href='#'><span>New Propsals</span></a></li>
<li class='last'><a href='#'><span>List of Proposals</span></a></li>
</ul>
</li>
<li class="has-sub"><a href='#'><span>Procurement</span></a>
<ul>
<li><a href='#'><span>Indents</span></a></li>
<li><a href='#'><span>Status</span></a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
CSS
#cssmenu ul li a.select {
background: #4eb1ff;
color:#fff;
}
HTML
<ul>
<li class='has-sub'>
<span>Skills</span>
</li>
</ul>
Try this. Its working fine for me.
I am trying to develop a menu which is responsive. The menu should look like this when not responsive:
And like the below when screen is reduced for tablets/mobiles:
You can find a fiddle here: http://jsfiddle.net/yxMhj/
HTML Code:
<div id='cssmenu'>
<div class="logo">
<img src="images/logo.png" />
</div>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li class='has-sub '><a href='#'>Products</a>
<ul>
<li class='has-sub '><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
<li class='has-sub '><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
CSS Code:
#import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
#cssmenu {padding: 0; margin: 0; border: 0;}
#cssmenu ul, #cssmenu li {list-style: none; margin: 0; padding: 0;}
#cssmenu ul {position: relative; z-index: 597; }
#cssmenu ul li { float: left; min-height: 1px; vertical-align: middle;}
#cssmenu ul li.hover,
#cssmenu ul li:hover {position: relative; z-index: 599; cursor: default;}
#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
#cssmenu ul ul li {float: none;}
#cssmenu ul ul ul {top: 0; left: auto; right: -99.5%; }
#cssmenu ul li:hover > ul { visibility: visible;}
#cssmenu ul ul {bottom: 0; left: 0;}
#cssmenu ul ul {margin-top: 0; }
#cssmenu ul ul li {font-weight: normal;}
#cssmenu a { display: block; line-height: 1em; text-decoration: none; }
#cssmenu {
background: #333;
border-bottom: 4px solid #1b9bff;
font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;
font-size: 16px;
}
#cssmenu > ul { *display: inline-block; }
#cssmenu:after, #cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #333;
color: #CBCBCB;
padding: 0 20px;
}
#cssmenu ul { text-transform: uppercase; }
#cssmenu ul ul {
border-top: 4px solid #1b9bff;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #1b9bff;
color: #FFF;
border: 1px solid #0082e7;
border-top: 0 none;
line-height: 150%;
padding: 16px 20px;
}
#cssmenu ul ul ul { border-top: 0 none; }
#cssmenu ul ul li { position: relative }
#cssmenu > ul > li > a { line-height: 80px; }
#cssmenu ul ul li:first-child > a { border-top: 1px solid #0082e7; }
#cssmenu ul ul li:hover > a { background: #35a6ff; }
#cssmenu ul ul li:last-child > a {
border-radius: 0 0 3px 3px;
box-shadow: 0 1px 0 #1b9bff;
}
#cssmenu ul ul li:last-child:hover > a { border-radius: 0 0 0 3px; }
#cssmenu ul ul li.has-sub > a:after {
content: '+';
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a, #cssmenu ul li.active > a {
background: #1b9bff;
color: #FFF;
}
#cssmenu ul li.has-sub > a:after {
content: '+';
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
.logo{
margin-top:0px;
float:left;
margin-left:20%;
padding-right:10px;
}
I really appreciate your help guys!
Try this
<style>
.menu {
border: 0;
margin: 0 0 10px 0;
padding: 0;
width: 100%;
}
.menu ul {
display: table;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.menu li {
display: table-cell;
background-color: #eee;
}
.menu li:hover {
background-color: #ccc;
}
.menu a {
display: block;
padding: 10px 0;
width: 100%;
}
.menu li, .menu a {
text-align: center;
}
#Media screen and (max-width:480px) {
div.menu li {
display: block !important;
width: 100% !important;
}
}
</style>
<div class="menu">
<ul>
<li>Your logo here</li>
<li>Home</li>
<li>Products</li>
<li>Company</li>
<li>Blog</li>
</ul>
</div>