IE10 stopping menu from working correctly - html

Please see a menu I'm using on a site below. It works fine in most browsers but with IE10 (IE11 is fine) when you hover over a menu item then go to select a sub menu item, when the cursor goes into any of the small gaps between the vertical sub menu items the menu thinks the user has went outside the submenu and it closes.
Can anybody tell me what is causing this to happen in IE10 and nothing else?
Regards,
Marc
#nav-wrap {
height:28px;
position:relative;
top:-70px;
width:100%;
margin:0 auto;
z-index:10;
text-align:center;
}
#nav {
font-size:15px;
font-weight:400;
text-align:center;
position:relative;
display:inline-table;
}
#nav ul li:hover > ul {
display:block;
}
#nav ul {
padding:0px;
margin:0px;
list-style:none;
position:relative;
}
#nav ul:after {
content:"";
clear:both;
display:block;
}
#nav ul li { /* KEY - Changes main nav bar li style */
float:left;
margin-left:14px;
margin-right:14px;
}
#nav ul li a {
display:block;
color:white;
text-decoration:none;
background:#416b8f;
border-radius:2px;
padding:3px 15px 3px 15px;
}
#nav ul li a:hover {
background:#003768;
border-radius:0px;
-webkit-transition: ease-in 0.2s;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition: ease-in 0.2s;
}
.selected {
background:#003768;
display:block;
color:white;
text-decoration:none;
border-radius:2px;
padding:3px 15px 3px 15px;
}
#nav ul ul {
position:absolute;
top:100%;
text-align:left;
margin:0;
display:none;
}
#nav ul ul li {
float:none;
position:relative;
margin:0px;
font-size:14px;
padding-top:1px;
padding-bottom:1px;
padding-left:2px;
}
#nav ul ul li:hover {
}
#nav ul ul li a {
border-radius:0px;
padding-top:5px;
padding-bottom:5px;
}
#nav ul ul li a:hover {
background:#003768;
-webkit-transition: ease-in 0.2s;
-moz-transition: ease-in 0.2s;
-o-transition: ease-in 0.2s;
transition: ease-in 0.2s;
}
#nav ul ul ul {
position:absolute;
left:100%; /* switch to left to change position of nested menus */
top:0;
}
li {
white-space: nowrap;
}
<div id="nav">
<ul>
<li>HOME</li>
<li>ABOUT
<ul>
<li>ACET
<ul>
<li>ACET HELPS</li>
<li>ACCREDITATION</li>
</ul>
</li>
<li>FEATURES</li>
<li>WEB DASHBOARD</li>
<li>ACET 8</li>
<li>CLIENTS</li>
<li class="selected">NEWS</li>
</ul>
</li>
<li>SERVICES
<ul>
<li>TRAINING</li>
<li>SUPPORT
<ul>
<li>HELP DESK</li>
<li>USER GUIDE</li>
<li>ACET TECHNICAL PRACTICE</li>
</ul>
</li>
<li>DATA IMPORT</li>
<li>DEVELOPMENT</li>
</ul>
</li>
<li>ASSET INTEGRITY
<ul>
<li>INTEGRITY INFORMATION</li>
<li>INSPECTION & INTEGRITY MANAGEMENT</li>
<li>NON-DESTRUCTIVE TESTING
<ul>
<li>SPECIALIST INSPECTION SERVICES</li>
<li>INSPECTION METHOD CAPABILITY</li>
<li>INSPECTION METHOD SELECTION</li>
</ul>
</li>
<li>DATA SOLUTIONS</li>
</ul>
</li>
<li>DOWNLOADS
<ul>
<li>LATEST NEWSLETTER</li>
<li>ACET DATA SHEET</li>
<li>ASSET INTEGRITY BROCHURE</li>
<li>THE INSPECTION STANDARD
</li>
</ul>
</li>
</ul>
</div>

Related

Menu dropdown transition won't work (CSS only)

