I wonder if you can help me. I'm trying to create a drop down menu using just HTML and CSS. However, my hover function isn't working in IE10 as before it was. It works with other browsers like firefox and chrome but not with IE10.
My HTML code
<html>
<head>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style.css" />
<![endif]-->
<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<div class = "centeredmenu">
<ul>
<li>Home</li>
<li>Client
<ul>
<li>Create Client</li>
<li>View Clients</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Search</li>
<li>View All</li>
</ul>
</li>
<li>Suppliers
<ul>
<li>Add Supplier</li>
<li>View All</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
My CSS Code
.centeredmenu ul li ul { display:none; }
.centeredmenu ul li:hover > ul { display:block; }
.centeredmenu ul li ul li ul { display:none; }
.centeredmenu ul li ul li:hover > ul { display:block; }
.centeredmenu ul {
background:#9bbe3c;
width:99.8%;
margin-top:0.5%;
z-index:1;
list-style:none;
position:relative;
display:inline-table;
font-family:'Calibri' !important;
font-size:1em;
border:1px solid #596f1b;
}
.centeredmenu ul:after { content: ""; clear:both; display:block; }
.centeredmenu ul li { float:left; }
.centeredmenu ul li a {
display:block;
color:#fff;
text-decoration:none;
padding:14px 22px 14px 23px !important;
}
.centeredmenu ul li a:hover{ background:#586f1b; }
.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }
.centeredmenu ul li ul li { float:none; position:relative; }
.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }
Today I ran into a similar problem. The drop down menu was working fine on Firefox, but not at all in IE.
1- I changed the file from html to asp.
This allowed me to see that I had some orphan fragment of code.
-> My code
-> </div>
<td class="whatever">
-> <div>
I removed it, and everything was working fine.
I just added the following code in "head" and its works for me.
meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag
When I place your HTML and CSS on JSFiddle, it works as expected.
May be something else wrong while you are accessing on your machine.
<div class = "centeredmenu">
<ul>
<li>Home</li>
<li>Client
<ul>
<li>Create Client</li>
<li>View Clients</li>
</ul>
</li>
<li>Invoices
<ul>
<li>Search</li>
<li>View All</li>
</ul>
</li>
<li>Suppliers
<ul>
<li>Add Supplier</li>
<li>View All</li>
</ul>
</li>
</ul>
</div>
Refer LIVE DEMO
I ran into the exact same issue. It turned out I was missing .
Entering the following at the top of my HTML page solved my problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The problem is that IE10 renders in "quirks" mode. So if you changed it to "standards" mode it should work fine.
Add the following in the head of your website to force IE 10 to use standards mode
if you are using php... credit for the answer goes to:
IE10 renders in IE7 mode. How to force Standards mode?
Related
I'm trying to get a drop down menu to work with this button so far it's all going well, but when I click on the menu and try to click one of the link's it closes the drop down menu instead of opening the link. Any ideas? (I know there's a way to format this post to have you be able to test the code in this browser, but I'm not sure how to do that)
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>index</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<nav class="nav-main">
<ul>
<li>
<img src="images/resume btn.jpg"/>
<div class="nav-content">
<div class="nav-sub">
<ul>
<li>Acting</li>
<li>Choreographer/Dancer</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
</body>
</html>
Here is the CSS
.nav-main .logo{
height:40px;
font-size:1.4em;
line-height:40px;
}
.nav-main > ul{
list-style-type:none;
}
.nav-main > ul > li{
float:left;
}
.nav-content{
overflow:hidden;
background-color:tan;
max-height:0;
}
.nav-content a{
color:black;
text-decoration:none;
}
.nav-content a:hover{
text-decoration:underline;
}
.nav-sub ul{
padding:0;
margin:0;
list-style-type:none;
}
.nav-sub ul li a{
display:inline-block;
padding:5px;
}
.nav-item:focus ~ .nav-content{
max-height:400px;
-webkit-transition:max-height 0.4s ease-in;
-moz-transition:max-height 0.4s ease-in;
transition:max-height 0.4s ease-in;
}
First of all you are using too much elements for task simple as that. Please use this markup:
<nav class="nav-main">
<ul>
<li>Menu item 1
<ul>
<li>Sub menu item 1</li>
<li>Sub menu item 2</li>
</ul>
</li>
</ul>
</nav>
In this markup use this css:
nav ul li ul{display: none; // or whatever code you want for hiding sub menu items}
nav ul li:hover ul{display: block; // or whatever code you want for showing sub menu items}
Also, someone already mentioned that you should use 'http://' in links even though its not mandatory.
One more mistake you have made is inside img tag:
<img src="images/resume btn.jpg"/>
Space between resume & btn is not really cool.
Hope this helps you.
I had the same problem! I think you and I followed the same video and I checked the comment and someone posted this piece of code and it works! just add it after the other .nav-content markup! this was driving me crazy for 2 days straight.
.nav-content:active {
max-height: 400px;
}
you don't need the ">" in the css, example: .nav-menu ul li - also make sure your links have http:// before www
I've isolated the issue to the problem being with the max-height:0;. If you comment that out and click on the sub menu options, it should redirect.
With that said I don't know what to change to make the max-height work. It's needed since it will hide the submenu. You may need to use jquery.
I'm new with CSS and testing some stuff. I created a dropdown menu but this doesn't work correctly.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link href = "üben_css.css" rel = "stylesheet" type="text/css">
<title> xx</title>
</head>
<body>
<div id="nav">
<ul>
<li> Home </li>
<li> xx
<ul>
<li> Hc </li>
<li> Scc </li>
</ul>
<li>Zubehör </li>
<li> Service </li>
<li> Forum </li>
</ul>
</div>
</body>
</html>
CSS code:
body{
margin:0;
padding:0;
}
#nav{
background-color:silver;
position:relative;
}
#nav ul li{
display:inline;
}
#nav ul ul{
display:none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul li{
display:block;
}
The problem is that the nav bar is displayed inline but when I hover over my "xx" element the rest of my nav bar appear under my dropdown list. How can I fix this?
http://www.fotos-hochladen.net/uploads/20140921004u0kxad3i2r.png
Remove these lines from your css:
#nav ul li:hover ul{
display:block;
}
Using
#nav ul li{
display:inline-block;
}
Compared to just inline. If it was just inline the absolute positioning below would cause multiple dropdowns to all appear in the same place according to the #nav div.
#nav ul li:hover ul{
position: absolute;
display:block;
}
This still doesn't look very good but it's functional. Checkout at tutsplus for some good tutorials.
At the same time, I'm sure you could solve this much more efficiently with jQuery.
I am trying to create a slide down vertical menu. My menu pushes down the other li's in the main part of the section like it's supposed to. The only problem is that the submenus move are moved to the right, and I want them lined up with their parent. This jsfiddle shows that problem. The source code is below, but all of it is in the jsfiddle.
Thanks,
Kirie
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DEMO</title>
<style>
div{
width:180px;
}
div ul ul {
display: none;
}
div ul li:hover > ul {
display: block;
}
div ul li {
list-style:none;
background:#F00;
width:180px;
}
div ul ul li {
background:blue;
width:180px;
}
div ul ul li a{
width:180px;
color:white;
}
div ul ul ul li {
background:red;
width:180px;
}
</style>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
</body>
</html>
Add the below to your CSS:
ul ul{
padding:0; /* stop children from being offset left */
}
Demo Fiddle
Is this what you are looking for.
Add a class to the sub menus and style it as folowing
.sub
{
padding: 0px;
}
I have the following css vertical navigation menu I have done. There are up and down images for the parent category 30px high for rollover and separate up and down images for the second and third levels of the menu rollover at 25px high.
For each level, there is a different type of up and down images if there is no continuing category.
It works OK except for 3 areas that I have been struggling with for days now and can't seem to see where I have gone wrong.
The first is that the text for each level gets smaller and smaller for some reason and the second is that at the third level, all the images shown the up and down images as if there it a continuing category, and last but not least, when a category is selected in the first, second or third category, I can't seem to find a way to keep those links highlighted to show the user that they are in that area.
I hope someone is able to figure this out as I have been going crazy for days now. Thanks in advance.
Please find the current code below (in the image areas I have described what the images are for to understand what images I am using) :
The HTML:
<div id="nav">
<ul class="menu">
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
The CSS:
#nav {
float:left;
width:200px;
z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
display:block;
width:200px;
margin:0;
padding:0;
list-style-type: none;
}
#nav ul.menu > li {
float: left;
display:block;
width:200px;
height:30px;
font-size:0.9em;
line-height:2.2em;
margin-bottom:1px;
}
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
float: left;
display:block;
width:200px;
height:25px;
font-size:0.7em;
line-height:2.2em;
}
#nav li a {
display:block;
width:200px;
color:#FFF;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
list-style-type:none;
}
#nav ul.menu > li > a {
background: transparent url('../../parent-category-with-submenus.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.menu ul ul li {
float: none;
list-style-type: none;
}
#nav li > ul {
display: none;
list-style-type: none;
}
#nav li:hover > ul {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:0px;
margin-left:192px;
}
#nav li:hover > ul.sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-40px;
margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-30px;
margin-left:198px;
}
Font Size
You font size gets smaller because you are using ems. An em is a relative unit. If you're base font size is 20px and you're using 0.75em then the font size of a child element whose parent used the base 20px font size would be 15px (20x0.75=15). Now a child of that child (grandchild) would start with the child's font size of 15px and it's font size would be 11.25px (15x0.75=11.25). I set the text to be 16px for all li in the jsFiddle below.
UP and DOWN images
I didn't bother figuring out the exact issue with this but you do have a lot of kruft in this part of your CSS. I would add a class to the li that has a sub-menu within it. Something like .has-sub-menu. Then target the anchor tags like so .menu > .has-sub-menu > a and .sub-menu > .has-sub-menu > a. Also see the jsFiddle below.
HTML
<div id="nav">
<ul class="menu">
<li>Home</li>
<li class="has-sub-menu">
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
</div>
CSS
.menu > .has-sub-menu > a {
background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
background-image: url(img-two.png);
}
Navigation Highlighting
This one cannot be done with CSS unless you add a class to each li or anchor tag. Something along the lines of the name of the page and then on each page add a body class of the same or similar name.
HTML
<!-- your code -->
<body class="products">
<!-- more of your code -->
<div id="nav">
<ul class="menu">
<li class="products">Products</li>
<li class="about">About</li>
<!-- more links -->
</ul>
<!-- more links -->
</div>
<!-- more of your code -->
</body>
In the example above we are viewing the products page. For the about page you would replace the class on the body tag with about. In the end this does not have to be added to the body tag but some other ancestor element. But the body tag is a nice clean solution and helps ensure that the class will be encapsulated within one another.
Then you could target the link like so with your CSS.
CSS
/* non-active */
#nav li {
color: white;
background-color: red;
}
/* active */
.products .products,
.about .about {
color: red;
background-color: blue;
}
If the above is not doeable then I believe you will have to do some light programming via PHP, ASP or whatever server side language you have available to you. You could also use JavaScript. You can also find answers to this with a simple StackOverflow search.
The fiddle below addresses all three issues with the solutions above. I also added a little jQuery so you can switch out and try the navigation highlighting.
http://jsfiddle.net/u2V8v/
Issue #1: The text gets smaller in the sub-menus because you have this rule
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
...
font-size:0.7em;
...
}
while the default for the first level items is
#nav ul.menu > li {
...
font-size:0.9em;
...
}
Either remove the font-size decalaration for the submenus or set the value to inherit
Issue #2
I couldn't test this since I don't have your images so I'm not sure if this is what's causing the problem but it seems you're missing the > a at the end of this CSS rule selector
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
...
}
Issue #3
To highlight the menu items you can just set a background color on the hover state, they will stay highlighted while the user is browsing sub-menus
#nav ul li:hover{
background:red;
}
I am currently trying to create some nested lists to display the following...
A...R...X
B...S...Y
C...T...Z
(where the letters will eventually be replaced by words) and have made this work perfectly in chrome and firefox, however when I use Internet Explorer I get something resembling the following...
A
B...R
C...S...X
......T...Y
...........Z
I assume it's probably to do with the css, but please can someone help me with this problem, the html and css are shown below, thanks in advance for any help.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel=stylesheet href="lists in IE.css" type="text/css">
</head>
<body>
<div id="container">
<ul id="links-nav">
<li>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</li>
<li>
<ul>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
</li>
<li>
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</body>
</html>
CSS
#container{
width:940px;
margin:0px auto;
border: 1px solid #000;
padding: 20px 10px;
height:auto;
font-family: Arial, sans-serif;
font-size:11px;
}
.clear {
clear: both;
height: 0;
overflow: hidden;
}
a{
text-decoration:none;
color:#555;
}
#links-nav li, li ul li{
list-style:none;
}
#links-nav{
list-style-type: none;
margin:0px;
padding:0px;
}
#links-nav li ul{
float:left;
width:168px;
padding: 0px 10px;
list-style-type: none;
}
add in your css
#links-nav > li {
width:168px;
float:left;
}
Demo: http://jsfiddle.net/qUJuy/2/
or
#links-nav > li {
width:168px;
display:inline;
}
Demo: http://jsfiddle.net/qUJuy/3/
The above will fix the error in ie7 (in ie8 it was already correct).