This pure css dropdown menu works fine in Firefox, Chrome, Safari and Opera, but just shows the list in IE9. It's assumed that it wouldn't work in older versions of IE. It was my understanding IE9 solved the hover, etc. problems with dropdown menus. How do I fix this?Thanks.
The pure CSS is:
body {
background: ;
font-family: Arial Black, Helvetica, sans-serif; font-size: 12px; line-height: 16px;
}
nav {
margin: 0px auto;
text-align: center;
}
nav ul ul {
display: none;
width: 130px;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 10px;
border-radius: 10px;
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: #377C37;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 5px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5F6975; border-radius: 0px 0px 10px 10px; padding: 0px;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #;
border-bottom: 0px solid #; position: relative;
border-radius: 0px 10px 0px 0px;
}
nav ul ul li a {
padding: 3px 30px;
color: #fff;
}
nav ul ul li a:hover {
background: #3BA110;
border-radius: 0px 0px 0px 0px;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
border-radius: 0px 10px 10px 10px;
}
The HTML is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GRH Multi-Level</title>
<meta name="Author" content="George R. Hozendorf" />
<link rel="stylesheet" type="text/css" href="../down_menu_lawsart.css" />
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li><a>Portfolios ▼</a>
<ul>
<li><a>Horses ►</a>
<ul>
<li>Horses I</li>
<li>Horses II</li>
<li>Horses III</li>
<li>Horses IV</li>
<li>Horses V</li>
<li>Horses VI</li>
<li>Horses VII</li>
</ul>
</li>
<li><a>Dogs ►</a>
<ul>
<li>Dogs I</li>
<li>Dogs II</li>
</ul>
</li>
<li><a>People ►</a>
<ul>
<li>People I</li>
<li>People II</li>
</ul>
</li>
<li>Stills</li>
</ul>
</li>
<li>Order</li>
<li>Contact Me</li>
</ul>
</nav>
</body>
</html>
I was formatting your code and I realized that you missed the closing </ul> before the </nav>. Verify that
I tried your code and with the "Modernizr Library" add/include to your code everything works fine. Even using IE8 http://modernizr.com/
<script type="text/javascript" src="modernizr.js"></script>
You have used html5 element which doesn't support ie old version. If you want to support html5 element in ie older version then just used following js in your html file withing head tag.
<script type="text/javascript">
document.createElement("nav");
</script>
Related
I made a simple 2 tier navigation menu with only one dropdown menu. I've added a 🢓 entity to that 2 tier dropdown menu and it's enlarging its containing element. There's no margin/padding/border that causes this problem. Is there a way to fix that without removing the HTML entity?
nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 1rem 0;
background-color: cornflowerblue;
color: white;
border-right: 2px solid white;
border-top: 2px solid white;
font-family: sans-serif;
font-weight: bold;
}
/* appears when floating */
nav#menu ul ul {
display: none;
position: absolute;
top: 100%;
}
nav#menu ul ul li a{
display: block;
text-decoration: none;
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 1rem 0;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul ul li {
float: none;
width: 190px;
padding: 0;
}
nav#menu ul li:hover > ul {
display: block;
}
nav#menu > ul::after {
content: "";
display: block;
clear: both;
}
.level2 li {
border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Menu</title>
</head>
<body>
<nav id="menu">
<ul>
<li>Home</li>
<li>Menu 🢓
<ul class="level2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Products</li>
<li>Help</li>
<li class="lastitem">About</li>
</ul>
</nav>
</body>
</html>
Yes, there is. The enlargement is caused by the glyph for the character entity being drawn from a different font, with different font metrics.
What I recommend doing is putting the entity reference in a span, and giving the span a minimal line-height. Something like this:
nav#menu ul {list-style-type: none; position: relative; padding: 0;}
nav#menu ul li {float: left;width: 190px;}
nav#menu ul li a {
text-decoration: none;
display: block;
text-align: center;
padding: 1rem 0;
background-color: cornflowerblue;
color: white;
border-right: 2px solid white;
border-top: 2px solid white;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul li a span { /* <== the added rule */
line-height:1px;
}
/* appears when floating */
nav#menu ul ul {
display: none;
position: absolute;
top: 100%;
}
nav#menu ul ul li a{
display: block;
text-decoration: none;
text-align: center;
background-color: cornflowerblue;
color: white;
padding: 1rem 0;
font-family: sans-serif;
font-weight: bold;
}
nav#menu ul ul li {
float: none;
width: 190px;
padding: 0;
}
nav#menu ul li:hover > ul {
display: block;
}
nav#menu > ul::after {
content: "";
display: block;
clear: both;
}
.level2 li {
border-top: 2px solid white;
}
nav#menu a:hover, nav#menu a:focus{background-color:rgb(45, 114, 241);}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Menu</title>
</head>
<body>
<nav id="menu">
<ul>
<li>Home</li>
<li>Menu <span>🢓</span>
<ul class="level2">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Products</li>
<li>Help</li>
<li class="lastitem">About</li>
</ul>
</nav>
</body>
</html>
I loaded your code up and opened it in a browser, and all of the menu items are the same size. But yes, you can wrap the arrowhead in a span tag, assign it a class, and customize it to either shrink the font-size or set the line-height or whatever you want really.
I think there's a quite a few different ways you can fix this.
I've created a CSS vertical submenu which works fine with the :hover selector to open the submenu's. However, when I try and change this to a :focus selector, it doesn't work. Can anyone tell me what I'm doing wrong? The code is purely CSS and there's no Javascript involved.
nav ul {
margin-top:1px; /* tucks the child ul up close to the parent li */
border-color: blue;
border-width: 10px;
border-style: solid;
width: 150px;
overflow: hidden;
}
nav li {
list-style-type: none;
border-color: aqua;
border-width: 10px;
border-style: solid;
}
nav ul li {
display: none;
border-color: lime;
border-width: 10px;
border-style: solid;
margin:1px;
margin-top:-10px;
margin-left:-10px;
}
nav {
background-color: #c8b99c; /* pale brown */
width: 220px;
margin-left:auto;
margin-right: auto;
}
nav ul li.selected {
background-color: #c18946;
}
nav li a { /* to make the whole box clickable, not just the link text */
display:block; /* <<< this is the bit that does it */
line-height:23px;
text-decoration:none;
border-color: red;
border-width: 3px;
border-style: solid;
}
nav li:hover ul li {
display: block;
}
<!doctype html>
<html lang="en">
<html>
<head>
<title>My Webpage</title>
<link type="text/css" rel="stylesheet" href="nav_style.css">
</head>
<body>
<nav>
<li>Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
<li>Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
</nav>
</body>
</html>
Any ideas?
HTML element li does not receive focus. That is why :focus selector is not working on li elements.
You can fix this by adding tabindex attribute to the li element.
Example:
nav ul {
margin-top:1px; /* tucks the child ul up close to the parent li */
border-color: blue;
border-width: 10px;
border-style: solid;
width: 150px;
overflow: hidden;
}
nav li {
list-style-type: none;
border-color: aqua;
border-width: 10px;
border-style: solid;
}
nav ul li {
display: none;
border-color: lime;
border-width: 10px;
border-style: solid;
margin:1px;
margin-top:-10px;
margin-left:-10px;
}
nav {
background-color: #c8b99c; /* pale brown */
width: 220px;
margin-left:auto;
margin-right: auto;
}
nav ul li.selected {
background-color: #c18946;
}
nav li a { /* to make the whole box clickable, not just the link text */
display:block; /* <<< this is the bit that does it */
line-height:23px;
text-decoration:none;
border-color: red;
border-width: 3px;
border-style: solid;
}
nav li:hover ul li,nav li:focus ul li {
display: block;
}
<!doctype html>
<html lang="en">
<html>
<head>
<title>My Webpage</title>
<link type="text/css" rel="stylesheet" href="nav_style.css">
</head>
<body>
<nav>
<li tabindex="0">Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
<li tabindex="0">Home
<ul>
<li class="selected">Home
<li>Skeleton Page 1</li>
<li>Skeleton Page 2</li>
</ul>
</li>
</nav>
</body>
</html>
I fixed it. I needed :focus-within, not :focus.
I am having some problem with centering this horizontal navigation bar. Here is my JSFiddle: http://jsfiddle.net/W796k/embedded/result/
I'm looking for two things:
1. How can I center the navigation bar horizontally without putting a specified width?
2. How to further add some more 'li' in the 'ul' so that all the 'li's wil be squeezed automatically to make room for the new added 'li's in the navigation bar?
Have I made everything clear? Ask me if you need more info. Thank U all in advance.
Here is my code:
<Doctype! html>
<html>
<head>
<title> horizontal dropdown menu </title>
<style type="text/css" media="screen">
a{
font-family: "verdana", sans-serif;
font-weight: bold;
}
nav ul{
list-style: none;
position: relative;
background: #efefef;
background: linear-gradient (top,#efefef,#bbbbbb);
background: moz-linear-gradient (top, #efefef,#bbbbbb);
background: webkit-linear-gradient (top,#efefef,#bbbbbb);
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
padding: 0 20px;
border-radius: 10px;
display: inline-table;
}
nav ul li{
display: inline-block;
border-right: 1px solid #fff;
}
nav ul li:hover{
background: #5b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li a{
text-decoration: none;
color: #000;
padding: 20px 20px;
display: block;
}
nav ul li:hover a{
color: #ffffff;
}
nav ul ul{
background: #5f6975;
border-radius: 0; padding: 0;
position: absolute; top: 100%;
display: none;
}
nav ul li:hover > ul{
display: block;
}
nav ul ul li{
display: block;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
border-right: 0;
position: relative;
}
nav ul ul li a{
padding: 10px 40px;
}
nav ul ul li a:hover{
background: #4b545f;
}
nav ul ul ul{
position: absolute; left: 100%; top: 0;
}
</style>
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Works ↓
<ul>
<li> Photoshop </li>
<li> Illustrator </li>
<li> Web Design →
<ul>
<li> HTML </li>
<li> CSS </li>
</ul>
</li>
</ul>
</li>
<li> Downloads ↓
<ul>
<li> Softwares </li>
<li> Ebooks </li>
</ul>
</li>
<li> About Us </li>
<li> Contact </li>
</ul>
</nav>
</body>
</html>
you can use
nav { text-align: center }
IMO,
nav { margin: 0 auto;}
Explanation: "0" will set the "margin-top" & "margin-bottom" to zero. And "auto" property will set left and right margins equally thus setting nav to the centre;
Apply this style:
nav{
margin: 0 auto;
display: table;
}
demo
Can't you just use:
nav { text-align: center }
In your CSS
Well, you can use a table instead of list. If you are using list, giving width will not set your added list items as you are wishing.
1 & 2.making it center without giving a specific width can be avoided using the table.Give a width to your table and there will be no problem even if you add an extra element to your table.It will auto adjust in the given width with out disturbing your layout.
Simply have this line of code in your stylesheet.
nav {
text-align: center
}
text-align: center; will do the magic for you..
the following will be the css
*{
list-style: none;
margin:0;
padding: 0;
}
nav table{
border-spacing: 10px 0;
}
.make-block{
position:relative;
}
nav table td span{
clear:both;
text-decoration: none;
display: table-cell;
white-space: nowrap;
position:relative;
}
nav table td:hover{
background: #000;
color:#fff;
}
nav table td dl {
display: none;
position: absolute;
}
nav table td:hover dl{
display: block;
}
dd{
padding-right: 20px;
background: #fff;
overflow: hidden;
display: inline-block;
position:relative;
}
ul.l1 li{
clear: both;
font-weight:bold;
font-size:10px;
padding: 5px 0;
}
nav a{
text-decoration: none;
}
.l1{
display: table-cell;
padding: 6px;
white-space: nowrap;
}
the following is the mark-up that you can use.
<nav>
<table>
<td>
<div class="make-block">
<span>a</span>
<dl>
<dd>
<ul class="l1">
<li>b</li>
<li>c</li>
</ul>
</dd>
</dl>
</div>
</td>
<td>
<div class="make-block">
<span>b</span>
<dl>
<dd>
<ul class="l1">
<li>b</li>
<li>c</li>
</ul>
</dd>
</dl>
</div>
</td>
</table>
</nav>
a{
font-family: "verdana", sans-serif;
font-weight: bold;
}
nav ul li{
display: inline-block;
border-right: 1px solid #fff;
}
nav ul li:hover{
background: #5b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li a{
text-decoration: none;
color: #000;
padding: 20px 20px;
display: block;
}
nav ul li:hover a{
color: #ffffff;
}
nav ul ul{
background: #5f6975;
border-radius: 0; padding: 0;
position: absolute; top: 100%;
display: none;
}
nav ul li:hover > ul{
display: block;
}
nav ul ul li{
display: block;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
border-right: 0;
position: relative;
}
nav ul ul li a{
padding: 10px 40px;
}
nav ul ul li a:hover{
background: #4b545f;
}
nav ul ul ul{
position: absolute; left: 100%; top: 0;
}
/* flexbox */
nav {
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: center;
align-items: center;
width: 100%;
height: auto;
background-color: lightgrey;
}
nav ul {
background-color: cornflowerblue;
padding: 1rem;
margin: 1rem;
-webkit-align-self: center;
align-self: center;
}
/* || flexbox */
<nav>
<ul>
<li> Home </li>
<li> Works ↓
<ul>
<li> Photoshop </li>
<li> Illustrator </li>
<li> Web Design →
<ul>
<li> HTML </li>
<li> CSS </li>
</ul>
</li>
</ul>
</li>
<li> Downloads ↓
<ul>
<li> Softwares </li>
<li> Ebooks </li>
</ul>
</li>
<li> About Us </li>
<li> Contact </li>
</ul>
</nav>
Why is the logo here having a slight overlap at the bottom portion? The CSS and HTML are given below. I've tried overriding the css properties respective to the logo <li> element. but it didn't work.
working fiddle
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<ul id="nav">
<li>WORK</li>
<li>BLOG</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li class="logo">
<a href="#" style="padding:0;">
<img src="logo.png" />
</a>
</li>
</ul>
</div>
</body>
</html>
CSS
body {
margin: 0;
}
#nav {
list-style-type: none;
margin: 0;
padding: 0;
}
#nav li {
width: 20%;
float: right;
text-align: center;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
}
#nav a:link, #nav a:visited {
background-color: #071726;
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
Depends on what you're trying to accomplish.
http://jsfiddle.net/66eKE/3/
#nav {
list-style-type: none;
margin: 0;
padding: 0;
-webkit-box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
box-shadow: 3px 3px 3px rgba(51,51,51,0.3);
background: #000;
float: left;
width: 100%;
}
#nav li {
margin: 0;
padding: 0;
width: 19%;
text-align: center;
display: inline-block;
float: right;
}
#nav li a {
display: block;
padding: 0.5em 5px;
text-decoration: none;
font-weight: bold;
color: #F2F2F2;
}
#nav a:link, #nav a:visited {
}
#nav a:hover, #nav a:active, #nav a:focus {
background-color: #326773;
}
This makes it so you can resize your logo to whatever you want. The menu item may be floating outside the div. In that case you either need to float the parent, hide the parent with overflow, or clear the float.
Refactor
I refactored a few things such as the drop shadow and background color on the parent. This allows the majority of the effect to be dependent on the parent div rather than the individual items. I'm only assuming here though. Do you have a photoshop mockup of what you want? Gives us a better idea of what you need for CSS.
I saw the following drop-up menu example:
http://jsfiddle.net/W5FWW/360/
html:
<div id="menu">
<ul>
<li><center>Home</center>
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
</ul>
</div>​
This example works for me perfectly on Chrome but fails to work on IE 9,
The menu should open when I'm hovering the Menu link.
(It works when I open it on jsfiddle but when copying it to html file and runs this independently it fails)
Why this working on Chrome and doesn't works on IE 9? What can I do?
Thanks!
You don't have a doctype set do you.
"Note: In IE there must be declared a <!DOCTYPE> for the :hover selector to work on other elements than the <a> element."
http://www.w3schools.com/cssref/sel_hover.asp
You have a :hover on the <li>:
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;
}
I've tested this on:
Firefox 17.0.1
Chrome 21.0.1180.89 m
IE 9.0.8112.16421
and it works great.
Just as a word of advice do not use CSS drop-downs for key navigation in case old browsers are unable to support it. You risk loosing key functionality.
Also depending on your DOCTYPE! <center> is obsolete and you should consider centering using CSS instead.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" />
<meta charset="UTF-8">
</head>
<body>
<div id="menu">
<ul>
<li class="centretext">Home
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
</ul>
</div>​
</body>
</html>
The only way I can get this to fail is by throwing IE into Quirks mode.
Ensure you have a valid doctype in your file and you should be fine.
Please advise if this is not the issue :)
Here is the complete code that is working on IE7/8/9 and other browsers. Please read up on Doctype declaration.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
div, ul, li{ padding:0; margin:0; list-style:none;}
#menu {
margin-top: 100px;
float: left;
line-height: 10px;
left: 200px;}
#menu a {
display: block;
text-decoration: none;
color: #3B5330;}
#menu a:hover { background: #B0BD97;}
#menu ul li ul li a:hover {
background: #ECF1E7;
padding-left:9px;
border-left: solid 1px #000;}
#menu ul li ul li {
width: 140px;
border: none;
color: #B0BD97;
padding-top: 3px;
padding-bottom:3px;
padding-left: 3px;
padding-right: 3px;
background: #B0BD97;
z-index:1;
}
#menu ul li ul li a {
font: 11px arial;
font-weight:normal;
font-variant: small-caps;
padding-top:3px;
padding-bottom:3px;}
#menu ul li {
float: left;
width: 146px;
font-weight: bold;
border-top: solid 1px #283923;
border-bottom: solid 1px #283923;
background: #979E71;}
#menu ul li a {
font-weight: bold;
padding: 15px 10px;}
#menu li{
position:relative;
float:left;}
#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
display:none;
list-style-type:none;
width: 140px;}
#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
display:block;}
#menu:hover ul li:hover ul li:hover ul {
position: absolute;
margin-left: 145px;
margin-top: -22px;
font: 10px;}
#menu:hover ul li:hover ul {
position: absolute;
margin-top: 1px;
font: 10px;
}
#menu>ul>li:hover>ul {
bottom:100%;
border-bottom: 1px solid transparent
}​
</style>
</head>
<body>
<div id="menu">
<ul>
<li><center>Home</center>
<ul>
<li>About Us</li>
<li>Disclaimer</li>
</ul>
</li>
</ul>
</div>​
</body>
</html>