Can someone please help me do dropdown transition here... ?
On hover the dropdown should show up in fade-in manner. This is really confusing because right transition is not working no matter where I apply it. This colorful menu is just an example to get the right idea on how to make the dropdown transition work. I just need a simple ease-in transition that will work. I have been trying hard to fix this. Help is greatly appreciated.
<ul id='nav'>
<li class='menuitem1'>mainmenu1
<ul>
<li class='menuitem1'>Menu 111</li>
<li class='menuitem1'>Menu 22</li>
<li class='menuitem1'>Menu 3333</li>
<li class='menuitem1'>Menu 44
</li>
</ul>
</li>
<li class='menuitem2'>Menu3774
<ul>
<li class='menuitem2'>Menu 111</li>
<li class='menuitem2'>Menu 22</li>
<li class='menuitem2'>Menu 3333</li>
<li class='menuitem2'>Menu 44
</li>
</ul>
</li>
<li class='menuitem3'>Menury
</li>
</ul>
</nav>
<style>
.menuitem1 {
background:#4dd2ff;
}
.menuitem1:hover {
color:#000;
background:#94e4ff;
}
.menuitem2 {
background:#1aff8c;
}
.menuitem2:hover {
background:#87ffc3;
}
.menuitem3 {
background:#d2a679;
}
.menuitem3:hover {
background:#f5c89a;
}
nav > ul {
transition-duration: 0.5s;
}
#nav {
display:table;
margin:0;
}
#nav > li {
cursor:pointer;
list-style:none;
padding:12px 0;
border:1px #959696 solid;
position:relative;
display:table-cell;
width:1%;
text-align:center;
}
#nav ul li {
width: 250px;
display:block;
padding:3px 20px;
text-indent:0;
line-height:40px;
text-align:left;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
border-left:none;
border-right:none;
position:relative;
}
#nav ul {
visibility:hidden;
opacity:0;
max-height:300px;
position:absolute;
filter:alpha(opacity=0);
transition: height 0.3s ease-in;
}
#nav li:hover > ul {
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
ul {
display:none;
}
li:hover > ul {
display:block;
position:absolute;
z-index:1000;
border:1px #fff solid;
margin-top:12px;
margin-left:0;
}
#nav > li ul li ul {
left:100%;
top:-2px;
white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
}
li, li a {
color:#000;
text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}
</style>
The transition becomes broken by the conflicting #nav styles you have for the menu. Creating class names is generally a recommended practice. I would reference the following example written on CodePen: https://codepen.io/shshaw/pen/gsFch
<nav>
<ul>
<li class="sub-menu-parent" tab-index="0">
Menu Item 1
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
Menu Item 2
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
<li>Sub Item 5</li>
<li>Sub Item 6</li>
</ul>
</li>
<li class="sub-menu-parent" tab-index="0">
Menu Item 3
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul></li>
</ul>
</nav>
<style>
.sub-menu-parent { position: relative; }
.sub-menu {
visibility: hidden; /* hides sub-menu */
opacity: 0;
position: absolute;
top: 100%;
left: 0;
width: 100%;
transform: translateY(-2em);
z-index: -1;
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}
.sub-menu-parent:focus .sub-menu,
.sub-menu-parent:focus-within .sub-menu,
.sub-menu-parent:hover .sub-menu {
visibility: visible; /* shows sub-menu */
opacity: 1;
z-index: 1;
transform: translateY(0%);
transition-delay: 0s, 0s, 0.3s; /* this removes the transition delay so the menu will be visible while the other styles transition */
}
/* presentational */
body { padding: 2%; font: 18px/1.4 sans-serif; }
nav a { color: #E00; display: block; padding: 0.5em 1em; text-decoration: none; }
nav a:hover { color: #F55; }
nav ul,
nav ul li { list-style-type: none; padding: 0; margin: 0; }
nav > ul { background: #EEE; text-align: center; }
nav > ul > li { display: inline-block; border-left: solid 1px #aaa; }
nav > ul > li:first-child { border-left: none; }
.sub-menu {
background: #DDD;
}
</style>
The action you want to do is css animation. Animation duration "animation-duration: 4s;" You can adjust it according to you. You can edit the transitions you want to do with "#keyframes example". For more information you can check here. https://www.w3schools.com/css/css3_animations.asp
.menuitem1 {
background:#4dd2ff;
}
.menuitem1:hover {
color:#000;
background:#94e4ff;
}
.menuitem2 {
background:#1aff8c;
}
.menuitem2:hover {
background:#87ffc3;
}
.menuitem3 {
background:#d2a679;
}
.menuitem3:hover {
background:#f5c89a;
}
nav > ul {
transition-duration: 0.5s;
}
#nav {
display:table;
margin:0;
}
#nav > li {
cursor:pointer;
list-style:none;
padding:12px 0;
border:1px #959696 solid;
position:relative;
display:table-cell;
width:1%;
text-align:center;
}
#nav ul li {
animation-name: example;
animation-duration: 4s;
width: 250px;
display:block;
padding:3px 20px;
text-indent:0;
line-height:40px;
text-align:left;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
border-left:none;
border-right:none;
position:relative;
}
#keyframes example {
from {background-color: #94e4ff00;}
to {background-color: #94e4ff;}
from {color: #94e4ff00;}
to {color: black;}
}
#nav ul {
visibility:hidden;
opacity:0;
max-height:300px;
position:absolute;
filter:alpha(opacity=0);
transition: height 0.3s ease-in;
}
#nav li:hover > ul {
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
ul {
display:none;
}
li:hover > ul {
display:block;
position:absolute;
z-index:1000;
border:1px #fff solid;
margin-top:12px;
margin-left:0;
}
#nav > li ul li ul {
left:100%;
top:-2px;
white-space:nowrap;
}
#nav li:hover > a, #nav li:hover {
}
li, li a {
color:#000;
text-decoration:none;
}
* {box-sizing:border-box;-moz-box-sizing:border-box;}
<ul id='nav'>
<li class='menuitem1'>mainmenu1
<ul>
<li class='menuitem1'>Menu 111</li>
<li class='menuitem1'>Menu 22</li>
<li class='menuitem1'>Menu 3333</li>
<li class='menuitem1'>Menu 44
</li>
</ul>
</li>
<li class='menuitem2'>Menu3774
<ul>
<li class='menuitem2'>Menu 111</li>
<li class='menuitem2'>Menu 22</li>
<li class='menuitem2'>Menu 3333</li>
<li class='menuitem2'>Menu 44
</li>
</ul>
</li>
<li class='menuitem3'>Menury
</li>
</ul>
</nav>

