Hy,
I run for several hours on a bug ie6, it was not the only one that I was locking it remains only to solve this one and I would finally be quiet.
I have a vertical menu that I built, the problem is that the second level menu does not overlap with that of the first level despite the z-index. Under FF is impeccable, in ie6 it fair.
here is my code, if you could help you relieve me greatly:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
div#menu {
width: 100px;
}
div#menu ul {
padding: 0;
width: 100px;
border: 1px solid green;
margin: 0px;
background: yellow url();
position: absolute;
z-index: 1;
}
div#menu ul li {
position: relative;
list-style: none;
}
div#menu ul ul {
position: absolute;
top: 0px;
left: 10px;
display: block;
background: red url();
z-index: 999;
border: 1px solid black;
}
div#menu li a {
text-decoration: none;
}
//-->
</style>
<body>
<div id="menu">
<ul>
<li>menu 1</li>
<li>menu 2
<ul>
<li>Sous menu 2.1</li>
<li>Sous menu 2.2</li>
</ul>
</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>
try this plugin: http://docs.jquery.com/Plugins/bgiframe , will work!
usage: $('.your-dropdown-menu').bgiframe();
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Test Case</title>
</head>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
div#menu {
width: 100px;
}
div#menu ul {
padding: 0;
width: 100px;
border: 1px solid green;
margin: 0px;
background: yellow;
position: absolute;
z-index: 1;
}
div#menu ul li {
list-style: none;
}
div#menu ul ul {
position: absolute;
left: 10px;
display: block;
background-color: red;
z-index: 2;
border: 1px solid black;
}
div#menu li a {
text-decoration: none;
}
//-->
</style>
<body>
<div id="menu">
<ul>
<li>menu 1</li>
<li>
<ul>
<li>Sous menu 2.1</li>
<li>Sous menu 2.2</li>
</ul>
menu 2
</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>
ie6 work on position relative more than absolute
div#menu ul {
position:relative;
z-index:0;
}
div#menu ul ul{
z-index:2;
}
Please check this one
Related
Because of the use of position the name of the "sub sub items" wrap. I have no idea how to work around this issue. Any suggestion is appreciated.
:root {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
.nav {
background: #3d9ca8;
}
.menu-container ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.nav-menu a {
display: block;
color: #fff;
padding: 0.8em 1em;
font-size: 1.1rem;
text-decoration: none;
text-transform: uppercase;
}
#media (min-width: 37.5em) {
.nav-menu {
display: flex;
justify-content: center;
}
.sub-menu,
.flyout-nav {
position: absolute;
display: block;
background: #3d9ca8;
}
.flyout {
position: relative;
}
.flyout-nav {
top: 0;
left: 100%;
}
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="sub-menu.css">
<title>Sub Menus</title>
</head>
<body>
<nav class="nav">
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<div class="menu-container">
<ul class="nav-menu">
<li>Item 1</li>
<li class="dropdown">
Item 2
<ul class="sub-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li class="flyout">Sub Item 3
<ul class="flyout-nav">
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
</ul>
</li>
</ul>
</li>
<li>Item 3</li>
</ul>
</div>
</nav>
</body>
</html>
add a width to flyout-nav which is controlling the sub sub items
.flyout-nav {
top: 0;
left: 100%;
width: 300px;
}
You need white-space:nowrap; added to .sub-menu,.flyout-nav
I've been trying to figure out how to make a Navbar with a drop down menu. I feel like I'm super close, but for some reason when I hover over my main list element, it shows the entire contents of the submenus as well.
This is the point I keep getting stuck, I've tried adding in, switching around li, and ul in my CSS, but its just not working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height: 2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding: 10px;
line-height: 1.6em;
width: 100%;
}
nav>ul>li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
nav>ul>li>ul {
background-color: blue;
list-style: none;
position: absolute;
/*display: none;*/
width: 100%;
}
nav>ul>li:hover ul li {
display: block;
}
nav>ul>li>ul>li>ul {
list-style: none;
background-color: black;
position: absolute;
left: 100%;
top: 0px;
width: 40%;
display: none;
}
nav>ul>li>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing 1
</li>
<li>Thing 2
</li>
<li>Thing 3
</li>
<li>Thing 4
</li>
<li>Thing 5
</li>
<li>Thing 6
</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
The first drop-down items should be centered with the Navbar element (Music).
Every sub-menu after that should appear top 0px; left 100%, of the list item (Song 1 in this case). You can see the expected results in my CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height:2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding:10px;
line-height: 1.6em;
width: 100%;
}
nav > ul >li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
/* i added only following codes */
nav ul li ul li ul {
display:none;
}
nav ul li ul li:hover ul {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css"
href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing
1</li>
<li>Thing
2</li>
<li>Thing
3</li>
<li>Thing
4</li>
<li>Thing
5</li>
<li>Thing
6</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
A very similar example of what you are trying to achieve, in this case is on click but you can get the idea on how to do it on :hover
https://codepen.io/Angel-SG/pen/JwXRZo
I am trying to achieve a fully centered page, however when I add CSS code to center it, the navigation bar does not move. It only moves when i remove its tags. This is my original code. The nav bar works as it should. (buttons are green, lined up properly, however all items are left justified.
<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>
<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>
<img src="img.png"></img>
</head>
<body>
<div id="menubar">
<ul
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
</body>
<body>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
<div id="items">
<ul>
<p>Item 1</p>
<p>Item 2</p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>
Heres the original CSS.
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}
To center the page, i add the following css code:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
And added these lines at the beginning and end of the page.
If you try out the code, the entire page centers EXCEPT the nav bar. As you can probably tell, I am fairly new to this.
Works for me. The only problem is that your code structure. Your code format should be
body {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#menubar {
width: 800px;
text-align: center;
border: 0px;
padding: 0px;
margin: 0 auto;
}
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
display: inline-block;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body bgcolor="black">
<div id="menubar">
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
</a>
<div id="items">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
Correct css is:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
you had unnecessary buckles in your code.
I have an ugly website with a vertical navigation bar. http://jsfiddle.net/ZuC2W/ Please help me edit the code so the nav bar looks like on this website: http://cssmenumaker.com/menu/slabbed-accordion-menu I mean, submenus appear under the buttons so the whole menu is one-lined and set in that red rectangle.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Title</title>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="window">
<nav id="nav_wrap">
<div id="navigation">
<ul class="top-level">
<li>Home
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
<li> FAQ
<ul class="sub-level">
<li>Sub Menu Item 1
</li>
<li>Sub Menu Item 3
</li>
</ul>
</li>
<li> News
<ul class="sub-level">
<li>Sub Menu Item 1</li>
<li>Sub Menu Item 2</li>
<li>Sub Menu Item 3</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</body>
</html>
CSS:
html, body {
background:#78C2A9;
margin: 0 0 0 0;
}
#window {
height:630px;
width: 1200px;
margin: 20px auto 0 auto;
padding: 0;
background: orange;
}
#nav_wrap {
width: 150px;
height: 630px;
margin: 0;
position: absolute;
background-color: #E95644;
}
#navigation { font-size:0.75em; width:150px; }
#navigation ul { margin:0px; padding:0px; }
#navigation li { list-style: none; }
ul.top-level { background:#666; }
ul.top-level li {
border-bottom: #fff solid;
border-top: #fff solid;
border-width: 1px;
}
#navigation a {
color: #fff;
cursor: pointer;
display:block;
height:25px;
line-height: 25px;
text-indent: 10px;
text-decoration:none;
width:100%;
}
#navigation a:hover{ text-decoration:underline; }
#navigation li:hover {
background: #f90;
position: relative;
}
ul.sub-level { display: none; }
li:hover .sub-level {
background: #999;
border: #fff solid;
border-width: 1px;
display: block;
position: absolute;
left: 75px;
top: 5px;
}
ul.sub-level li {
border: none;
float:left;
width:150px;
}
A quick way would be to remove some CSS from your existing code. The last declaration and all references to position: absolute, in this instance.
DEMO http://jsfiddle.net/ZuC2W/1/
I have a menu. I need to show the submenus when I mouse hover on them. I have some code as follows. But the submenus overlaps with existing menu.
Following is my code:
<!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" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Drop Down Menus</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
#menu {
position: relative;
margin-left: 30px;
}
#menu a {
display: block;
width: 140px;
}
#menu ul {
list-style-type: none;
padding-top: 5px;
}
#menu li {
float: top;
position: relative;
padding: 3px 0;
text-align: center;
}
#menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
#menu ul.sub-menu li {
text-align: top;
}
#menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>About
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I need some effect like this.
How can I make it.
You've set left: -10px on #menu ul.sub-menu, which is why it's overlapping #menu. You should set that to a value that'll move it far enough to the right for your purposes, perhaps left: 140px since that's the width of the menu div.
I think you're looking for something called a "navigation rollover with dropdowns".
This is one of the best implementations that you can find - adapt and use as necessary:
http://jorenrapini.com/blog/web-development/css-navigation-rollovers-with-drop-downs#post-170
And, to see if it's worth what trying, this is the end result:
http://jorenrapini.com/posts/css-rollovers/post2.html
Good luck!