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
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 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.
Im learning html & css and after few tutorials I decided to write webpage from nothing.
But I've got a problem. When I add "display: inline" in CSS .nav, it ignores all .nav css properties, including "display: inline".
Here's code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Neni okurka, nebudou caciky</title>
</head>
<body>
<div class="nav">
<ul>
<li class="active">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</div>
<div class="nav2">
<ul>
<li class="active">Navi 1</li>
<li>Navi 2</li>
<li>Navi 3</li>
<li>Navi 4</li>
<li>Navi 5</li>
</ul>
</div>
</body>
</html>
CSS
body {
background-image: url("background.png");
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav {
display: inline;
width: 500px;
background: #fff;
}
If you want background(image) you need to have it in the container as soon you give it width and height because body is the "Base" you can give it margin: 0; padding: 0; to reset it only and you can add background to it but not height and width. Inside containeryou have created you can play with the height and width as you like.
html,
body {
margin: 0;
padding: 0;
background-color: cadetblue;
}
.container {
width: 1050px;
height: 100vh;
margin: 0 auto;
position: relative;
background-size: 100% 100%;
background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center;
}
.nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background: beige;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav ul li {
margin-left: 12px;
}
.nav ul li a {
float: left;
font-size: 16px;
font-weight: lighter;
text-decoration: none;
font-family: sans-serif;
margin: 10px 0px 10px 0px;
padding: 8px 15px 8px 15px;
}
.nav ul li a:hover {
color: #fff;
border-radius: 3px;
background: cadetblue;
}
<div class="container">
<div class="wrapper">
<div class="nav">
<ul>
<li class="active">Navigation 1
</li>
<li>Navigation 2
</li>
<li>Navigation 3
</li>
<li>Navigation 4
</li>
<li>Navigation 5
</li>
</ul>
<ul>
<li class="active">Navi 1
</li>
<li>Navi 2
</li>
<li>Navi 3
</li>
<li>Navi 4
</li>
<li>Navi 5
</li>
</ul>
</div>
</div>
</div>
this code without display:inline; or display :inline-block; which
it works but it's another way to align nabbar in nice way compatible
with all browsers too.
I hope you like it and it helps you, let me know if you have another question.
The right usage is:
.nav li {
display: inline;
}
You should put display: inline-block;
Man try to put .nav ul lit to refer to the li but I will not use that let me tell you now one sec
.nav ul li`display:inline`
in orther to display betther ur nav thing u shuld not use .nav ul li display:inline
i know i say that was for answer ur question but this thing i will tell you will be betther
.nav ul lifloat:left
this will do the items in the li will float left and will do the same as the inline but isbetther to use that rather than the inline
On my Page i have a navigationbar. But if i zoom inside the navigationbar disappers. The navi got the position: fixed. I dont know how to correct it, that when i zoom inside that i can still see the navigationbar.
Code:
*{
margin: 0px;
padding: 0px;
font-family: 'Muli', sans-serif;
font-size: 20px;
}
body{
background-color: #4A3A47;
height: 5000px;
}
section{
width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
height: 100%;
}
.divbox{
vertical-align: top;
display: inline-block;
width: 250px;
border: 4px solid #D7E8D5;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: #D7E8D5;
}
.divbox:hover{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
/* Bildern noch eine Klasse geben */
.divbox:hover img{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
img{
transition: all 0.5s;
}
/*margin-left: -602px;---------------*/
nav {
margin-left: -602px;
position: fixed;
left: 50%;
transform: translate(-100%);
top: 100px;
width: 250px;
background-color: #E8ED76;
}
nav h3{
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background-color: #FFCD57;
}
nav li{
list-style-type: none;
}
nav ul ul li a{
color: black;
text-decoration: none;
font-size: 20px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.5s;
}
nav ul ul li a:hover{
background-color: #FFCD57;
border-left: 5px solid #4A3A47;
}
nav ul ul{
display: none;
}
nav li.active ul{
display: block;
}
<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" href="index.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
$("nav h3").click(function(){
//slide up all the link lists
$("nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
</head>
<body>
<nav>
<ul>
<li><h3>Bereich 1</h3>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<div class="divbox">
<img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
</div>
</article>
</section>
</body>
</html>
Here i have fixed this for you.
*{
margin: 0px;
padding: 0px;
font-family: 'Muli', sans-serif;
font-size: 20px;
}
body{
background-color: #4A3A47;
height: 5000px;
}
section{
width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
height: 100%;
}
.divbox{
vertical-align: top;
display: inline-block;
width: 250px;
border: 4px solid #D7E8D5;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: #D7E8D5;
}
.divbox:hover{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
/* Bildern noch eine Klasse geben */
.divbox:hover img{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
img{
transition: all 0.5s;
}
/*margin-left: -602px;---------------*/
nav {
position: fixed;
top:90px;
left:0px;
width: 250px;
background-color: #E8ED76;
z-index:100;
}
nav h3{
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background-color: #FFCD57;
}
nav li{
list-style-type: none;
}
nav ul ul li a{
color: black;
text-decoration: none;
font-size: 20px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.5s;
}
nav ul ul li a:hover{
background-color: #FFCD57;
border-left: 5px solid #4A3A47;
}
nav ul ul{
display: none;
}
nav li.active ul{
display: block;
}
<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" href="index.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
$("nav h3").click(function(){
//slide up all the link lists
$("nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
</head>
<body>
<nav>
<ul>
<li><h3>Bereich 1</h3>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<div class="divbox">
<img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
</div>
</article>
</section>
</body>
</html>
I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:
<div id="navMain">
<ul>
<li>Forside
<ul>
<li>1111111111111</li>
<li>Link 1-2</li>
<!-- etc. -->
</ul>
</li>
<li>Om Os
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<!-- etc. -->
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.
So how would i make all li in each inner ul the same size as the widest one?
Here you can find the CSS if needed.
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}
<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li>Forside
<ul class="menu">
<li>1111111111111</li>
<li>Link 1-2</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
</ul>
</li>
<li>Om Os
<ul class="menu">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul class="menu">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
li {display:block} will make the list items as wide as the widest item in that parent container
body {
background: #ededed;
margin: 0 auto;
}
.wrapper {
width: 720px;
border: 1px solid red;
padding: 5px;
}
.menu {
padding: 0;
margin: 0;
width: 100%;
border-bottom: 0;
}
.menu li {
display: table-cell;
width: 1%;
float: none;
border: 1px solid green;
margin: 2px;
padding: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>