Drop down menu hover effect

I have a CSS drop down menu with a hover effect. The a element is not taking up the full width of the li and I want it to use the whole width of the li. Anyone know what I can do to take up the whole width on hover? Codepen link below:
https://codepen.io/darenjm/pen/VWdjWb?editors=1100
<header>
<nav class="clearfix">
<ul>
<li>Home</li>
<li>Projects</li>
<li>Customers
<ul>
<li>Our Markets</li>
<li>Questionaire</li>
</ul>
</li>
<li>Employment
<ul>
<li>Work With Us</li>
<li>Open Positions</li>
<li>Apply</li>
</ul>
</li>
<li>Advantage</li>
<li>About Us
<ul>
<li>Colombian Railways History</li>
<li>Company History</li>
<li>Partners</li>
<li>Strategic Partners</li>
<li>Videos</li>
<li>News</li>
<li>FAQ</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="box">
</div>
body{
margin:0;
padding:0;
}
header{
background:#001d45;
width:100%;
}
nav{
background:#001d45;
width:85%;
margin:0 auto;
font-family: helvetica;
font-size: 80%;
}
nav ul{
display: flex;
justify-content:space-between;
padding:0;
margin:0;
transition:all .3s ease-in-out;
}
nav ul li{
list-style:none;
flex:1 1 0%;
}
nav ul li > ul{
background:#af2922;
flex-direction: column;
}
nav ul li > ul > li:hover a{
background:#cc534d;
}
nav ul li a{
display:inline-block;
color:#fff;
text-decoration:none;
padding:10px 20px;
}
nav ul li:hover > a{
background:#af2922;
}
nav > ul ul{
position:absolute;
visibility:hidden;
opacity:0;
}
nav ul li:hover > ul{
visibility:visible;
opacity:1;
}
nav > ul > li{
float:left;
}
.clearfix:after{
display:block;
content:"";
clear:both;
}
.box{
background:#d1d3d3;
height:100px;
}
position:relative; on the parent li and width:100% on the dropdown ul.
https://codepen.io/anon/pen/pwKRox?editors=1100

