I am trying to create a navigation bar that contains 4 menus and 1 sub menu for the first menu, however, I can not create the sub menu. This is my code so far and I'm not sure how to make the sub menu appear when I hover or even click on the first menu. Thanks.
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<nav>
<ul>
<li><a class="#" href="#">Menu 1</a></li>
<ul>
<li>Submenu 1</li>
</ul>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
</body>
</html>
And here is my CSS
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111111;
border: solid 1px black;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #ee8601;
}
.active {
background-color: #ee8601;
}
HTML error: ul is not a valid descendant of ul (should be inside the li)
CSS: set li to position:relative; in order to contain the position of the inner Sub-UL
CSS (missing part): set the Sub ul to position:absolute; and display:none;
CSS (missing part): On li:hover > display:block; it's child ul element.
Example 1:
Reveal Submenu using display: none/block
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
/*overflow: hidden;*/
background-color: #111;
/*border: solid 1px black;*/
}
nav ul li {
/*float: left;*/
display:inline-block; /*add istead of "float:left;" */
vertical-align:top; /*add*/
position:relative; /*add to contain sub ul*/
}
nav a {
display: block;
color: white;
text-align: center;
white-space:nowrap; /*add*/
padding: 14px 16px;
text-decoration: none;
}
nav li:hover > a, /* target the LI:hover, than change styles to A */
nav a.active{ /* merge together */
background-color: #ee8601;
}
/* HIDE sub ul */
nav li ul{
position:absolute;
display:none;
}
/* SHOW sub ul */
nav li:hover ul{
display:block;
}
<nav>
<ul>
<li>
<a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
The above was using display none/block, now instead let's see how to make it more fresh adding some animations:
Example 2:
Reveal Submenu using visibility, opacity, transition and transform
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #111;
}
nav ul li {
display:inline-block;
vertical-align:top;
position:relative;
}
nav a {
display: block;
color: white;
text-align: center;
white-space:nowrap;
padding: 14px 16px;
text-decoration: none;
}
nav li:hover > a,
nav a.active{
background-color: #ee8601;
}
nav li ul{ /* HIDE sub ul */
position:absolute;
visibility:hidden;
opacity:0;
transition:0.2s;
transform: translateY(20%);
}
nav li:hover ul{ /* SHOW sub ul */
visibility: visible;
opacity:1;
transform: translateY(0%);
}
<nav>
<ul>
<li>
<a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
</ul>
</nav>
You can do something like this:
Hide the submenu and then show it when it's parent li is hovered.
nav ul li ul {
display:none;
}
nav ul li:hover ul {
display:block;
}
But you'll need to put the submenu ul inside of the li like this:
<li><a class="#" href="#">Menu 1</a>
<ul>
<li>Submenu 1</li>
</ul>
</li>
Here's a working example: http://codepen.io/caleboleary/pen/eJOdQb
Related
I have created my nav bar which was working fine but now i tried to add sub menu in my navbar and its not showing sub menu on hover. kindly check and correct me.
First I added <ul> in my <li> tag then I added css to hide nested <ul> then I tried to show <ul> on hover <li>
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
</nav>
Looks like your <li> wrap is incorrect!
here is the fiddle
After Privacy Policy you have created another <li> that shouldn't be needed. you have to wrap the sub-menus with in privacy policy tag not a new one that is one of the reason why the css was not showing data as expected and you were almost there regarding CSS I just fixed it for you! hope it helps.
* {
margin: 0;
padding: 0;
}
nav {
height: 30px;
}
nav ul {
display: block;
position: relative;
z-index: 100;
}
nav ul li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li ul {
display: none;
}
nav ul li a {
width: 100px;
height: 30px;
display: block;
text-decoration: none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
nav ul li a:hover {
background-color: red;
}
nav ul li:hover ul {
position: absolute;
top: 30px;
display: block;
width: 100px;
}
nav ul li:hover ul li {
display: block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
</ul>
</li>
</ul>
</nav>
Why don't you start from this working snippet and try to change data according to your needs :)
HTML Sub-Nav
*{
margin: 0;
padding: 0;
}
nav{
background-color: red;
}
ul{
background-color: purple;
width: 50%;
}
nav ul li {
list-style: none;
padding: 5px;
display: inline-block;
}
nav ul li a{
text-decoration: none;
color:black;
font: bold 12px Arial;
}
nav ul li:hover{
background-color: blue;
color: red;
}
nav ul li:hover a{
color: red;
}
ul li ul {
display: none;
position:absolute;
}
nav ul li:hover ul {
display:block;
}
<nav>
<ul>
<li> Home</li>
<li> About Us</li>
<li> Contact Us</li>
<li> Privacy Policy</li>
<li>
test
<ul>
<li>Submenu 1</li>
<li>Submenu 2</li>
<li>Submenu 3</li>
<li>Submenu 4</li>
</ul>
</li>
</ul>
You have to add an anchor tag in the sub nav you have created. Because currently those sub-tabs are created but are not associated with any super-tab.
Subnav
So add this above your sub-nav code. You are good to go.
I'm trying to add a "sub menu" to a drop down menu. Say I wanted to add a sub menu to Item 3 (see html), how would I go about doing that?
Thanks,
Here's my CSS:
.nav_menu {
width:100%;
background-color:#EFEFEF;
z-index:2000;
border:1px solid #ccc;
}
.selected {
background-color:#ccc;
color:#333;
}
.nav_menu a:link {
color:#007dc1;
}
.nav_menu a:visited {
color:#007dc1;
}
.nav_menu a:hover {
color:#007dc1;
}
.nav_menu ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.nav_menu ul li {
font-size:16px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 8px 22px;
font-weight:600;
transition: all 50ms linear;
transition-delay: 0s;
}
.nav_menu ul li ul {
padding: 0;
position: absolute;
top: 37px;
left: 0;
width: 230px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
display: block;
opacity: 0;
-webkit-transition: opacity .2s;
z-index:50000;
}
.nav_menu ul li ul li {
background-color:#535353;
border-top:1px solid #fff;
display: block;
font-size:12px;
color:#fff;
}
.nav_menu ul li ul li:hover {
background: #B2B2B2;
}
.nav_menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Here's my HTML:
<ul>
<li>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with Sub Menu</li>
</ul>
</li>
</ul>
Firstly, since your menu is based simply on the CSS :hover pseudo-class, make sure that your ul and li elements do not have any space between them, because this will lead to the entire menu dissapearing.
The HTML code
<div class='nav_menu'>
<ul>
<li>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li class='nav_menu_sub'>Item 3 with Sub Menu
<ul>
<li>SubItem 3.1</li>
<li>SubItem 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Just like the drop down that you already provided, simply adding a ul element within the li element should suffice to create the sub menu. I added a nav_menu_sub class to the li that opens the sub menu making it easier to select via CSS (avoiding .nav_menu ul li ul li).
The CSS code
.nav_menu_sub {
padding:0;
margin:0;
}
.nav_menu_sub ul {
margin-top:-7px;
display: none !important;
}
.nav_menu_sub:hover ul {
display: block !important;
opacity: 1;
visibility: visible;
}
The margin-top:-7px on the ul element was added to ensure that it fits nicely up against the li.
Add the !important to the display attribute to get it overwrite the previously declared styling.
Working jsFiddle: http://jsfiddle.net/akhrbkug/
Judging from the css you posted:
.nav_menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
It looks like you have to add another ul in the submenu li:
<ul>
<li class='nav-menu'>All Items
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3 with Sub Menu
<ul>
<li>SubItem 3.1</li>
<li>SubItem 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
Fiddle for the demo
http://jsfiddle.net/ee9ebv2s/
I'm trying to make a vertical dropdown menu but doesn't seem to work. It currently doesn't display any text, just a bar going across the top of the page. It is being pushed to be by by 115px for due to requirements. Here's the HTML:
<div id="wrapper">
<h1>Flags </h1>
<nav>
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritime Signals: Letters</li>
<li>Maritime Signals: Numbers</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS:
nav {
height:30px;
}
nav ul {
background-color: #5d2c2c;
padding: 0;
list-style: none;
position: relative;
bottom: 115px;
display: block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: right;
bottom: 115px;
position: relative;
}
nav ul li a {
display: block; padding: 5px 5px;
color: #FFF; text-decoration: none;
text-align:right;
}
nav ul ul {
background: #5d2c2c; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #000;
border-bottom: 1px solid #575f6a;
position: relative;
}
The CSS needed a little work on
Try this FIDDLE it'll work
This was missing:
nav ul li:nth-child(4) ul { display:none; }
nav ul li:nth-child(4):hover ul { display:block; color:red; }
and bottom was removed from this one
nav ul li {
float: left;
position: relative;
}
I found this link the other day, it's an step by step guide with full examples, check it out: http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/
check this fiddle , a similar implementation
<nav>
<ul>
<li class="header">
People
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li class="header">
Animals
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
</nav>
nav > ul{}
nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{
display:none;
}
.header:hover > .content{display:block;}
I have the next fiddle: http://jsfiddle.net/cristi_mvp/e8UkN/4/
I want the columns to be displayed next to each other, instead of one over another.
Each column has different widths.
I tried different things but they dont work.
Also I do not want to use css column.
It should be simple, but i just can't find the answer.
Thank you.
Here is the HTML code:
<div class="header-main">
<div class="header-main-menu">
<ul class="menu">
<li> <a href='#' title='Menu 1'> Menu 1</a>
<ul>
<li>Column 1 lenght xxxx</li>
<li>Column 1</li>
<li>Column 1</li>
<li>Column 1</li>
<li>Column 1</li>
<li>Column 1</li>
</ul>
<ul>
<li>Column 2 lenght</li>
<li>Column 2</li>
<li>Column 2</li>
<li>Column 2</li>
</ul>
<ul>
<li>Column 3</li>
<li>Column 3</li>
<li>Column 3</li>
<li>Column 3</li>
<li>Column 3</li>
</ul>
</li>
<li> <a href='#' title='Menu 2'> Menu 2</a>
<ul>
<li>Column 1-2</li>
<li>Column 1-2</li>
<li>Column 1-2</li>
<li>Column 1-2</li>
</ul>
<ul>
<li>Column 2-2</li>
<li>Column 2-2</li>
<li>Column 2-2</li>
</ul>
</li>
</ul>
</div>
</div>
Here is my css:
.header-main-menu .menu {
color: #fff;
float: left;
margin: 0;
}
.header-main-menu .menu li {
display: inline-block;
float: left;
position: relative;
margin: 0;
padding: 0;
}
.header-main-menu .menu li a {
display: block;
color: #00000;
text-decoration: none;
font-size: 15px;
line-height: 15px;
height: 20px;
padding: 10px 24px 6px 10px;
display: block;
}
.header-main-menu .menu ul {
background-color:rgba(0, 0, 0, 0.9);
position: absolute;
left: -9999px;
/* Hide off-screen when not needed (this is more accessible than display:none;) */
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
z-index: 5000;
}
.header-main-menu .menu ul li {
/*padding-top: 1px;*/
/* Introducing a padding between the li and the a give the illusion spaced items */
float: none;
background-image: none;
display: block;
min-width: 120px;
}
.header-main-menu .menu ul a {
white-space: nowrap;
/* Stop text wrapping and creating multi-line dropdown items */
display: block;
font-size: 13px;
line-height: 13px;
padding: 6px 24px 2px 14px;
}
.header-main-menu .menu li:hover ul {
/* Display the dropdown on hover */
left: 0;
/* Bring back on-screen when needed */
fload:left;
}
.header-main-menu .menu li:hover a {
/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
}
.header-main-menu .menu li:hover ul a {
/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration: none;
background: none;
}
.header-main-menu .menu li:hover ul li a:hover {
/* Here we define the most explicit hover states--what happens when you hover each individual link. */
background: #FF0000;
}
.header-main-menu .menu li a:hover {
background-color: #000;
}
.header-main-menu .menu li:hover {
background: #000;
}
.header-main-menu .menu ul li:hover {
background: none;
}
Please add padding: 0 to your code. Like this:
.header-main-menu .menu ul {
color: #fff;
float: left;
margin: 0;
padding: 0;
}
.menu
{
display:block;
}
ul
{
list-style-type:none;
}
ul li
{
float:left;
width:80px;
padding:10px;
background-color:#003366;
color:white;
text-align:center;
}
a
{
color:white;
text-decoration:none;
}
ul li ul
{
display:none;
}
ul li:hover ul
{
display:block;
margin-left:-50px;
}
fiddle
I am trying to make a drop down menu using only CSS, but i'm having a hard time getting the dropdown menu the same size (width and height) as it's parent:
Working fiddle: HERE
The <nav> section from my HTML:
<nav>
<ul>
<li>Home</li>
<li>Menu With Menus
<ul>
<li>opt 1</li>
<li>opt 2</li>
<li>opt 3</li>
</ul>
</li>
<li>Whatnot</li>
</ul>
</nav>
The CSS:
nav ul {
position: relative;
display: inline-table;
list-style: none;
}
nav ul li {
float:left;
list-style-type: none;
}
nav ul li a {
background-color: #dae8ec;
color: rgb(233,78,31);
display: block;
font-weight: bold;
margin: 0 auto;
padding: 9px 18px 9px;
text-decoration: none;
border: 1px solid black;
border-radius: 2px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul li:hover > ul {
display: block;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
padding: 7px 30px;
color: rgb(233,78,31);
}
nav ul li a:hover {
background: rgb(138, 92, 132);
color:#dae8ec;
}
Any suggestions? Thanks.
Js Fiddle Demo
<nav>
<ul>
<li>Home</li>
<li>Menu Withs
<ul>
<li>opt 1</li>
<li>opt 2</li>
<li>opt 3</li>
</ul>
</li>
<li>Whatnot</li>
</ul>
</nav>
Cheers !!