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>
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.
OK this is my piece of CSS code .
So I'm trying to replace the white color from the ul(unordered list) with the black color when I'll be hovering over it.Want to mention that I want the text to be black,when I will hover the box of a li and not the anchor.Thanks.
_____________________________________________________________________________________
body {
width: 1000px;
font-family: Arial;
margin-left: auto;
margin-right: auto;
line-height: 135%;
}
.menu ul {
list-style-type: none;
text-align: center;
background-color: black;
margin-right: auto;
margin-left: auto;
}
.menu ul li {
display: inline-block;;
padding: 10px;
border-style: solid;
border-width: 0 1px 0 1px;
border-color:white;
margin-left:0;
margin-right:-5px;
}
.menu ul li:hover{
background-color: white;
color:black;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover{
color:black;
}
___________________________________________________________________________
// HTML
<!DOCTYPE html>
<html>
<head>
<title>WORKSPACE</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<meta charset="UTF-8">
</head>
<body>
<div class="menu">
<ul>
<li>Home</li>
<li>Courses</li>
<li>Groups</li>
<li>Teachers</li>
<li>Students</li>
<li>Resources</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
Instead of making the rule to hover over the a element, change the hover state to the li and target the link.
http://jsfiddle.net/LUguq/
CSS
.menu li:hover a{
color:black;
}
Working Demo Here
just add:
.menu ul li:hover a {
color: black;
}
As you can see in JSFiddle
I have searched lots of question in this forum and it doesnt seems to help. I'm trying to center my navigation bar however despite following most of the answers text-align = center; doesn't work for me.
HTML code in ASP.NET:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!--[if lt IE 8]>
<script src ="http://ie7-js.googlecode.com/svn/version/2.1(beta2)/IE8.js"></script>
<![endif]-->
</head>
<body>
<ul id="nav">
<li>Home</li>
<li>Login</li>
<li>Report</li>
<li>Recent cases</li>
<li>About</li>
</ul>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery.effects.core.js" type="text/javascript"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
CSS Code:
body {
font-family: helvetica, arial, sans-serif;
background: #e3e3e3;
text-align: center;
}
/* MENU */
#nav {
text-align: center;
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
border: 1px solid white;
border-bottom: none;
}
#nav li a, #nav li {
text-align: center;
float: left;
}
#nav li {
text-align: center;
list-style: none;
position: relative;
}
#nav li a {
text-align: center;
padding: 1em 2em;
text-decoration: none;
color: white;
background: #292929;
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: black;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 150px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
#nav li ul
Indeed the most easiest way is to use text-align: center;. The problem you encounter is that <li> tags are block level elements. Thus it is not possible to apply text-align (applies only on inline elements) on the outer <ul> element in order to center the inner <li> elements. Therefore you have to tell the <li> tags first to behave like inline elements by applying the display property:
Markup:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Style:
ul {
margin: 0;
padding: 0;
text-align: center;
}
ul li {
display: inline-block; // or display: inline;
}
Here is my working example on jsfiddle: http://jsfiddle.net/7MKdk/
Try This:
#nav{
position:absolute;
left:30%;
}
you can remove float
Is this the part you mean?
#nav li a, #nav li {
text-align: center;
float: left;
}
By the way, try removing the float: left part. Your code almost drove me crazy. You should add IDs and classes.
Try margin:auto with exact width and remove float:left
jsfiddle link
At first float:left is needed to calculate exact width of ul. And then we need to make float:none to make use of margin:auto;
Try this:
#nav{
margin-left:10px; (Increase the px until the nav reach center)
}
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>
I'm using this: http://jsfiddle.net/fJSVz/ as my basic menu, and it's working fantastically for a bottom fixed menu. That said, I need to display the second-level list items that appear when you hover over the menu to be displayed ABOVE, CENTERED, and INLINE (on one line) instead of one-on-top-of-the-other. Any clue what I need to alter to get this to work? I'm tearing my hair out over this!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Dropup Demo</title>
<style type='text/css'>
#navigation {
width: 980px;
height: 38px;
margin-top:100px;
}
#navigation li {
float: left;
position: relative;
width:100px;
border:1px solid red;
} #navigation li:hover { background: silver; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none; }
#navigation li ul {
position: absolute;
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
#navigation li:hover ul {
bottom:20px;
display:block;
background:#eee;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding: 8px 10px;
line-height: 28px;
width: 100%;
}
</style>
</head>
<body>
<ul id="navigation">
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>3</li>
<li>4</li>
</ul>
#navigation li ul {
/*position: absolute;*/
display:none;
z-index: 1000;
min-width: 100%;
left:-1px;
}
Position absolute is the reason it makes the ul on top of the that .
Here is an fixed one http://jsfiddle.net/fJSVz/36/ .
it can't be inline becouse its width=the width of its parent width, so if you want them become inline, you need give te second ul width larger than its parent, then their li can be on one line..
so
#navigation ul li ul{
width:400%; /* in this case it will be 4*100px */
}
#navigation ul li ul li{
display:inline-block
}
here is the example
when parent is relative and the child is absolute, the child width can't be more than its parent, you need manualy put it larger.