Center Align Navigation Bar

I'm having a hard time centering the navigation bar I've created.
HTML Code:
<div class="menu">
<ul>
<li>Home</li>
<li>About Mr. A</li>
<li>Intro
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
<li>Student Work</li>
</ul>
</li>
<li>Digital Design
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
<li>Student Work</li>
</ul>
</li>
<li>Web Design
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
<li>Student Work</li>
</ul>
</li>
<li>AP Computer Science
<ul>
<li>Daily Agenda</li>
<li>Handouts</li>
</ul>
</li>
<li>FBLA
<ul>
<li>Membership</li>
<li>Competitions</li>
<li>Conferences</li>
</ul>
</li>
</ul>
</div>
</body>
CSS Code:
html {
background-color:#2f2f4f;
}
div {
position:relative;
}
.menu {
position:absolute;
}
.menu ul {
padding:0;
margin:0;
line-height:30px;
}
.menu li {
position:relative;
float:left;
list-style:none;
border-bottom-style:solid;
border-top-style:solid;
border-color:#c5b358;
border-width:1px;
}
.menu ul ul {
position:absolute;
visibility:hidden;
padding:0;
margin:0;
}
.menu ul li a {
text-align:center;
font:"Georgia", serif;
font-size:18px;
color:#c5b358;
width:250px;
height:50px;
display:table-cell;
text-decoration:none;
vertical-align:middle;
}
.menu ul li:hover {
background-color:#2f4f2f;
text-decoration:none;
}
.menu ul li:hover ul {
visibility:visible;
z-index:1;
}
.menu ul li:hover ul li a {
background:#2f4f2f;
z-index:1;
border-bottom:none;
opacity:0.9;
text-decoration:none;
}
.menu ul li ul li:hover {
background:#2f4f2f;
opacity:0.8;
text-decoration:underline;
}
Nothing I do seems to work. I've tried several different options and can't find a solution. I'm fairly new to web design and it took me a while to get to this point.
I am expecting that I understood your question correctly. and on that basis I have modified your css code to get the desired result. please check the fiddle:https://jsfiddle.net/nileshmahaja/0k76hxc1/
Modified CSS
.menu ul {
text-align:center; /* Added */
}
.menu li {
/*float:left; Removed */
display:inline-block; /* Added */
}

CSS - How can I make a simple navigation menu with submenus?

I am learning HTML and CSS at the moment. I have my navigation menu done, but I have submenus under the main selections. Here is my code:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
And here is my HTML (I am making a site on Half Life and Portal to learn):
<div id="menus">
<div id="navigation">
<ul>
<li>Aperture Science</li>
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</ul>
<ul>
<li>Black Mesa</li>
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</ul>
</div>
What do I need to change?
Note: Yes, I haven't finished putting in quick 'a' tags...
you can use this code---
<div id="menus">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home
<ul class="submenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
css--
#menus ul{
padding:0
}
#menus ul li{
display:inline-block;
margin-right:-2px;
position:relative;
}
#menus ul li a{
display:inline-block;
padding:5px 10px;
background:red;
color:#FFF;
}
#menus ul ul{
position:absolute;
left:0;
width:0px;
transition:all .5s;
}
#menus ul.submenu li{
display:block;
transform:scale(0, 1);
transition:all .5s;
}
#menus ul.submenu li:nth-child(2){
transition-delay:.05s;
}
#menus ul.submenu li:nth-child(3){
transition-delay:.1s;
}
#menus ul.submenu li:nth-child(3){
transition-delay:.15s;
}
#menus ul.submenu li:nth-child(4){
transition-delay:.2s;
}
#menus ul.submenu li:nth-child(5){
transition-delay:.25s;
}
#menus ul li:hover ul{
display:block;
width:auto;
}
#menus ul li:hover ul li{
transform:scale(1, 1);
transform-origin: right top;
}
view the jsfiddle live demo
Check code
#menus ul{
padding:0
}
#menus ul li{
display:inline-block;
margin-right:-2px;
position:relative;
}
#menus ul li a{
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#menus ul li a:hover{background: #666;}
#menus ul ul{
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#menus ul.submenu li{
display:block;
}
#menus ul.submenu li a{
display:block;
background:blue;
color: #fff;
}
#menus ul.submenu li a:hover{background: #333;}
#menus ul li:hover ul{
max-height: 10000px;
}
<div id="menus">
<ul>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Sub Menu
<ul class="submenu">
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
<li>Sub</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
Try This code:
HTML CODE:
<div id="menus">
<div id="navigation">
<ul>
<li>Aperture Science</li>
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
</ul>
<ul>
<li>Black Mesa</li>
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</ul>
</div>
CSS CODE:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
position: relative;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation ul li ul{
position: absolute;
top: 28px;
opocity: 0;
display: none;
}
#navigation ul li:hover ul{
opocity: 1;
display: block;
}
SEE DEMO http://jsfiddle.net/JentiDabhi/j50Lncva/

