I have created a Navigation menu with sub menu. Can anyone please help me to find out why sub menu is coming as part of main menu?
Navigation have options like: Home, About, My Portfolio...
My Portfolio have menu options: Web Development, Motion...
Issue: Web Development should have sub menu: Bootstrap, CSS but rather it is coming as part of main menu.<div id="Navigation"><ul class="Navigation"><li>Home</li></ul>/div>
body {
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
min-height: 100%;
}
.Navigation {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.Navigation li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: 12px"Bonveno", "Century Gothic";
padding: 0;
margin: 0;
background-color: #eee;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
border-radius: 3px;
margin-left: 10px;
}
.Navigation a {
padding: 13px;
text-decoration: none;
color: #333;
text-shadow: 0 1px #fff;
display: block;
}
.Navigation li ul {
display: none;
height: auto;
margin-left: -11px;
padding: 0;
}
.Navigation li:hover ul {
display: block;
}
.Navigation li:hover,
a:hover {
background: #e8e8e8;
}
<div id="Navigation">
<ul class="Navigation">
<li>Home
</li>
<li>About
</li>
<li>My Portfolio
<ul>
<li>Web Development
<ul>
<li>Bootstrap
</li>
<li>CSS
</li>
</ul>
</li>
<li>Motion Graphics
</li>
<li>Flash Animation
</li>
<li>Logo Design
</li>
<li>Photography
</li>
</ul>
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
It is because you have a CSS rule for .Navigation li:hover ul { display: block; } that I believe you want to show the second level menu on first level item hover. But this rule is also applying to the third level menu (that means all ul under the first level item hovers are applied display: block;), you may want to use
.Navigation li:hover > ul instead
Try this...
body {
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
min-height: 100%;
}
.Navigation {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.Navigation li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: 12px"Bonveno", "Century Gothic";
padding: 0;
margin: 0;
background-color: #eee;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
border-radius: 3px;
margin-left: 10px;
}
.Navigation a {
padding: 13px;
text-decoration: none;
color: #333;
text-shadow: 0 1px #fff;
display: block;
}
.Navigation li ul {
display: none;
height: auto;
margin-left: -11px;
padding: 0;
}
.Navigation li ul li ul {
display: none !important;
height: auto;
margin-left: -11px;
padding: 0;
}
.Navigation li:hover ul {
display: block;
}
.Navigation li ul li:hover ul {
display: block !important;
}
.Navigation li:hover,
a:hover {
background: #e8e8e8;
}
<div id="Navigation">
<ul class="Navigation">
<li>Home
</li>
<li>About
</li>
<li>My Portfolio
<ul>
<li>Web Development
<ul>
<li>Bootstrap
</li>
<li>CSS
</li>
</ul>
</li>
<li>Motion Graphics
</li>
<li>Flash Animation
</li>
<li>Logo Design
</li>
<li>Photography
</li>
</ul>
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
body {
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #FFF, #D1D1D1);
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html {
min-height: 100%;
}
.Navigation {
height: 50px;
padding: 0;
margin: 0;
position: relative;
}
.Navigation li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: 12px"Bonveno", "Century Gothic";
padding: 0;
margin: 0;
background-color: #eee;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 3px rgba(0, 0, 0, .1);
border-radius: 3px;
margin-left: 10px;
}
.Navigation a {
padding: 13px;
text-decoration: none;
color: #333;
text-shadow: 0 1px #fff;
display: block;
}
.Navigation li ul {
display: none;
height: auto;
margin-left: -11px;
padding: 0;
position: absolute;
}
.Navigation li ul li ul {
display: none !important;
height: auto;
margin-left: -11px;
padding: 0;
}
.Navigation li:hover ul {
display: block;
}
.Navigation li ul li:hover ul {
display: block !important;
}
.Navigation li:hover,
a:hover {
background: #e8e8e8;
}
<div id="Navigation">
<ul class="Navigation">
<li>Home
</li>
<li>About
</li>
<li>My Portfolio
<ul>
<li>Web Development
<ul>
<li>Bootstrap
</li>
<li>CSS
</li>
</ul>
</li>
<li>Motion Graphics
</li>
<li>Flash Animation
</li>
<li>Logo Design
</li>
<li>Photography
</li>
</ul>
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
You'll just need to adjust your on-hover state rules so that they apply to elements you need to when you need it to.
.Navigation li:hover > ul {
display: block;
}
.Navigation li > ul li:hover > ul {
display: block;
}
See snippet below (note: I've reduced menu item widths slightly to fit them into the preview pane)
.Navigation li > ul li > ul {
position: absolute;
top: 0px;
left: 127px;
}
.Navigation li > ul li > ul li {
float: none;
}
.Navigation li > ul li {
position: relative;
}
body{
background: #c4c7cb;
background-image: -webkit-radial-gradient(cover, #FFF,#D1D1D1 );
background-image: -moz-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: -o-radial-gradient(cover, #e8eaec, #a4a8ae);
background-image: radial-gradient(cover, #e8eaec, #a4a8ae)
}
html{
min-height:100%;
}
.Navigation{
height: 50px;
padding: 0;
margin: 0;
position: absolute;
}
.Navigation > li:first-child {
margin: 0px;
}
.Navigation li {
height: auto;
width: 115px;
float: left;
text-align: center;
list-style: none;
font:12px "Bonveno", "Century Gothic";
padding: 0;
margin: 0;
background-color: #eee;
border: 1px solid #ccc;
box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
border-radius: 3px;
margin-left:10px;
}
.Navigation a{
padding:13px;
text-decoration: none;
color:#333;
text-shadow: 0 1px #fff;
display: block;
}
.Navigation li ul{
display: none;
height: auto;
margin-left: -11px;
padding: 0;
}
.Navigation li:hover > ul {
display: block;
}
.Navigation li > ul li:hover > ul {
display: block;
}
.Navigation li:hover, a:hover {
background: #e8e8e8;
}
<div id="Navigation">
<ul class="Navigation">
<li>Home</li>
<li>About</li>
<li>My Portfolio
<ul>
<li>Web Development
<ul>
<li>Bootstrap</li>
<li>CSS</li>
</ul>
</li>
<li>Motion Graphics</li>
<li>Flash Animation</li>
<li>Logo Design</li>
<li>Photography</li>
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
From here, you can simply add further styles (if necessary) to sub-menu items 2 levels, or deeper, to appear to the right of the parent menu item (rather than below).
Align sub-menu to right:
The rules below serve only to demonstrate how to get you there. I'd recommend refining them.
.Navigation li > ul li > ul {
position: absolute;
top: 0px;
left: 127px;
}
.Navigation li > ul li > ul li {
float: none;
}
.Navigation li > ul li {
position: relative;
}
Related
I need to display sub-sub-menu on hover of my sub-menu. So far I did code to display menu -> sub-menu on menu click, but to proceed I want a functionality to display sub-sub-menu on hover of my sub-menu. Can somebody help me to achieve the same?
var ddmenuitem = 0;
function jsddm_open() {
jsddm_close();
ddmenuitem = $(this).find('ul.submenu').css('display', 'block');
// $(this).find('div.subsubmenu').css('display','none');
}
function jsddm_close() {
if (ddmenuitem) ddmenuitem.css('display', 'none');
}
$(document).ready(function() {
$('#topnav > ul > li').bind('click', jsddm_open)
$('#topnav > ul > li > a').click(function(ev) {
if ($(this).hasClass('current')) {
ev.preventDefault();
}
if ($(this).attr('class') != 'active') {
$('#topnav ul li a').removeClass('active');
$(this).addClass('active');
}
});
});
#topnav {
float: left;
width: 600px;
height: 30px;
background: black;
margin-top: 10px;
position: relative;
font-size: 15px;
margin-left: 30px
}
#topnav ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
}
#topnav ul li a {
padding: 5px 15px;
color: red;
text-decoration: none;
display: block;
font-weight: bold;
}
#topnav ul li a:link {
color: red;
text-decoration: none;
}
#topnav ul li a:visited {
color: #FFF;
text-decoration: none;
}
#topnav ul li a:hover {
color: red;
text-decoration: none;
}
#topnav ul li a.active {
text-decoration: none;
color: black;
background: #e0e0e0;
}
#topnav ul li ul.submenu {
float: left;
padding: 4px 0;
position: absolute;
left: 0;
top: 30px;
display: none;
background: #e0e0e0;
color: #00537F;
width: 600px;
height: 30px;
}
#topnav ul li ul.submenu a {
display: inline;
color: #00537F;
padding: 4px 8px;
}
#topnav ul.submenu a:hover {
background-color: black;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="topnav">
<ul>sds
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
Try the following snippet without using jquery or javascript, you can get it done using only css. And have updated according to your question
#nav {
list-style: none inside;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: block;
position: relative;
float: left;
background: #000000;
}
#nav li a {
display: block;
padding: 0;
text-decoration: none;
width: 200px;
line-height: 35px;
color: #fff;
}
#nav li li a {
font-size: 80%;
}
#nav li:hover {
background: #ff0000;
}
#nav ul {
position: absolute;
padding: 0;
left: 0;
display: none;
}
#nav li:hover ul ul {
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li li:hover ul {
display: block;
margin-left: 200px;
margin-top: -35px;
}
<div id="topnav">
<ul id="nav">
<li>
Admin
</li>
<li>
MAC
<ul class="submenu">
<li>Master Data</li>
<li>
Transaction Data ⇒
<ul>
<li>Company Master</li>
<li>Location Master</li>
<li>Size Master</li>
</ul>
</li>
<li>
Admin Data
</li>
</ul>
</li>
</ul>
</div>
you can try this
#menu {
background: #343434;
color: #eee;
height: 35px;
border-bottom: 4px solid #eeeded
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 -1px 0 #000;
border-right: 1px solid #444;
border-left: 1px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #eee;
}
#menu li:hover > a,
#menu li a:hover {
background: #111
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: 180px;
background: #111;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: #eee transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu ul.menus a:hover {
background: #333;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 180px;
background: #111;
top: 0;
width: 180px;
}
#menu ul.menus .submenu li {
background: #111;
}
#menu ul.menus .has-submenu:hover .submenu {
display: block;
}
<nav>
<ul id='menu'>
<li><a class='home' href='/'>Home</a></li>
<li><a class='prett' href='#' title='Menu'>Menu</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' href='Dropdown 1' title='Dropdown 1'>Dropdown 1 + Sub Menu</a>
<ul class='submenu'>
<li>Sub Menu</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li><a href='#' title='Dropdown 2'>Dropdown 2</a></li>
<li><a href='#' title='Dropdown 3'>Dropdown 3</a></li>
</ul>
</li>
</ul>
</nav>
I'm building a simple horizontal menu with some sub-menus.
But I'm stuck trying to make the sub-items respect the width of the parent items.
Here some images what I'm talking about:
Here's what I get:
Fiddle
Check it out:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.menu {
list-style: none;
border: 1px solid #c0c0c0;
float: left;
}
.menu li {
position: relative;
float: left;
border-right: 1px solid #c0c0c0;
}
.menu li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.menu li a:hover {
background: #333;
color: #fff;
-moz-box-shadow: 0 3px 10px 0 #CCC;
-webkit-box-shadow: 0 3px 10px 0 #ccc;
text-shadow: 0px 0px 5px #fff;
}
.menu li ul {
position: absolute;
top: 25px;
left: 0;
background-color: #fff;
display: none;
}
.menu li:hover ul,
.menu li.over ul {
display: block;
}
.menu li ul li {
border: 1px solid #c0c0c0;
display: block;
width: 150px;
}
<nav>
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>What we do?
<ul>
<li>What we do? 01
</li>
<li>What we do? 02
</li>
<li>What we do? 03
</li>
</ul>
</li>
<li>Links
<ul>
<li>Myotherwebsiteiscool
</li>
</ul>
</li>
<li>Contact
<ul>
<li>Form Contact
</li>
<li>Find us
</li>
</ul>
</li>
</ul>
</nav>
Change the css here- note that I've change left: 0 to right: 0
.menu li ul {
position: absolute;
top: 25px;
right: 0;
background-color: #fff;
display: none;
}
check it out:
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
.menu {
list-style: none;
border: 1px solid #c0c0c0;
float: left;
}
.menu li {
position: relative;
float: left;
border-right: 1px solid #c0c0c0;
}
.menu li a {
color: #333;
text-decoration: none;
padding: 5px 10px;
display: block;
}
.menu li a:hover {
background: #333;
color: #fff;
-moz-box-shadow: 0 3px 10px 0 #CCC;
-webkit-box-shadow: 0 3px 10px 0 #ccc;
text-shadow: 0px 0px 5px #fff;
}
.menu li ul {
position: absolute;
top: 25px;
right: 0;
background-color: #fff;
display: none;
}
.menu li:hover ul,
.menu li.over ul {
display: block;
}
.menu li ul li {
border: 1px solid #c0c0c0;
display: block;
width: 150px;
}
<nav>
<ul class="menu">
<li>Home
</li>
<li>About
</li>
<li>What we do?
<ul>
<li>What we do? 01
</li>
<li>What we do? 02
</li>
<li>What we do? 03
</li>
</ul>
</li>
<li>Links
<ul>
<li>Myotherwebsiteiscool
</li>
</ul>
</li>
<li>Contact
<ul>
<li>Form Contact
</li>
<li>Find us
</li>
</ul>
</li>
</ul>
</nav>
I want to curve the corners in css in .second-level-menu.
I tried to add in .second-level-menu and in .second-level-menu > li:
border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
-webkit-border-radius: 0px 0px 8px 8px;
/* Menu Styles */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #999999;
}
.third-level-menu > li:hover {
background: #CCCCCC;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<ul class="top-level-menu">
<li>About
</li>
<li>Services
</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago
</li>
<li>Los Angeles
</li>
<li>
New York
<ul class="third-level-menu">
<li>Information
</li>
<li>Book a Meeting
</li>
<li>Testimonials
</li>
<li>Jobs
</li>
</ul>
</li>
<li>Seattle
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
It works with border-radius, you just can't see it because the overlapping li elements. Setting overflow:hidden to .second-level-menu will cause the radius to show.
/* Menu Styles */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #999999;
}
.third-level-menu > li:hover {
background: #CCCCCC;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
border-radius:0px 0px 8px 8px;
overflow:hidden;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<ul class="top-level-menu">
<li>About
</li>
<li>Services
</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago
</li>
<li>Los Angeles
</li>
<li>
New York
<ul class="third-level-menu">
<li>Information
</li>
<li>Book a Meeting
</li>
<li>Testimonials
</li>
<li>Jobs
</li>
</ul>
</li>
<li>Seattle
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
If you add overflow: hidden, it partially solves problem, but then your third level menu is invisible. I would just add:
.second-level-menu > li:last-child {
border-radius: 0px 0px 8px 8px;
}
Demo: https://jsfiddle.net/cw8w6rwr/
(same for third level menu, if needed)
/* Menu Styles */
.third-level-menu {
position: absolute;
top: 0;
right: -150px;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu > li {
height: 30px;
background: #999999;
}
.third-level-menu > li:hover {
background: #CCCCCC;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.second-level-menu > li {
position: relative;
height: 30px;
background: #999999;
}
.second-level-menu > li:last-child {
border-radius: 0px 0px 8px 8px;
}
.second-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu > li {
position: relative;
float: left;
height: 30px;
width: 150px;
background: #999999;
}
.top-level-menu > li:hover {
background: #CCCCCC;
}
.top-level-menu li:hover > ul {
/* On hover, display the next level's menu */
display: inline;
}
/* Menu Link Styles */
.top-level-menu a
/* Apply to all links inside the multi-level menu */
{
font: bold 14px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
padding: 0 0 0 10px;
/* Make the link cover the entire list item-container */
display: block;
line-height: 30px;
}
.top-level-menu a:hover {
color: #000000;
}
<ul class="top-level-menu">
<li>About
</li>
<li>Services
</li>
<li>
Offices
<ul class="second-level-menu">
<li>Chicago
</li>
<li>Los Angeles
</li>
<li>
New York
<ul class="third-level-menu">
<li>Information
</li>
<li>Book a Meeting
</li>
<li>Testimonials
</li>
<li>Jobs
</li>
</ul>
</li>
<li>Seattle
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
i have a menu i'm developing at this link:
http://events.discoverportland.net/
The menu should load to a blue square just to the right of the discover portland logo. There are serveral nested ul's in the menu, the problem i'm having is getting them to load to the side of the menus above them As it load now, you can't get to the teritairy links unless you move VERY fast.
Is there any way to get the uls to load inline as i'm hovering over them, or is there a better solution?
this my nav html:
<nav>
<div class="clearfix hd8 suckerfish" >
<ul id="md">
<li>Home2</li>
<li>Neighborhoods
<ul>
<li>Northwest
<ul>
<li>Pearl District</li>
<li>Oldtown-Chinatown </li>
<li>Nob Hill</li>
</ul>
</li>
<li>Southwest
<ul>
<li>West End</li>
<li>Riverplace-South Waterfront</li>
<li>Downtown</li>
</ul>
</li>
<li>Southeast
<ul>
<li>Sellwood-Westmoreland</li>
<li>Hawthorne</li>
<li>Clinton-Division</li>
</ul>
</li>
<li>Northeast
<ul>
<li>Alberta</li>
<li>Lloyd District</li>
<li>Hollywood District</li>
</ul>
</li>
<li>North
<ul>
<li>Mississippi</li>
<li>Williams</li>
<li>St. Johns</li>
</ul>
</li>
</ul>
</li>
<li>Itineraries</li>
<li>Day Trips</li>
<li>Food+Drink
<ul>
<li>Dining Picks</li>
<li>Food Cart Fare </li>
<li>Beer, Wine & Spirits</li>
<li>Café Culture</li>
</ul>
</li>
<li>To Do
<ul>
<li>Shopping</li>
<li>Recreation</li>
<li>Culture
<ul>
<li>Galleries</li>
</ul>
</li>
<li>Family</li>
</ul>
</li>
<li>Events</li>
</ul>
</nav>
this is the css i'm using:
nav ul ul li a::before {
content: "\f0da";
font-family: FontAwesome;
margin-right: 8px;
}
nav {
text-transform:uppercase;
font-family: Oswald,Arial,Helvetica,sans-serif !important;
font-size: 14px;
font-weight: 100 !important;
letter-spacing: 1px!important;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #FF0066;
padding: 2px 0 0 64px;
border-radius: 0px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #FF0066;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #FF0066; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 15px 25px;
color: #fff;
font-family: 'Fira Sans', sans-serif;Important;
font-size: 12px;
}
nav ul ul li a:hover {
background: #AD0548;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul ul li {
width: 275px !important;
}
#media (max-width: 767px) {
#logo a {
background: rgba(0, 0, 0, 0) url("http://discoverportland.net/templates/urbanlife/images/logos/DP_HeadingLogo2.png") no-repeat scroll 0 0 / 100% auto;
height: 60px;
margin: 0 !important;
width: 60px !important;
}
#menu-icon {
display:inline-block;
}
nav ul, nav:active ul {
display: none;
position: absolute;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
nav:hover #md {
display: inline-block;
}
}
I have a vertical Nav menu in html and I'm trying to make a submeu, but it's not going well. When I go to click the submeu it disappears. Any help would be appreciated
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
left: 210px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>
You have to change left value from 210px to 200 or even better use margin-left to count value relative to parent.
nav ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
}
nav,
ul {
margin-top: 4px;
}
nav ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
nav ul li:hover {
background-color: #E88B2E;
}
nav.idk {
color: yellow;
}
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: lightgreen;
}
ul li ul {
list-style: none;
margin: 0;
padding: 0px;
width: 200px;
height: auto;
display: none;
}
ul li ul li {
border-top: 2px solid #000000;
background-color: white;
width: 10em;
color: black;
width: 200px;
height: auto;
padding: 5px 0px;
font-size: 120%;
}
a:link {
text-decoration: none;
}
nav ul li:hover ul {
/* When list item is hovered, display UL nested within. */
display: block;
}
nav ul ul {
/* Remove element from document flow */
position: absolute;
/* Position relative to its parent <li> */
margin-left: 200px;
top: 0;
border-top: 1px solid #e9e9e9;
display: none;
}
nav ul ul li {
width: 200px;
background: #f1f1f1;
border: 1px solid #e9e9e9;
border-top: 0;
}
nav ul ul li a {
color: #a8a8a8;
font-size: 12px;
text-transform: none;
}
nav ul ul li a:hover {
color: #929292;
}
<div class="wrapper">
<div class="navigation">
<nav>
<ul>
<li>About
</li>
<li>News
</li>
<li>The Controversy
<ul>
<li>About the Hounds
</li>
<li>What to Wear
</li>
<li>Who are these People
</li>
</ul>
</li>
<li>Contact
</li>
<li>References
</li>
<li>Webmaster
</li>
<li>Site Map
</li>
<li>FAQ
</li>
</ul>
</nav>
</div>