I have a simple css dropdown menu but the sub menus don't seem to drop right below their parent menu. Here a link to what it currently looks like.
DEMO
Please help. Thank you.
********* here is the html**********************
<header>
<table>
<td>
<h1>Header</h1>
<nav>
<ul>
<li>menu1
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>menu2
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>menu3
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
<li>menu4
<ul>
<li>sub</li>
<li>sub</li>
<li>sub</li>
</ul>
</li>
</ul>
</nav>
</td>
</table>
</header>
************** here is the css ************************
table {
border: 1px solid black;
margin-left: auto;
margin-right: auto;
}
header {
position: absolute;
top:0;
width: 100%;
border: 1px solid black;
}
header h1 {
display: inline-block;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
}
nav li {
display: inline;
}
nav ul ul li a{
display: block;
}
nav li ul {
display: none;
}
nav li:hover ul{
display:block;
}
nav ul ul li{
display:block;
}
You just need a couple small changes to make the nested uls appear relative to their parent li:
nav li {
display: inline;
position: relative;
}
nav li ul {
display: none;
position: absolute;
padding: 0;
}
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 want to make a submenu for a submenu and also change the background color of main menu and background color on hover of submenu. This is my code, what changes should I make? The green background is not visible in submenu and also the submenu of submenu.
#horizontalmenu ul {
padding: 1;
margin: 1;
list-style: none;
}
#horizontalmenu li {
float: left;
position: relative;
padding-right: 100;
display: block;
border: 4px solid #CC55FF;
border-style: inset;
}
#horizontalmenu li ul {
display: none;
position: absolute;
}
#horizontalmenu li: hover ul {
display: block;
background: red;
height: auto;
width: 8em;
background-color: green;
}
#horizontalmenu li ul li {
clear: both;
border-style: none;
}
Html
<div id="horizontalmenu">
<ul>
<li>
News
<ul>
<li>
National</li>
<li>
International</li>
<li>Sport</li>
<li>Hollybood</li> </ul> </li>
<li> Technology
<ul> <li>IT/Software</li>
<li>Hardware</li>
<li>Iphone
<ul><li>IT/Software</li> </ul></li>
<li>Neuro-Science</li> </ul> </li>
<li> Sports
<ul> <li>Cricket</li>
<li>Tenis</li>
<li>Badminton</li>
<li>Hockey</li> </ul> </li>
<li> Country
<ul> <li>India</li>
<li>America</li>
<li>France</li>
<li>Pakistaan</li>
</ul>
</li>
</ul>
</div>
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 recently added a drop down menu to my website... well, in the works of adding a drop down menu to my website. I have the list displayed horizontally but the drop down portions of the list are not.. dropping down. I was wondering if someone would be able to take a look and tell me what I am doing wrong?
Thanks, here is my code.
HTML
<ul id="main-nav">
<li>Home</li>
<li>Products</li>
<ul>
<li>Apparel</li>
<li>Gloves</li>
<li>Punching Bags</li>
<li>Protection</li>
<li>Accessories</li>
</ul>
<li>Wholesales</li>
<ul>
<li>Equipment Catalogue</li>
<li>Wholesale Inqueries</li>
</ul>
<li>Contact</li>
<ul>
<li>Direct Contact</li>
<li>YouTube Channel</li>
<li>LinkedIn Page</li>
<li>Facebook Page</li>
</ul>
</ul>
CSS
#main-nav,
#main-nav ul {
list-style: none;
}
#main-nav {
float: left;
}
#main-nav > li {
float: left;
}
#main-nav li a {
display: block;
height: 25px;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#main-nav ul {
position: absolute;
display: none;
z-index: 999;
}
#main-nav ul li a {
width: 80px;
}
#main-nav li:hover ul {
display: block;
}
/* Main menu
------------------------------------------*/
#main-nav {
font-family: Arial;
font-size: 12px;
background: #880202;
}
#main-nav > li > a {
color: #fffff;
font-weight: bold;
}
#main-nav > li:hover > a {
background: #c90000;
color: #ffffff;
}
/* Submenu
------------------------------------------*/
#main-nav ul {
background: #880202;
}
#main-nav ul li a {
color: #ffffff;
}
#main-nav ul li:hover a {
background: #c90000;
}
put this code in you code and check
<ul id="main-nav">
<li>Home</li>
<li>Products
<ul>
<li>Apparel</li>
<li>Gloves</li>
<li>Punching Bags</li>
<li>Protection</li>
<li>Accessories</li>
</ul></li>
<li>Wholesales
<ul>
<li>Equipment Catalogue</li>
<li>Wholesale Inqueries</li>
</ul></li>
<li>Contact
<ul>
<li>Direct Contact</li>
<li>YouTube Channel</li>
<li>LinkedIn Page</li>
<li>Facebook Page</li>
</ul></li>
</ul>
li tag is over after the sub menu ul tag
I have got a submenu which expands from a nav menu type object when I hover over it. Right now, my main nav menu looks like so...
<div id= "navbar">
<ul>
<li><a href= "#" class= "navlink" id= "first"> First
<div class= "firstsubmenu">
<ul>
<li> <a href= "#" class="firstsubmenulink"> First sub menu option </li>
<li> <a href= "#" class="firstsubmenulink"> Second sub menu option </li>
etc...
</ul>
</div></a></li>
<li><a href= "#" class= "navlink" id="second"> Second
<div class= "secondsubmenu">
<ul>
..and so on
</ul>
</div>
Right now, my css is looking like
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
.navlink:link
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
.navlink:hover
{
background-color:#ADD8E6;
color:#FFFFFF;
}
.navlink:visited
{
background-color:#ADD8E6;
color:#FFFFFF;
}
Before I tried making each item in the submenu a clickable link, everything showed up perfectly fine. IE: firstsubmenu showed up perfectly. It's css is
.firstsubmenu
{
display : none;
position : absolute;
left : 75px;
top : 32px ;
background-color : red;
width : 930px;
height : 25px;
z-index : 10;
}
But now that I added the links (made every list element within an block), firstsubmenu no longer appears.
The css for each link looked something like this
.firstsubmenulink
{
display:block;
width:120px;
text-align:center;
padding:10px;
text-decoration:none;
color:#FFFFFF;
}
But as I said, the submenu no longer even appears. I realize this is a bit of a long post, but any advice would be great.
You can use the below css and create pure css based menu.
Css:
body { padding: 3em; }
#navbar * { padding:0; margin: 0; font: 1em arial; }
#navbar { position: absolute; z-index: 99; margin: 0 auto; float: left; line-height: 20px; }
#navbar a { display: block; border: 1px solid #fff; background: #EFBE37; text-decoration: none; padding: 3px 10px; color:#666666; }
#navbar a:hover { background: #C6991D; }
#navbar ul li, #navbar ul li ul li { width: 120px; list-style-type:none; }
#navbar ul li { float: left; width: 120px; }
#navbar ul li ul, #navbar:hover ul li ul, #navbar:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 120px;
}
#navbar:hover ul, #navbar:hover ul li:hover ul, #navbar:hover ul li:hover ul li:hover ul {
display:block;
}
#navbar:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 120px;
margin-top: -20px;
}
Structure:
<div id="navbar">
<ul>
<li>Home</li>
<li>Abous Us »
<ul>
<li>About us 1</li>
<li>About us 2 »
<ul>
<li>XXX
<li>XXX
<li>XXX
</ul>
</li>
</ul>
</li>
<li>Download</li>
<li>Menus »
<ul>
<li>Menus 1</li>
<li>Menus 2 »
<ul>
<li>Menus 2-1
<li>Menus 2-2
<li>Menus 2-3
</ul>
</li>
</ul>
</li>
<li>Contact</li>
<li>Feedback</li>
</ul>
jsBin live demo
I had to fix lot of errors in your HTML. Here is the css:
#navbar ul{
list-style:none;
margin:0; padding:0;
display:table;
}
#navbar li{
top:0px;
background:#bbf;
display:inline-block;
width:100px;
}
#navbar li ul li{
display:none;
}
#navbar li:hover li{
display:block;
}
And the fixed HTML:
<div id="navbar">
<ul>
<li>
First
<ul class="firstsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
<li>
Second
<ul class="secondsubmenu">
<li>1. option</li>
<li>2. option</li>
</ul>
</li>
</ul>
</div>
Now, after it works, do with colors whatever you want.
Use also alt tags in your links and images, it improves your SEO and compilance.