I have a problem while adding drop-down menu on this tabs.
How can I add any drop-down menus while using the CSS below?
CSS:
body {
font-size: 80%;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
ul#tabs {
list-style-type: none;
margin: 30px 0 0 0;
padding: 0 0 0.3em 0;
}
ul#tabs li { display: inline }
ul#tabs li a {
color: #42454a;
background-color: #dedbde;
border: 1px solid #c9c3ba;
border-bottom: none;
padding: 0.3em;
text-decoration: none;
}
ul#tabs li a:hover { background-color: #f1f0ee }
ul#tabs li a.selected {
color: #000;
background-color: #f1f0ee;
font-weight: bold;
padding: 0.7em 0.3em 0.38em 0.3em;
}
div.tabContent {
border: 1px solid #c9c3ba;
padding: 0.5em;
background-color: #f1f0ee;
}
div.tabContent.hide { display: none }
Current HTML:
<html>
<head>
<title></title>
</head>
<body>
<ul id="tabs">
<li>About JavaScript tabs</li>
<li>Advantages of tabs</li>
<li>
Using tabs
<ul>
<li>Sub-Item #7</li>
<li>Sub-Item #7</li>
</ul>
</li>
</ul>
</body>
</html>
Usage tab and Sub-item tab should be my drop-down menus.
/* CSS FOR DROPDOWN */
#tabs li{
display: block;
float: left;
}
#tabs a {
display: block;
}
#tabs ul li {
display: block;
float: none;
}
#tabs ul {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
width: auto;
}
#tabs li:hover ul {
visibility: visible;
}
Check it here .
I have solved your problem visit link
CSS
ul#tabs li ul{
display:none;
}
ul#tabs li:hover ul{
display:block;
position:absolute;
z-index:1;
top:65px;
}
ul#tabs li:hover ul li{
float:none;
margin-bottom:20px;
}
Related
I have horizontal menu bar, and I trying to add sub menu for one of item, but I am not able to add it, Its appending to my main menu, please someone help me to where i missing
thanks
HTML
<div id="talltabs-maroon">
<ul>
<li class="first">Home <span>Page</span></li>
<li class="active"><span>About us</span></li>
<li class="dropdown"><a class="dropbtn" href="#"> <span> Report </span></a>
<ul class="dropdown-content" style="left:0">
<li>
<a href="">
<p>Valve Report</p>
</a>
</li>
<li>
<a href="">
<p>Cylinder Report</p>
</a>
</li>
</ul>
</li>
<li class="last">Contact <span>Us</span></li>
</ul>
</div>
CSS for Main menu
#talltabs-maroon {
clear: left;
float: left;
padding: 0;
border-top: 3px solid #CD324F;
width: 100%;
overflow: hidden;
font-family: Georgia, serif;
height: 90px;
position: inherit;
}
#talltabs-maroon ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
position: relative;
left: 50%;
text-align: center;
}
#talltabs-maroon ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
}
#talltabs-maroon ul li a {
display: block;
float: left;
margin: 0 3px 0 0;
padding: 0px 10px 6px 10px;
background: #CD324F;
text-decoration: none;
color: #fff;
}
#talltabs-maroon ul li a p:hover {
color: aqua;
}
#talltabs-maroon ul li a:hover {
padding: 20px 10px 6px 10px;
color: black
}
#talltabs-maroon ul li.active a,
#talltabs-maroon ul li.active a:hover {
padding: 25px 10px 6px 10px;
border-width: 5px;
border-color: aqua;
color: aqua;
}
CSS for drop down menu i tried.
.dropbtn {
list-style-type: none;
color: white;
padding: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: block;
}
.dropdown-content {
list-style-type: none;
display: none;
position: absolute;
right: 0;
/*background-color: black;*/
background-image: url('../../Images/black-olive.jpg'); /*dropdowm popup*/
min-width: 160px;
box-shadow: 0px 8px 16px 5px rgba(0,0,0,0.2);
z-index: 1;
padding-right: 2px;
margin-right: 2px;
}
.dropdown-content a {
color: white;
padding: 10px 14px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
/*background-color: gray;*/
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
/*background-color: #3e8e41;*/
}
pleas help me.
thanks
tink.
Here is my answer for same example, I changed complete css,
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
display: inline-block;
margin-right: -1px;
position: relative;
padding: 15px 20px;
background: #CD324F;
cursor: pointer;
color: black;
height: 40px;
width: auto;
text-align:center;
}
ul li a{
color:black;
}
ul li:hover {
background: #CD324F;
color: #fff;
height: 45px;
}
ul li a:hover {
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 68px;
left: 0;
width: 160px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
}
ul li ul li {
background: #ce5068;
display: block;
color: #CD324F;
height: 35px;
}
ul li ul li:hover {
background: #CD324F;
height: 35px;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<div style="height: 77px; width:100%; margin-top:65px;text-align:center; border-top:solid; border-top-color:#CD324F">
<ul><li>Home</li>
<li>About</li>
<li>
Portfolio
<ul>
<li>Web Design</li>
<li>Web Development</li>
<li>Illustrations</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
Result: on hover portfolio, drop down will appear
Working example on JSFiddle.
I really recommend to look at bootstrap's drop down menu. It is easy to use and most things are already done for you. good luck
Here is the link: https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
your code is bit confusing , i have created a simple demo for you how to do it.
here is my HTML code
body {
background: #212121;
font-size:22px;
line-height: 32px;
color: #ffffff;
word-wrap:break-word !important;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-size: 60px;
text-align: center;
color: #FFF;
}
h3 {
font-size: 30px;
text-align: center;
color: #FFF;
}
h3 a {
color: #FFF;
}
a {
color: #FFF;
}
h1 {
margin-top: 100px;
text-align:center;
font-size:60px;
font-family: 'Bree Serif', 'serif';
}
#container {
margin: 0 auto;
}
p {
text-align: center;
}
nav {
margin: 50px 0;
background-color: #E64A19;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
nav ul li {
display:inline-block;
background-color: #E64A19;
}
nav a {
display:block;
padding:0 10px;
color:#FFF;
font-size:20px;
line-height: 60px;
text-decoration:none;
}
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default */
nav ul ul {
display: none;
position: absolute;
top: 60px; /* the height of the main nav */
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
<div id="container">
<nav>
<ul>
<li>Home</li>
<li>WordPress
<!-- First Tier Drop Down -->
<ul>
<li>Themes</li>
<li>Plugins</li>
<li>Tutorials</li>
</ul>
</li>
<li>Web Design
<!-- First Tier Drop Down -->
<ul>
<li>Resources</li>
<li>Links</li>
<li>Tutorials
</ul>
</nav>
</div>
here is index.html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
<img class="logo-img" src="SENCOR_Logo.jpg" width="130" height="45">
<nav>
<ul>
<li>Monitoring</li>
<li>Process</li>
<li>Post and Create Email/Excel</li>
<li>Reports
<ul>
<li>Re-Create Email</li>
<li>Merge and Post</li>
<li>Create Excel Report</li>
</ul>
</li>
<li>
<li>Tools
<ul>
<li>Users</li>
<li>Folder Path</li>
<li>Change Folder Path</li>
</ul>
</li>
<li>Sales</li>
</ul>
</nav>
</div>
</body>
</html>
here are the style.css code:
body{
margin: 0;
padding: 0;
font-size: 15px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li > ul{
display : none;
margin-top:1px;
background-color: #bbb;
}
nav li > ul li{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
-----------
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
so i wanted to have a sub menu for may navigation bar that if the mouse pointed in the nav menu the sub menu will drop down. but my code didnt work. what seem to be the problem?
Remove overflow: hidden; from nav make it works. Because overflow hidden not allow submenu to display on hover.
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
// overflow: hidden; // remove this
}
Working Fiddle
remove overflow this class nav
body{
margin: 0;
padding: 0;
font-size: 15px;
font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
margin: 0;
display: inline-block;
list-style-type: none;
transition: all 0.2s;
}
nav > ul > li > a {
color: #aaa;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li > ul{
background-color: #bbb;
display: none;
margin-top: 1px;
}
nav li:hover ul{
display: block;
}
nav li > ul li a {
color: #111;
display: block;
line-height: 2em;
padding: 0.5em 2em;
text-decoration: none;
}
nav li:hover {
background-color: #666;
}
nav li:hover > ul{
position:absolute;
display : block;
}
-----------
.logo-img{
position: fixed;
margin: 10px 15px 15px 10px;
left: 0;
display:inline;
}
.bg-div{
background:#333;
height: 50px;
}
.bg-div nav {
position: fixed;
display:inline;
right: 0;
}
https://jsfiddle.net/28ze1wxv/1/
Same answer, just remove the overflow hidden from
nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}
after that your code is working,
I have a CSS Menu which i have had some help with getting sorted, it nearly works as i would like.
i just want to be able to change the text colour on LI hover and also the sub menu seems to be displaying more to the right when it should be directly underneath
CSS:
.menu-my-integra-container {
border:1px solid black;
display:block;
float:left;
}
#menu-my-integra, ul.sub-menu {
list-style: none;
padding: 0;
margin: 0;
}
#menu-my-integra > li {
float:left;
display: block;
margin-right:0px;
position:relative;
background:#F36F25;
padding:8px;
color:#FFFFFF;
text-decoration:none;
}
#menu-my-integra > li:hover {
background:#FFFFFF;
color:#F36F25;
}
ul.sub-menu {
display:none;
width:200px;
position:absolute;
z-index:1;
}
#menu-my-integra li:hover ul.sub-menu {
display: block;
max-height: 200px;
background:#F36F25;
}
ul.sub-menu li {
color:#FFFFFF;
float:none;
padding:5px;
}
ul.sub-menu li:hover {
color:#F36F25;
background:#FFFFFF;
float:none;
padding:5px;
}
http://jsfiddle.net/c2u21366/
This will change the texts color to the parents:
#menu-my-integra li > a {
color: inherit;
}
Add left: 0; to ul.sub-menu to align your sub-menu to the left.
ul.sub-menu {
left: 0;
}
You color attribute needs to point to the anchor tag rather than the list tag. The colour choice is being overwritten by the default browser style. You need a more direct style path. The following CSS will colour your list as
.menu-item a{
color:#FFFFFF;
}
.menu-item a:hover {
color:#F36F25;
}
css file
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
</body>
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
Your submenu is not properly positioned. You're missing left: 0;. That should fix the positioning.
ul.sub-menu {
display: none;
width: 200px;
position: absolute;
z-index: 1;
left: 0;
}
In regards to hover color
a:hover {
color: #000 !important;
}
Ofcourse I used !important cause I don't understand which color you actually want to change.
I have a dropdown below ive creaeted, but im having troulbe centering the the menu. Ive tried to put <center> tags around it and also set the ul to margin auto 0 but its not working. Is there anything im missing?
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
</style>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
I went ahead and put it on jsfiddle Here
I assume that you actually want to center the list items rather than just the menu.
JSfiddle Demo
Revised CSS
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center; /* added this */
font-size:0; /* whitespace adjustment */
}
ul li {
font-size:1rem; /* font-size reset */
display: block;
position: relative;
/* float: left; removed this */
display: inline-block;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
Do you want the whole menu centered? If so, it helps to stick that all within something, like a table or div
so I added the following to your code:
css
#navbar {
width: 50%;
margin: 0 auto;
}
html
<div id="navbar">
all your ul/li's
</div>
all together
<style type="text/css">
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
#navbar {
width: 50%;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="navbar">
<ul id="menu">
<li>Home</li>
<li>Portfolio
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Logo Design</li>
<li>Blog Design</li>
</ul>
</li>
<li>Projects
<ul>
<li>This is a project</li>
<li>So is this</li>
<li>and this</li>
<li>don't forget this too</li>
</ul>
</li>
<li>Contact
<ul>
<li>Support</li>
<li>Quote</li>
<li>General Enquiry</li>
</ul>
</li>
</ul>
</div>
Here is a JSFiddle that demo's what I think you're after: JSFiddle
Basically, I changed your parent <li> to display: inline-block and removed the float: left property. To center those parent nav items, I applied text-align: center to the parent <ul>. Then I changed the nested dropdowns ul ul to be text-align: left and then set those <li>'s to display: block.
Final CSS (changed some selectors to target differently):
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
text-align: center; /* added this */
}
ul > li {
display: inline-block; /* changed from display: block */
position: relative;
/*float: left;*/
}
ul ul { text-align: left; } /* added this */
li ul {
display: none;
}
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #1e7c9a;
margin-left: 1px;
white-space: nowrap;
}
ul ul li { display: block; } /* added this */
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
background: #1e7c9a;
}
Below is my code, currently when I hover on "About Us" everything below the dropdown menu opens; how can i change the css so that it only hovers when i mouseover, this means, when i hover on "Team", then I should see the menus below it.
also how can i adjust the width so that it is shiffted more to the left.
also when the dropdown menu is longer in lenth, it hides below my content, i want the dropdown menu to be over the body of the page, not in hiding.
thanks in advance you all.
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>
JSFiddle: http://jsfiddle.net/LWEry/
Like this:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover > ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
.sub-menu
{
position: absolute;
top: 0;
left: 100%;
}
http://jsfiddle.net/3xWcu/2/
I changed one selector.
FROM
li:hover ul
TO
li:hover > ul
Edited my fiddle above. Added a sub-menu class to the ul containing the Profile and Board li tags:
<ul class="sub-menu">
<li>Profile</li>
<li>Board</li>
</ul>
and added some CSS above.
You mean like this? http://jsfiddle.net/3xWcu/
<style>
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #000061;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A; }
li:hover ul {
display: block;
position: absolute;
width: 100%;
}
ul li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A; }
li:hover li a:hover { background: #95A9B1; }
</style>
<body>
<ul id="menu">
<li><b>Home</b></li>
<li><b>About Us</b>
<ul>
<li>Team
<ul>
<li>Profile</li>
<li>Board</li>
</ul>
</li>
</ul>
</li>
<ul>
</body>