i found this menu that's exactly what i want. It works in all modern browsers and IE 7/8. I need to find a fix for it to work in IE6. Any help would be greatly appreciated.
http://lab.returnwt.net/htmlcss/tabmenu/
The problem with this menu in IE6 is that it's using selectors like this:
header ul#menu li:hover ul
IE6 only supports :hover on a elements.
Fortunately, there's a really easy fix to make this menu work in IE6.
It's called Whatever:hover
Download the (minified) csshover3.htc file.
Add this CSS:
body {
behavior: url("csshover3.htc");
}
Here's a self-contained file that I tested to work with IE6, provided that the csshover3.htc file is in the same folder:
<!DOCTYPE html>
<html>
<head>
<title>Simple Tabbed Navigation - CSS3</title>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<meta charset="utf-8" />
<style>
body {
behavior: url("csshover3.htc");
}
body
{
background: #efefef url(images/bg_main.png);
font: 13px Helvetica, Arial;
margin: 0;
}
header
{
background: url(images/bg_head.png);
display: block; /* Compatibility fix */
}
header:after
{
background: rgba(0, 0, 0, 0.1);
content: ' ';
height: 1px;
position: absolute;
width: 100%;
z-index: 10;
}
header ul#menu
{
border-bottom: 5px solid #fff;
margin: 0;
overflow: hidden;
padding: 0 10px;
padding-top: 100px;
list-style: none
}
header ul#menu li
{
float: left;
}
header ul#menu li a
{
background: #b1d0dd;
border-top: 1px solid #d0e2ea;
color: #fff;
font-weight: bold;
display: block;
line-height: 34px;
margin-right: 2px;
padding: 0 20px;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
border-radius: 3px 3px 0 0; /* Currently working on Firefox 4.0b (Nightly), Chrome 8.0.xxxx and Opera 10.63+ */
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B1D0DD), to(#89b8cc));
background-image: -moz-linear-gradient(top, #B1D0DD, #89B8CC);
}
header ul#menu li > ul
{
display: none;
}
header ul#menu li a:hover
{
background: #fff;
border-top-color: #fff;
color: #666;
text-shadow: none;
}
header ul#menu ul {
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
display: none;
margin-left: 0;
margin: 0;
padding: 5px 0 0 0;
position: absolute;
z-index: 999;
}
header ul#menu ul li
{
border: 1px solid rgba(0, 0, 0, 0.1);
border-width: 0 1px;
float: none;
list-style: none;
margin: 0;
padding: 0;
}
header ul#menu ul li a
{
background: none;
border-bottom: 1px solid #ededed;
border-top: none;
color: #666;
font-weight: normal;
font-size: 12px;
margin: 0 20px;
padding: 0;
text-shadow: none;
width: 118px;
}
header ul#menu li a.home-icon span
{
background: url(images/home-icon.png) no-repeat center center;
display: block;
text-indent: -999em;
overflow: hidden;
text-align: left;
direction: ltr;
width: 16px;
}
header ul#menu li a.home-icon:hover span
{
background-image: url(images/home-icon-hover.png);
}
header ul#menu ul li:last-child a
{
border-bottom: none;
}
header ul#menu li:hover ul
{
display: block;
}
header ul#menu ul li a:hover
{
color: #000;
}
header ul#menu ul li:last-child
{
border-bottom: none
}
</style>
</head>
<body>
<header>
<ul id="menu">
<li><span>Home</span></li>
<li>
Community
<ul>
<li>Recent Activity</li>
<li>Member Forum</li>
<li>Member List</li>
<li>Member Groups</li>
</ul>
</li>
<li>Pet Help</li>
<li>Pets for Sale</li>
<li>Pet Services</li>
</ul>
</header>
</body>
</html>
Related
I am trying to follow this tutorial and I can't get the navigation menu to work. I have also watched this tutorial where the tutor states that by changing the position to static, one can make it responsive and look neat on a mobile device. I am trying to move my submenu more to the right and have it changed back into position absolute of around 150px but my game menu does not work too well...
I also noticed that if I changed the left position to around 200px, then it does work better but this is too far to the left:
* {
margin: 0px;
padding: 0px;
}
body {
font-family: verdana;
background-color: #abc;
padding: 50px;
}
h1 {
text-align: center;
border-bottom: 2px solid #009;
margin-bottom: 50px;
}
/* Rules for navigation menu */
ul#navmenu, ul.sub1 , ul.sub2 {
list-style: none;
font-size: 12px;
}
ul#navmenu li {
width: 250px;
text-align: center;
position: relative; /*This is very important to get sub menu absolutely line up with it */
float: left; /*Get elements side by side */
margin-right: 4px;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 250px;
height: 25px;
line-height: 25px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
ul#navmenu .sub1 a {
margin-top: 5px;
}
ul#navmenu .sub2 a {
margin-left: 10px;
}
ul#navmenu li:hover > a { /* > child selector */
background-color: #cfc;
}
ul#navmenu li:hover a:hover {
background-color: #ff0;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
top: 26px;
left: 0px;
}
ul#navmenu ul.sub2 {
display: none;
position: absolute;
top: 0px;
left: 251px;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display:block;
}
.darrow {
font-size: 14px;
position: absolute;
top: 5px;
right: 4px;
}
.rarrow {
font-size: 14px;
position: absolute;
top: 8px;
right: 4px;
}
#media screen and (max-width: 600px) {
ul#navmenu li {
width: 250px;
text-align: center;
position: relative; /*This is very important to get sub menu absolutely line up with it */
float: center;
margin-right: 4px;
}
ul#navmenu a {
text-decoration: none;
display: block;
width: 100px;
height: 50px;
line-height: 25px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
}
ul#navmenu .sub1 a {
margin-top: 5px;
}
ul#navmenu .sub2 a {
margin-left: 10px;
}
ul#navmenu ul.sub1 {
display: none;
position: absolute;
left: 150px;
top: -50px;
}
ul#navmenu ul.sub2 {
display: none;
position: static;
}
ul#navmenu li:hover .sub1 {
display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
display:block;
}
.darrow {
display: none;
}
.rarrow {
display: none;
}
}
how to do a responsive navigation menu
Try the following. It makes use of only HTML and CSS.
body {
background: #ccc;
font-family: helvetica, arial, serif;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
.wrap {
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 40px;
}
/* a little "umph" */
.decor {
background: #6EAF8D;
background: -webkit-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: linear-gradient(left, white 50%, #6EAF8D 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}
a {
text-decoration: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
/* clear'n floats */
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #0E0E0E;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
/* prime */
ul.primary li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.primary li:last-child a {
border-right: none;
}
ul.primary li a:hover {
color: #000;
}
/* subs */
ul.sub {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.sub li {
float: none;
margin: 0;
}
ul.sub li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.sub li:last-child a {
border-bottom: none;
}
ul.sub li a:hover {
color: #000;
background: #eeeeee;
}
/* sub display*/
ul.primary li:hover ul {
display: block;
background: #fff;
}
/* keeps the tab background white */
ul.primary li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.primary li:hover > a{
color: #000;
}
#media only screen and (max-width: 600px) {
.decor {
padding: 3px;
}
.wrap {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.primary li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}
ul.primary li:hover ul {
display: block;
background: #272727;
color: #fff;
}
ul.sub {
display: block;
position: static;
box-shadow: none;
width: 100%;
}
ul.sub li a {
background: #272727;
border: none;
color: #8B8B8B;
}
ul.sub li a:hover {
color: #ccc;
background: none;
}
}
<head>
<meta name="viewport" content="width=device-width">
</head>
<div class="wrap">
<span class="decor"></span>
<nav>
<ul class="primary">
<li>
Dog
<ul class="sub">
<li>Bulldog</li>
<li>Mastiff</li>
<li>Labrador</li>
<li>Mutt</li>
</ul>
</li>
<li>
Cat
<ul class="sub">
<li>Tabby</li>
<li>Black Cat</li>
<li>Wrinkly Cat</li>
</ul>
</li>
<li>
Bird
<ul class="sub">
<li>Humming Bird</li>
<li>Hawk</li>
<li>Crow</li>
</ul>
</li>
<li>
Horse
<ul class="sub">
<li>Brown Horse</li>
<li>Race Horse</li>
<li>Tall Horse</li>
</ul>
</li>
<li>
Burger
<ul class="sub">
<li>Cheesy</li>
<li>More Ketchup</li>
<li>Some Mustard</li>
<li>Extra Butter</li>
</ul>
</li>
</ul>
</nav>
</div>
I'm trying to make a nav for a website in html and css. It is very simple, and the only thing I want is to display dropdown menus and color them when hovered.
Right now I'm almost there, however I still have two problems:
The elements are overlapping
When you hover a submenu, there are two "hover" squared backgrounds
displayed.
I have the following CSS:
header {
background-color: rgb(147, 147, 147);
position: fixed;
top: 0;
margin: 0;
padding: 0;
left: 0;
height: 8%;
width: 100%;
border-bottom: 0.3em rgb(44, 171, 185) outset;
box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50);
}
header nav ul {
list-style-type: none;
top: 0;
margin: 0;
}
.active {
background-color: rgba(0, 0, 0, 0.35);
}
header nav ul li.active:hover {
background-color: rgba(48, 67, 91, 0.64);
}
header nav ul li {
position: relative;
display: block;
}
header nav ul li a {
display: block;
line-height: 40px;
padding: 8px;
margin: 0;
top: 0;
float: left;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
background-color: inherit;
}
header nav ul li:hover:not(.active) {
background-color: rgba(48, 67, 91, 0.35);
}
header nav ul li.dropdown ul {
display: none;
}
header nav ul li.dropdown:hover ul {
display: block;
position: absolute;
}
header nav ul li ul li {
display: block;
float: none;
padding: 30px;
}
And my html is the following:
<body>
<header>
<nav>
<ul>
<li class="active">Element1</li>
<li>Element2</li>
<li class="dropdown">Menu
<ul>
<li>Submenu1</li>
<li>Submenu2</li>
</ul>
</ul>
</nav>
</header>
</body>
What I want is to change the background of the hovered element and to display correctly the subelements in the dropdowns.
I hope I was clear enough, thank you
You can see the code here: https://jsfiddle.net/hdd260s4/
Hello I changed according to your requirement. Please use this code.let me know any query.
<!DOCTYPE html>
<html>
<head>
<style>
header {
background-color: rgb(147, 147, 147);
position: fixed;
top: 0;
margin: 0;
padding: 0;
left: 0;
height: 56px;
width: 100%;
border-bottom: 0.3em rgb(44, 171, 185) outset;
box-shadow: 0 0.18em 0.625em rgba(0, 0, 0, 0.50);
}
header nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
header nav li {
float: left;
}
header nav ul li a {
display: block;
line-height: 40px;
padding: 8px;
text-decoration: none;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
background-color: inherit;
}
header nav li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
}
.active {
background-color: rgba(0, 0, 0, 0.35);
}
header nav ul li.active:hover {
background-color: rgba(48, 67, 91, 0.64);
}
header nav li a:hover, .dropdown:hover .dropbtn {
background-color: rgba(48, 67, 91, 0.35);
}
header nav li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(48, 67, 91, 0.35);
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li class="active">Element1</li>
<li>Element2</li>
<li class="dropdown">
Menu
<div class="dropdown-content">
Submenu1
Submenu2
Submenu3
</div>
</li>
</ul>
</header>
</nav>
</body>
</html>
I uploaded My code here please see this demo.https://jsfiddle.net/hansraj/bmbuLcfk/
Please try this and change according to you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Show Hide Dropdown Using CSS</title>
<style type="text/css">
ul{
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li{
display: inline-block;
position: relative;
line-height: 21px;
text-align: left;
}
ul li a{
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover{
color: #fff;
background: #939393;
}
ul li ul.dropdown{
min-width: 100%; /* Set width of the dropdown */
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover ul.dropdown{
display: block; /* Display the dropdown */
}
ul li ul.dropdown li{
display: block;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>
Products ▾
<ul class="dropdown">
<li>Laptops</li>
<li>Monitors</li>
<li>Printers</li>
</ul>
</li>
<li>Contact</li>
</ul>
</body>
</html>
I uploaded My code here please see this demo.https://jsfiddle.net/hansraj/z2sojhbm/
I am working on a menu bar for a web site and the dropdown menu's work fine, the only problem is they will only display when my mouse is right at the edge of where they come out. Can anyone help, would be much appreciated. The part that you have to hover over is the very bottom of the red areas, and on dropdown 1 another submenu at the bottom to the right.
Here is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" href="#"/>
</head>
<body>
<div id="banner">
<p id="title">Code Works</p>
</div>
<center>
<div style="background-color: #FFFF00" id="display">=</div>
</center>
<nav>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Setting Up +
<ul>
<li>Programs</li>
<li>Files</li>
</ul>
</li>
</ul>
</li>
<li>Templates +
<ul>
<li>Web Page</li>
<li>Clocks</li>
<li>Calendars</li>
<li>Maps</li>
<li>Transitions</li>
<li>Video</li>
<li>Audio</li>
<li>Search</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
**CSS**
html {
height: 100%;
}
body {
background: linear-gradient(#C0C0C0, #E0E0E0);
height: 100%;
margin: 0;
background-repeat: no-repeat;
background-attachment: fixed;
}
#banner
{
width: 1376px;
margin-left: -10px;
margin-right: -10px;
margin-top: -32px;
padding-top: 0px;
background-color: #3366CC;
background-size: 100%;
height: 80px;
border-bottom: 4px inset #254A93;
background: linear-gradient(#3366CC, #2952A3);
}
#title
{
padding-top: 0.7em;
color: #FFFF00;
text-align: center;
font-size: 32px;
}
nav ul ul
{
display: none;
}
nav ul li:hover > ul
{
display: block;
}
nav ul
{
opacity: 0;
margin-top: -1px;
margin-left: -10px;
background: linear-gradient(#FFFF66, #FFFF00);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
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
{
border-bottom: 4px solid #FF0000;
background: linear-gradient (#FFFF66, #FFFF00);
border-top: 2px solid #FFFF66;
}
nav ul li:hover a
{
color: #3366CC;
}
nav ul li a
{
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul
{
width: 200px;
background: #FFFF00; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li
{
border: 2px outset #FFFF00;
background: linear-gradient(#FFFF66, #FFFF00);
float: none;
position: relative;
}
nav ul ul li a
{
padding: 15px 40px;
color: #757575;
}
nav ul ul li a:hover
{
border-top: #E0E0E0;
border-bottom: #E0E0E0;
background: linear-gradient(#FFFF00, #FFFF66);
}
nav ul ul ul
{
position: absolute; left: 100%; top:0;
}
p:hover ul
{
display: none;
}
nav ul:hover
{
opacity: 0.7;
}
nav ul:hover nav ul li
{
opacity: 0.7;
}
#display
{
opacity: 0.7;
height: 30px;
background: linear-gradient(#FFFF00, #FFFF66);
}
#display a
{
size: 32px;
text-decoration: none;
}
nav ul ul li:hover
{
border-top: 1px solid #E0E0E0;
border-bottom: 1px solid #E0E0E0;
}
I think there are some redundant CSS in your code, but to make it work, you just need to add the line opacity:0.7 to this CSS:
nav ul li:hover > ul {
display:block;
opacity:0.7;
}
Here is the working fiddle
I don't know why this not working properly on ie8.
<div id="bluemenu" class="bluetabs">
<ul>
<li class="">
<a rel="dropmenu3_c" href="company/">Company
<span><img width="11"height="7" src="images/arrow_btn.png"></span>
</a>
</li>
</ul>
</div>
This is the css for the navigation ul
.bluetabs ul {
color: #FFFFFF;
float: right;
font: 13px 'Open Sans','Lucida Grande',Arial,"Verdana sans-serif";
list-style-type: none;
margin: 0;
padding: 0;
text-align: left;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
text-transform: uppercase;
}
This is the css for the navigation li
.bluetabs li {
display: inline;
float: left;
height: 36px;
margin: 0;
padding: 0;
}
This is the css for the navigation li a
.bluetabs li a {
background: url("../images/menu_nav_hover_bg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
color: #FFFFFF;
margin: 0;
padding: 5px 15px;
text-decoration: none;
}
Any CSS hacks that I can make this work on IE 8?
I can kind of reproduce this locally, but not entirely.
Gonna take a shot in the dark...
Try:
.bluetabs li a {
background: #ccc;
color: #FFFFFF;
margin: 0;
padding: 5px 15px;
text-decoration: none;
display: inline-block; /* Add this */
}
/* Add this */
.bluetabs li a > span {
display: inline-block;
}
I'm having a problem with a nav bar in my site. It works in chrome, but something weird happens in firefox and I have no idea what it is...
In Firefox, the dark bar menu background doesn't show. It is transparent for some reason:
In Chrome is works as expected:
My sites wrapper has opacity 0.9, but I don't think this has anything to do with the menu not showing, since it shows on chrome...
Here is the HTML and CSS for my header: http://jsfiddle.net/Xdc9F/
HTML:
<div class="header">
<header>
<h1>
<a href="#">
<img src="http://i.imgur.com/z3Y7cmW.png" alt="" />
</a>
</h1>
</header>
</div>
<!-- closing header -->
<div class="menu">
<ul>
<li class="active"><span>Home</span>
</li>
<li><span>Sobre Nós</span>
</li>
<li><span>Localização</span>
</li>
<li><span>Contato</span>
</li>
</ul>
</div>
CSS:
.menu, .menu ul, .menu ul li, .menu ul li a {
padding: 0;
margin: 0;
line-height: 1;
font-family:'Capriola', sans-serif;
}
.menu:before, .menu:after, .menu > ul:before, .menu > ul:after {
content:'';
display: table;
}
.menu:after, .menu > ul:after {
clear: both;
}
.menu {
zoom:1;
height: 69px;
background: url(http://i.imgur.com/XnKK9WL.png) repeat-x center bottom;
margin-top: 100px;
border-radius: 2px;
}
.menu ul {
background: url(http://i.imgur.com/elYFBsn.png) repeat-x 0px 4px;
opacity: 1;
height: 69px;
}
.menu ul li {
float: left;
list-style: none;
}
.menu ul li a {
display: block;
height: 37px;
padding: 22px 30px 0;
margin: 4px 2px 0;
border-radius: 2px 2px 0 0;
text-decoration: none;
font-size: 15px;
color: white;
text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
font-weight: 400;
opacity: .9;
}
.menu ul li:first-child a {
margin: 4px 2px 0 0;
}
.menu ul li a:hover, .menu ul li.active a {
background: url(http://i.imgur.com/jCkWOJx.png) center bottom;
display: block;
height: 37px;
margin-top: 0px;
padding-top: 26px;
color: #004f7c;
text-shadow: 0 1px 1px rgba(255, 255, 255, .55);
opacity: 1;
text-transform: uppercase;
}
I just pasted the header section, if you need the whole page code just tell me.
Everything works great for me. Probably you have done something wrong with the rest html or CSS.
The blue border is because of this rule:
background: url("http://i.imgur.com/XnKK9WL.png") repeat-x scroll center bottom transparent;
If you delete there isn't blue border