I was trying to make a website but ran into issues with the dropdown menu.
I watched a video on youtube about how to make one, but I made some changes myself and there is something wrong with it. As you can see on the screenshot below it drags the rest of the navigation bar down with it (Home and Contact us), which is not what I intend it to do.
I have tried various things, but this is the closest I have come.
HTML
<div class="navigation">
<ul>
<li><a>☰</a>
<ul>
<li>example1</li>
<li>example2</li>
</ul>
</li>
<li>Home</li>
<li>Contact us</li>
</ul>
</div>
CSS
.navigation ul{
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9);
.navigation ul{
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9);
.navigation ul li{
display: inline;
padding: 0px 10px 0px 0px;
list-style-type: none;
.navigation ul li a {
/*display: block;*/
padding: 10px 0px;
text-decoration: none;
color: #E5E4E2;
.navigation ul li ul {
display: none;
width: 130px;
background: rgba(53, 57, 53,0.9);
.navigation ul li:hover ul{
display: block;
.navigation ul li ul li {
float: left;
.navigation ul li ul li a{
padding: ;
.navigation ul li ul li a:hover {
color: #AFE1AF;
.navigation ul li a:hover{
color: #AFE1AF;
you can give possition:absolute to the "dropdown" element, and it's also better to use "class", for easy reading and styling of the element
.navigation ul{
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9);
}
.navigation ul{
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53,0.9);
}
.navigation ul li{
display: inline;
padding: 0px 10px 0px 0px;
list-style-type: none;
}
.navigation ul li a {
/*display: block;*/
padding: 10px 0px;
text-decoration: none;
color: #E5E4E2;
}
.navigation ul li ul {
display: none;
width: 130px;
background: rgba(53, 57, 53,0.9);
}
.navigation ul li:hover ul{
display: block;
}
.navigation ul li ul li {
float: left;
}
.navigation ul li ul li a{
}
.navigation ul li ul li a:hover {
color: #AFE1AF;
}
.navigation ul li a:hover{
color: #AFE1AF;
}
.dropdown{
position: absolute;
}
<div class="navigation">
<ul>
<li><a>☰</a>
<ul class="dropdown">
<li>example1</li>
<li>example2</li>
</ul>
</li>
<li>Home</li>
<li>Contact us</li>
</ul>
</div>
It's not working because the div.navigation > ul > li > ul is positioned: static which interrupts the flow during rendering. Set the parent to position:relative and that element to position: absolute which will stop it from shunting the other elements in the navbar down. I've added a couple of classes to make it clear what I've changed.
An explainer here
See here:
.navigation ul {
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53, 0.9);
}
.navigation ul {
width: 100%;
height: 25px;
margin: 0;
padding: 10px 120px;
background: rgba(53, 57, 53, 0.9);
}
.navigation ul li {
display: inline;
padding: 0px 10px 0px 0px;
list-style-type: none;
}
.navigation ul li a {
/*display: block;*/
padding: 10px 0px;
text-decoration: none;
color: #E5E4E2;
}
.navigation ul li ul {
display: none;
width: 130px;
background: rgba(53, 57, 53, 0.9);
}
.mainmenu {
position: relative;
cursor: pointer;
}
.submenu {
position: absolute;
top: 1.5rem;
}
.navigation ul li:hover ul {
display: block;
}
.navigation ul li ul li {
float: left;
}
.navigation ul li ul li a {
padding: 0;
}
.navigation ul li ul li a:hover {
color: #AFE1AF;
}
.navigation ul li a:hover {
color: #AFE1AF;
}
<div class="navigation">
<ul>
<li class="mainmenu"><a>☰</a>
<ul class="submenu">
<li>example1</li>
<li>example2</li>
</ul>
</li>
<li>Home</li>
<li>Contact us</li>
</ul>
</div>
Related
This is my nav bar with a drop down menu below some. Book goes below Departments, I have a lot more but this is an example. When I hover over more options, it loses focus on the nav bar and shows the on hover discription for an image. how do i stop this?
<div class="NavBar">
<div align="center">
<ul>
<li>Home</li>
<li>Departments
<ul class="MiniNavBar">
<li>Books</li>
<li>Books</li>
<li>Books</li>
<li>Books</li>
</ul></li>
<li>Top Brands</li>
<li>Gallery</li>
<li>About Us</li>
</ul>
</div>
</div>
My CSS
.NavBar{
background-color: #C10000;
height: auto;
width: 430px;
border: thin solid #000000;
border-radius: 5px;
margin-top: 8px;
}
.MiniNavBar{
width: 97px;
}
.NavBar ul ul {
display: none;
}
.NavBar ul li:hover > ul {
display: block;
font-family: Calibri;
font-size: 10px;
}
.NavBar ul {
padding: 2px;
list-style: none;
position: relative;
display: inline-block;
font-family: Calibri;
font-size: 15px;
}
.NavBar ul li {
float: left;
}
.NavBar ul li:hover {
background-color: #C10000;
color: #FFDD00;
}
.NavBar ul li:hover a {
background-color: #000000;
color: #FFDD00;
}
.NavBar ul li a {
display: block;
padding: 10px 10px;
background-color: #C10000;
color: #FFDD00;
text-decoration: none;
}
.NavBar ul ul {
position: absolute;
}
.NavBar ul ul li {
float: none;
margin-top: 0px;
position: relative;
}
.NavBar ul ul li a {
padding: 15px 40px;
background-color: #C10000;
color: #FFFFFF;
}
.NavBar ul ul li a:hover {
background-color: #C10000;
color: #FFFFFF;
}
.NavBar ul ul ul {
position: absolute;
left: 100%;
top:0;
}
I have noticed my nav bar is transparent and I would like it to not be. I have no previous opacity/transparency set that would cause it to be inheriting the property. I would like to make my nav bar non transparent.
Here is the CSS:
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
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: black;
}
nav ul li:hover a {
opacity: 1;
color: white;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
}
Here is the corresponding HTML:
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</li>
<li>Starter Kits</li>
<li>Rebuildables
<ul>
<li>Genesis</li>
<li>Dripper</li>
<li>Silica/Cotton</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical</li>
<li>Variable Voltage</li>
</ul>
</li>
<li>Accessories</li>
</ul>
</nav>
<p id="welcome_paragraph">
Welcome, blah blah (this text shows through the nav bar)<br />
</p>
HTML
<nav>
<ul>
<li>Information
<ul>
<li>Getting Started?
</li>
<li>About Us
</li>
<li>Contact
</li>
</ul>
</li>
<li>Starter Kits
</li>
<li>Rebuildables
<ul>
<li>Genesis
</li>
<li>Dripper
</li>
<li>Silica/Cotton
</li>
</ul>
</li>
<li>Mods
<ul>
<li>Mechanical
</li>
<li>Variable Voltage
</li>
</ul>
</li>
<li>Accessories
</li>
</ul>
</nav>
<p id="welcome_paragraph">Welcome, blah blah (this text shows through the nav bar)
<br />
</p>
CSS
nav {
margin: 20px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
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: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
#welcome_paragraph {
position: relative;
top: 50px;
width: 500px;
margin: auto;
color:white;
}
body
{
background-color:blue;
}
Updated CSS of yours
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
Updated Fiddle
Have you tried;
nav {
background: white;
}
Elements are transparent unless you set a background on them or its inherited.
EDIT: If this doesn't help set up a fiddle for us jsfiddle.net.
In your css
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
background is white.
If you change background to other colour may be your problem will go off. Hope it will help
Cheers !!
i've a menu with sub menus in it, i've added border at bottom while hovering but when i hover on the menu the menu height increases a bit, the whole menu takes a space at top and bottom when i put it in a div.
here is my fiddle : http://jsfiddle.net/p7Nsf/
<div class="head"></div>
<div class="menudiv">
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul>
<li>School</li>
<li>Vision and Mission </li>
<li>Principal’s desk
<li>Management
</ul> </li>
<li>Admission
<ul>
<li>Overview</li>
<li>Download application form</li>
</ul> </li>
<li>Gallery</li>
<li>School Calander</li>
<li>News & Events</li>
<li>Career</li>
<li>Contact</li>
</ul>
</div>
</div><!-- menu div ends-->
<div class="foot"></div>
CSS
.menudiv
{
width:980px;
}
.menu {
font-family: 'Open Sans', sans-serif;
font-size:14px;
}
.menu ul ul {
display: none;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul {
background: #111312;
list-style: none;
position: relative;
display: inline-table;
border:3px solid #111312;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
.menu ul:after {
content: "";
clear: both;
display: block;
}
.menu ul li {
float: left;
}
.menu ul li:hover {
background: #111312;
border-bottom: 3px solid #fff;
}
.menu ul li:hover a {
color: #fff;
}
.menu ul li a {
display: block;
padding-top: 10px; padding-left: 25px; padding-right: 25px; padding-bottom: 10px;
color: #fff;
text-decoration: none;
}
.menu ul ul {
background: #111312;
padding: 0;
position: absolute;
top: 100%;
}
.menu ul ul li {
float: none;
position: relative;
}
.menu ul ul li a {
padding: 10px;
color:#000;
display: block;
}
.menu ul ul li a:hover {
background: #111312;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top:0;
padding: 0;
}
.menu ul ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid pink;
position: relative;
}
.menu ul ul ul li a {
padding: 10px;
color: #fff;
display: block;
}
.menu ul ul ul li a:hover {
background: #95CEF1;
color: #000;
}
.menu ul ul ul ul {
position: absolute;
left: 100%;
top:0;
}
.head
{
width:500px;
height:200px;
background:#789;
}
.foot
{
width:500px;
height:200px;
background:#123;
}
Try this, your menu item jumps because you are adding border to the item so it increases its height by the 3 px border
.menu ul li {
float: left;
border-bottom: 3px solid transparent;
}
http://jsfiddle.net/p7Nsf/1/
reduce padding on the anchor to compensate for the 3px
.menu ul li a {
padding-bottom: 7px;
}
http://jsfiddle.net/p7Nsf/2/
Update
.menu ul {
background: none repeat scroll 0 0 #111312;
border: 3px solid #111312;
display: inline-table;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
}
I removed the display prop
http://jsfiddle.net/p7Nsf/4/
I have a drop down menu I'm building for my HTML5 site and I've got the coding correct (or so I think) and the drop down is not appearing just the top level elements.
I have scanned through the Code and as far as I'm aware, the code seems ok. I place the code below and see if you can spot the error:
<navigation id="NavigationLink" style="" class="navigationStyle">
<section class="menu">
<ul>
<li><a class="left_nosub" href="default.html">Home</a></li>
<li><a class="center_hassub" href="products.html">Products</a>
<ul>
<li>Graphic Design</li>
<li>Web Design</li>
<li>Content Management Systems</li>
<li>Social Media Design</li>
</ul>
</li>
<li><a class="center_hassub" href="#">News</a>
<ul>
<li>Current Projects</li>
<li>Day-To-Day-Stuff</li>
</ul>
</li>
<li><a class="right_nosub" href="#">Contact Us</a></li>
</ul>
</section>
.menu {
font-family: Arial, Helvetica, sans-serif;
position: relative;
font-size: 11px;
margin: 0;
z-index: 1000;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #f0f0f0;
font-weight: bold;
width: 80px;
height: 42px;
text-align: center;
border-bottom: 0;
background-image: url(images/center.png);
line-height: 48px;
font-size: 11px;
overflow: hidden;
padding-left: 1px;
}
.menu .left_nosub {
background-image: url(images/left.png);
padding-left: 1px;
margin-right: -1px;}
.menu .right_nosub {
background-image: url(images/right.png);
}
.menu ul {
padding: 0;
margin: 0;
list-style: none;
}
.menu ul li {
float: left;
position: relative;
}
.menu ul li ul {
display: none;
}
.menu ul li:hover a {
color: #000;
background: url(images/center_hassub.png);
}
.menu ul li:hover ul li a.center_hassub {
background: #6a3;
color: #000;
}
.menu ul li:hover ul li:hover a.center_hassub {
background: #6fc;
color: #000;
}
.menu ul li:hover ul li ul {
display: none;
}
.menu ul li:hover .left_nosub {
color: #000;
background: url(images/left_nosub.png);
}
.menu ul li:hover .right_hassub {
color:#000;
background: url(images/right_hassub.png);
}
.menu ul li:hover .right_nosub {
color: #000;
background: url(images/right_nosub.png);
}
.menu ul li:hover ul li a {
background-image: none;
display: block;
height: 28px;
line-height: 26px;
color: #000;
width: 142px;
text-align: left;
margin: 0;
padding: 0 0 0 11px;
font-weight: normal;
}
.menu ul li:hover ul{
margin: 0 0 0 3px;
padding: 0;
background-image: url(images/dropdown.png);
background-repeat: no-repeat;
background-position: bottom left;
}
.menu ul li:hover ul li a:hover {
color: #000 !important;
background-image: url(images/sub_hover.png);
}
.menu ul li:hover ul li:hover ul {
display: block;
position: absolute;
left: 105px;
top: 0;
}
.menu ul li:hover ul li:hover ul.left {
left: -105px;
}
.menu ul li:hover ul .sub_active {
background-image: url(images/sub_active.png);
margin-right: 1px;
}
Change the following class
.menu ul li:hover ul{
margin: 0 0 0 3px;
padding: 0;
background-image: url(images/dropdown.png);
background-repeat: no-repeat;
background-position: bottom left;
display:block;
}
My Current Menu navigation bar in html: -
You can see my blog Live by click this Link :- www.4time2fun.com
<div id="topmenu">
<div id="navigation">
<ul class="categories">
<li class="articles"> <img src="http://4.bp.blogspot.com/-9vOA-2QWrsA/UF7oc4Cgn5I/AAAAAAAAE1k/hVusG2XkwKU/s1600/home.png"></li>
<li class="tags mega">Category 4 Fun
<ul class="two">
<li class="tag-item"><a title="#Title" href="#Link">Accessories</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Automotive</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Beauty</a></li>
<li class="tag-item"><a title="#Title" href="#Link">Clothing/Apparel</a></li>
</ul> </li>
<li class="about">Team 2 Hire
</li> <li class="about">Who We Are</li>
<li class="articles">2 Contact Us</li>
</ul> </div></div>
My Current Menu navigation bar in Css: -
#topmenu {
background: none repeat scroll 0 0 #FBFBFB;
display: block;
height: 70px;
padding-top: 15px;
text-transform: uppercase;
width: 990px;
}
#navigation {
padding: 0 0 5px;
}
#navigation ul li {
display: inline;
margin-left: 0;
}
#navigation ul li a {
padding: 8px 15px;
}
#header #navigation li.mega ul li a {
font-family: 'Cuprum',arial,serif;
font-weight: normal;
text-transform: lowercase;
}
li.mega ul {
background-color: rgba(255, 255, 255, 0.97);
border-top: 2px solid #22C3EB;
padding: 10px 0;
position: absolute;
top: 50px;
z-index: 2;
}
li.mega ul li {
display: block;
float: left;
width: 145px;
}
li.mega ul li a {
line-height: 30px;
}
#navigation ul li.tags a {
background: url("http://3.bp.blogspot.com/-ftBEvkZbSMo/TwKvUPTt-II/AAAAAAAAECE/Wrh6HobGwak/s000/arrow_rewards.gif") no-repeat scroll 160px 14px transparent;
padding-right: 25px;
}
#navigation ul li.tags a:hover {
background: url("http://3.bp.blogspot.com/-ftBEvkZbSMo/TwKvUPTt-II/AAAAAAAAECE/Wrh6HobGwak/s000/arrow_rewards.gif") no-repeat scroll 160px -10px transparent;
}
#navigation ul li.tags li a, #navigation ul li.tags li a:hover {
background: none repeat scroll 0 0 transparent;
}
#navigation ul li.tags li a {
display: block;
padding: 0 15px;
}
#navigation ul li.tags li a:active {
border: medium none;
}
#navigation ul li.tags li {
float: left;
width: 160px;
}
li.mega ul.two.second {
display: none !important;
}
li.mega ul {
left: -9999px;
position: absolute;
}
li.mega:hover ul, li.mega li ul:hover {
left: auto;
}
body.category-articles #navigation ul li.articles a, body.category-bestoftheweek #navigation ul li.bestoftheweek a, body.category-about #navigation ul li.about a, body.page-template-page-about-php #navigation ul li.about a, body.page-template-page-contact-php #navigation ul li.contact a {
background-color: #22C3EB;
color: #FFFFFF;
}
#topmenu #navigation a {
color: #616060;
font-family: 'Cuprum',arial,serif;
font-size: 18px;
font-weight: normal;
text-transform: uppercase;
}
#topmenu #navigation a:hover {
border-radius: 50px 50px 50px 50px;
color: #BBBBBB;
}
Right now my Sub-menu open in horizontal line and Now I want to create my Sub-menu (Category 4 Fun) in vertical By using ul class "two" and li class "tag-item".
add this style to your css code
.two{
width:100px;
margin-left:50px;
}
DEMO