I have a CSS dropdown navigation menu with a submenu. My problem is that the submenu closes before I click on it. When I move the cursor halfway to the submenu, it disappears. For example when I move my mouse to click on "Item 3 sub 1.1", it disappears.
The main dropdown menu works fine but the submenu is the problem.
What can I do to make the submenu stay until I click on it?... Thanks for the help
This is my CSS for the menu:
.nav {
padding: 0px;
text-align: center;
border: 0px;
vertical-align: middle;
display: table-row;
width: 100%;
margin: 0px auto;
background-color:#660000;
overflow: hidden;
position:relative;
height: 30;
text-align: center;
margin: 0px auto 0px auto;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
float:left;
display:inline;
}
ul li {
display:block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin:0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left:1px solid #660000;
border-right:1px solid #660000;
}
ul li a:hover {
background: #3300cc;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 100;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
display: block;
}
li li ul a {
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
}
This is the html:
<div class="nav" >
<ul class="drop-nav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
<li > Item 2 sub 2</li>
</ul>
</li>
<li> Item 3
<ul>
<li> Item 3 sub 1 »
<ul>
<li> Item 3 sub 1.1</li>
<li> Item 3 sub 1.2</li>
<li > Item 3 sub 1.3</li>
</ul>
</li>
<li> Item 3 sub 2 »
<ul>
<li> Item 3 sub 2.1 </li>
<li> Item 3 sub 2.2 </li>
<li> Item 3 sub 2.3 </li>
</ul>
</li>
<li> Item 3 sub 3 </li>
<li> Item 3 sub 4 </li>
<li> Item 3 sub 5 </li>
</ul>
</li>
</ul>
</div>
Your css selectors are very confusing. Only using ul li and then li ul or li li ul a on the next line is too vague and not really targeting an element. While this approach might work for nesting of one level deep, it seriously get's confusing (for the browser) when you start nesting 2 level deep.
I'd give each UL element a certain, descriptive class, which you can precisely target.
Additonally, make use of the position attribute for your UL and don't forget to think about z-index when menus overlap.
Something like this, not very pretty, but it works the way you propably expect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Related
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li { // Here is actually what the some magic has to be carried out actually.
right: 100px;
background: black;
}
<!DOCTYPE html>
<html>
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6 // This is the place where the menu has to come out of screen
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
Why the last I mean the menu in black background appears inside the screen? How to pull it out? I have used "#navigation ul li:last-child ul li" to make the last drop down as black color. But, don't have any idea of pulling it out from the screen's right hand side. Can't we make use of "#navigation ul li:last-child ul li" to pull out the menu out of the screen?
body {
padding: 0px;
margin: 0px;
background-image: url("background.jpg");
background-size: cover;
}
* {
font-family: "Ubuntu", sans-serif;
font-size: 1rem;
text-decoration: none;
color: white;
}
.nav-bar {
background-color: darkred;
display: inline-block;
width: 100%;
height: 48px;
}
#navigation ul {
list-style: none;
float: right;
padding: 0px;
margin: 0px;
}
#navigation ul ul {
display: none;
position: absolute;
width: 200px;
}
#navigation ul li:hover ul {
display: block;
}
#navigation ul li {
float: left;
padding: 15px;
}
#navigation ul ul li {
margin-left: -15px !important;
}
#navigation ul li ul li:first-child {
margin-top: 15px;
}
#navigation ul ul li {
margin-left: 0px;
padding-top: 10px;
background-color: darkgreen;
}
#navigation ul li ul li:hover {
background-color: blueviolet;
}
#navigation ul li:hover {
background-color: firebrick;
}
#navigation ul li:last-child ul li {
position: relative;
right: 21%;
background: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Right hand sided navigation menu with level 1 drop down -->
<link rel="stylesheet" href="style.css" />
<title>HTML - CSS Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="nav-bar">
<nav id="navigation">
<ul>
<li>
Menu Item 1
<ul>
<li>Submenu 1 Item 1</li>
<li>Submenu 1 Item 2</li>
<li>Submenu 1 Item 3</li>
</ul>
</li>
<li>Menu Item 2</li>
<li>
Menu Item 3
<ul>
<li>Submenu 3 Item 1</li>
<li>Submenu 3 Item 2</li>
<li>Submenu 3 Item 3</li>
</ul>
</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>
Menu Item 6
<ul>
<li>Submenu 6 Item 1</li>
<li>Submenu 6 Item 2</li>
<li>Submenu 6 Item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
I have this dropdown menu code, which works great in all browsers except in Explorer. In Explorer, the dropdown menu doesn't function at all. I tried everything in my power to solve this problem but I am not able to. The main horizontal menu is visible and the links seem to work but the dropdown menu that is supposed to appear on hover doesn't appear at all.
Please help!.....
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I have this dropdown menu code, which works great now (Thanks to the kind person who helped me in a former post), except in Explorer. The dropdown menu in Explorer doesn't appear at all, except when I change the position in "dropdown-level-1" to "fixed." The problem with "fixed" is that the dropdown menu doesn't move with scroll.
Please help me make this menu visible appear in Explorer?...
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav {
position: relative;
top: 0;
width: 80%;
height: auto;
border: 1px solid #e6e6e6;
margin: 0 auto;
font-family: 'Helvetica', Arial, sans-serif;
}
/* Root Level */
.dropdown-menu {
position: relative;
top: 0;
left: 0;
padding: 0;
margin: 0;
background: #eeeeee;
}
/* Clear the float */
.dropdown-menu:after {
display: table;
content: "";
clear: both;
}
.dropdown-menu li {
display: block;
border-left: 1px solid #e6e6e6;
border-right: 1px solid #e6e6e6;
min-width: 150px;
float: left;
}
.dropdown-menu li a:link,
.dropdown-menu li a:visited {
padding: 10px 15px;
text-decoration: none;
color: #111111;
display: block;
}
.dropdown-menu li a:hover,
.dropdown-menu li a:focus {
color: #222222;
}
/* Level 1 */
.dropdown-level-1 {
position: absolute;
padding: 0;
margin: 0;
display: none;
background: grey;
width: 150px;
}
.dropdown-level-1 li {
}
/* The ">" triggers the direct child to show up as "block" */
.dropdown-menu li:hover > .dropdown-level-1 {
display: block;
}
/* Level 2 */
.dropdown-level-2 {
position: absolute;
display: none;
background: #888888;
padding: 0;
margin: -38px 0 0 148px;
}
/* same trick here for level 2 */
.dropdown-level-1 li:hover > .dropdown-level-2 {
display: block;
}
/* Target all links at once */
.dropdown-level-0 li a:link,
.dropdown-level-0 li a:visited,
.dropdown-level-1 li a:link,
.dropdown-level-1 li a:visited,
.dropdown-level-2 li a:link,
.dropdown-level-2 li a:visited {
padding: 10px;
color: purple;
display: block;
}
.dropdown-level-0 li a:hover,
.dropdown-level-0 li a:focus,
.dropdown-level-1 li a:hover,
.dropdown-level-1 li a:focus,
.dropdown-level-2 li a:hover,
.dropdown-level-2 li a:focus {
color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul class="dropdown-menu">
<li>Item 1</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2
<ul class="dropdown-level-2">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li>Item 2 sub 2</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">Item 2
<ul class="dropdown-level-1">
<li>Item 2 sub 1</li>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I wrote the CSS code for a vertical dropdown navigation menu with a submenu that branches to the right of the dropdown menu items, such as "Item 3 sub 1.1" and "Item 3 sub 2.1" seen in my html below.
The main dropdown menu works fine but the submenu items flicker (up and down jerky movement) and others disappear when I hover over them with the mouse cursor. For example, Item 2 sub 2 stacks and disappears behind Item 2 sub 1 when I hover over the latter with the cursor.
What can I do to stop this jerky flicker effect ?... Thanks for the help
This is my CSS for the menu
ul {
list-style: none;
padding: 0px;
margin: 0px;
float:left;
display:inline;
}
ul li {
display:block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin:0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left:1px solid #660000;
border-right:1px solid #660000;
}
ul li a:hover {
background: #330066;
display: block;
}
li:hover ul {
position: fixed;
display: block;
}
li:hover li {
float: none;
}
li:hover a {
background: #330066;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
z-index: 200;
border-bottom:0;
right:0;
left:0;
}
li li:hover a {
position:relative;
display: block;
}
li li ul a {
border-left:1px solid #660000;
margin-top:-25px;
margin-bottom: 25px;
margin-left: 85px;
display: none;
}
li:hover li:hover ul li a:hover {
background: #660000;
margin-top:-25px;
margin-bottom:25px;
margin-left: 85px;
overflow: none;
display: none;
}
.nav {
padding: 0px;
text-align: center;
border: 0px;
vertical-align: middle;
display: table-row;
width: 100%;
margin: 0px auto;
background-color:#660000;
overflow: hidden;
position:relative;
height: 30;
text-align: center;
margin: 0px auto 0px auto;
}
This is the html
<div class="nav" >
<ul class="drop-nav">
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2 sub 1</li>
<li> Item 2 sub 2</li>
<li > Item 2 sub 2</li>
</ul>
</li>
<li> Item 3
<ul>
<li> Item 3 sub 1 »
<ul>
<li> Item 3 sub 1.1</li>
<li> Item 3 sub 1.2</li>
<li > Item 3 sub 1.3</li>
</ul>
</li>
<li> Item 3 sub 2 »
<ul>
<li> Item 3 sub 2.1 </li>
<li> Item 3 sub 2.2 </li>
<li> Item 3 sub 2.3 </li>
</ul>
</li>
<li> Item 3 sub 3 </li>
<li> Item 3 sub 4 </li>
<li> Item 3 sub 5 </li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5
<ul>
<li> Item 5 sub 1 </li>
<li> Item 5 sub 2 </li>
</ul>
</div>
I have created a CSS dropdown menu but it is not working in IE. However, in Firefox and Chrome, it works perfectly. I am wondering what is the defect in the code that makes it not work in IE! Please help!.........
ul {
list-style: none;
padding: 0px;
margin: 0px;
float: left;
left: 40%;
display: inline;
}
ul li {
display: block;
position: relative;
float: left;
left: 85px;
}
li ul {
display: none;
margin: 0;
}
ul li a {
display: block;
background: #660000;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #fff;
border-left: 1px solid #660000;
border-right: 1px solid #660000;
}
ul li a:hover {
background: #3300cc;
margin: 0;
}
li:hover ul {
display: block;
position: absolute;
margin: 0;
}
li:hover li {
float: none;
}
li:hover a {
background: #3300cc;
}
li:hover li a:hover {
background: #660000;
}
.drop-nav li ul li {
border-top: 0px;
position: relative;
padding: 0px;
z-index: 100;
border-bottom: 0px;
margin: 0;
right: 0;
left: 0;
}
li li:hover a {
display: block;
}
li li ul a {
display: none;
border-left: 1px solid #660000;
margin-left: 60px;
margin-top: -30px;
margin-bottom: 30px;
}
li:hover li:hover ul li a:hover {
background: #660000;
margin-top: -30px;
margin-bottom: 30px;
margin-left: 60px;
border-left: 1px solid #660000;
}
<div class="nav">
<ul class="drop-nav">
<li>Item 1
</li>
<li>Item 2
Item 2 sub 1
</li>
<li>Item 2 sub 2
</li>
<li>Item 2 sub 3
</li>
</ul>
</li>
<li>Item 3
<ul>
<li>Item 3 sub 1 »
<ul>
<li>Item 3 sub 1.1
</li>
<li>Item 3 sub 1.2
</li>
<li>Item 3 sub 1.3
</li>
</ul>
</li>
<li>Item 3 sub 2 »
<ul>
<li>Item 3 sub 2.1
</li>
<li>Item 3 sub 2.2
</li>
<li>Item 3 sub 2.3
</li>
</ul>
</li>
<li>Item 3 sub 3
</li>
<li>Item 3 sub 4
</li>
<li>Item 3 sub 5
</li>
</ul>
</li>
<li>Item 4
</li>
<li>Item 5
<ul>
<li>Item 5 sub 1
</li>
<li>Item 5 sub 2
</li>
</ul>
</li>
<li>Item 6
</li>
<li>Item 7
</li>
<li>Item 8
</li>
</ul>
</div>
Add this to your html file.<meta http-equiv="X-UA-Compatible" content="IE=9"/> in your and make sure you use <!DOCTYPE HTML>
For these type of errors, just go to developer tools and see whether you can find any css compilation error. I haven't simulate your scenario.
But I have come across a similar issue like you faced. Some styles worked well in Firefox and chrome, but not it IE and edge.
When I inspected the elements in IE, due to some reasons some style had some syntax error. I can't exactly recall that style. But assume following is the problematic style.
font-size: 16p;
This might get interpreted as "font-size: 16px" or this syntax error might get ignored in Chrome and Firefox, but IE might catch them and may not apply that style.
This could be the reason for these type of issues. My suggestion is check the problematic styles in developer tools and resolve them.