Dropdownmenu: Only words clickable not whole box

I've got a dropdownmenu for my site and I noticed only the words itself are clickable not the whole box the word (link) is placed in.
I already added display: block; to the a element but this seems to only work horizontal, still not the whole box.
Hope you can help me out! And Thank you in advance!
Here's de css code:
#dropdownmenu a {
color:inherit !important;
display:block;
text-decoration:none !important}
#dropdownmenu {
width:1050px;
background:#137cd7;
z-index:2;
position:relative }
#dropdownmenu ul {
text-align:left;
display:inline;
margin:0px;
padding:10px 4px 25px 0;
list-style:none }
#dropdownmenu ul li {
display:inline-block;
margin-right:10px;
position:relative;
padding:15px 15px 14px;
cursor:pointer;
-webkit-transition:all 0.2s;
-moz-transition:all 0.2s;
-ms-transition:all 0.2s;
-o-transition:all 0.2s;
transition:all 0.2s;
color:#fff }
#dropdownmenu ul li:hover {
background-color:#ffffff;
color:#137cd7 }
#media screen and (-webkit-min-device-pixel-ratio:0)
#dropdownmenu ul li ul {
top:44px !important}
#dropdownmenu ul li ul {
padding:0px;
position:absolute;
top:47px;
left:0px;
width:170px;
display:none;
opacity:0;
visibility:hidden;
-webkit-transiton:opacity 0.2s;
-moz-transition:opacity 0.2s;
-ms-transition:opacity 0.2s;
-o-transition:opacity 0.2s;
-transition:opacity 0.2s }
#dropdownmenu ul li ul li {
background-color:#fff;
display:block;
color:#222;
border-left:1px solid #ccc;
border-right:1px solid #ccc;}
#dropdownmenu ul li ul li:hover {
color:#137cd7;
background:#222;
text-decoration:none !important }
#dropdownmenu ul li:hover ul {
display:block;
opacity:1;
visibility:visible;
border-bottom:1px solid #ccc; }
And HTML:
<div id="dropdownmenu">
<ul>
<li>
Home</li>
<li>
Menu 1
<ul>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
</ul>
</li>
<li>
Menu 2
<ul>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
<li>
Submenu</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<img alt="" src="/files/19731/editor/images/support(1).JPG" style="width: 140px; height: 140px; border-width: 0px; border-style: solid;" /></li>
<li>
</li>
</ul>
</li>
</ul>
fiddle here
Thanks everyone!
Thank you for the answer! This helped me a lot! Everything works excellent now!
On the image below, you can see your dropdown's anchor in blue, and your li padding in green.
When you click on the green area, the browser will not follow the anchor which is a normal behaviour.
To correct that, remove the li padding, and apply it to the anchor. As anchors are inline elements, you'll have to display them as block to apply padding.
#dropdownmenu a {
padding:15px 15px 14px;
display: block;
}
I also have done some CSS improvements, you can take a look on the updated Fiddle