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
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'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/
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