This is my css code (for the index page):
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
/*NAVBAR (begin)*/
a {
text-decoration: none;
}
nav {
font-family: Arial;
background-color: Black;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
display: block;
float: left;
padding: 27px;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 27px;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
/*NAVBAR (end)*/
This is the code for HTML (index page):
<!DOCTYPE html>
<link rel="stylesheet" href="piano.css" />
<html class="index">
<head>
<title>The piano - Home</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br>
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li>Home</li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li>Mechanics</li>
<li>Construction</li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li>Grand</li>
<li>Upright</li>
<li>Electric</li>
</ul>
</li>
<li>History of the piano
</li>
<li>Piano songs
</li>
</div>
</nav>
<!--(end)NAVBAR-->
</body>
</html>
I already tried a lot of things but nothing seems to work...
Right now my index page looks like this:
(Index page but I had to cut it because the full picture was over 2 mb)
(I'm sorry, It's really bad but it's my first time making a website with html and css).
I need to center the navigation bar and to be able to click the box instead of the word.
Thank you for reading (and maybe answering)!
First of all, I recommend to use classes instead of the direct element selector,
If you want to center the nav, you only need to set the property align-text: center in the parent divof the main nav. and if you want to click all the box instead only the text, the element that needs the padding and margin is the a not the li.
Check the snippet:
span{
display:block;
font-size:100px;
font-weight: lighter;
font-family: "Times New Roman", Times, serif;
}
.index {
background-image: url("images/indexbackground.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1600px 800px;
}
.navwrapperindex {
text-align: center;
}
.navwrapperindex > nav{
display: inline-block;
}
a {
text-decoration: none;
}
nav {
font-family: Arial;
}
ul {
background: black;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #white;
background: black;
float: left;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
padding: 27px;
display: block;
}
li:hover {
background: #DEB887;
cursor: pointer;
}
ul li ul {
background: black;
visibility: hidden;
opacity: 0;
min-width: 17rem;
position: absolute;
transition: all 0.5s ease;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<center><span>The Piano</span></center>
<!--(start) NAVBAR-->
<br><br><br><br><br><br>
<nav>
<div class="navwrapperindex">
<nav class="navmenuindex">
<ul class="clearfixindex">
<li>Home</li>
<li><a>The piano itself</a>
<ul class="sub-menu">
<li>Mechanics</li>
<li>Construction</li>
</ul>
<li><a>Types of pianos</a>
<ul class="sub-menu">
<li>Grand</li>
<li>Upright</li>
<li>Electric</li>
</ul>
</li>
<li>History of the piano
</li>
<li>Piano songs
</li>
</ul>
</nav>
</div>
</nav>
Related
I want to make a dropdown menu just using html and css. However, I am unable to do it. I want to make the others list item a dropdwon menu. Can anyone help me with that?
Here's my CSS code:
```
nav {
background-color: #01a6f0;
}
.navbar {
list-style: none;
float: right;
margin-right: 10rem;
margin-top: 2.6rem;
margin-bottom: .5rem;
}
.navbar li {
display: inline-block;
padding: 1rem 1rem;
}
.navbar li:hover {
background-color: #01A6FE;
}
.navbar li a {
color: #fff;
}
```
Here's the HTML code
```
<nav>
<ul class="navbar">
<li>Home</li>
<li>Puzzles</li>
<li>Stories</li>
<li>Goods</li>
<li class="dropdown-link">Others
<ul class="dropdown-menu">
<li>Under The Sea</li>
<li>Middle The Sea</li>
<li>Ovver The Sea</li>
</ul>
</li>
</ul>
</nav>
Try this example with just HTML and CSS:
It is from this site if you want to read more about this code:
https://css-tricks.com/solved-with-css-dropdown-menus/
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
I want to create a dropdown that right aligns itself to its parent element
Something like this, but where the dropdown's right edge is aligned to its parent's right edge
This link contains the styling I want, the alignment is just not working properly. Any help would be very much appreciated!
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover>ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
Convert left: 0 to right: 0 and change some CSS properties can right-align your dropdown
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
right: 0;
display: none;
}
ul li:hover>ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
min-width: 3rem;
}
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
Please can someone help, I've been at this for 2 days and just can't get it right! I'm trying to create a dropdown menu to adhere to my existing navbar. Here's my code below. I have it set that the navbar style changes for smaller windows/mobile and still need to figure that part out wrt the sub menu.. HELP :(
nav {
position: fixed;
width: 100%;
z-index: 10;
}
nav ul {
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #000;
padding: 0;
text-align: center;
margin: 0;
transition: 1s;
}
nav ul li {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
}
nav ul li a {
text-decoration: none;
color: #000;
font-size: 20px;
padding: 5px 5px;
}
nav ul li ul {
display: none;
}
nav ul li:hover ul {
display: block;
position: absolute;
}
nav.black ul {
background: rgba(255, 255, 255, 1);
color: #666;
}
nav.black ul li a {
text-decoration: none;
font-size: 20px;
transition: 1s;
filter: invert(50%);
}
.menu-icon {
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #00b4ff;
display: none;
}
#media(max-width: 900px) {
.nav-logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 45em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px 0;
text-align: center;
}
.menu-icon {
display: block;
}
}
<div class="nav-wrapper">
<nav>
<div class="menu-icon">
<i class=" fa fa-bars fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Courses
<ul>
<li>PADI Experiences</li>
<li>PADI Basic Courses</li>
<li>PADI Speciality Courses</li>
<li>PADI Pro</li>
</ul>
</li>
<li class="small-nav-logo"><a id="nav-africa" href ="index.html"><img src="img/logo-icon.gif" alt="Home" width="80" height="68"></a></li>
<li>Dives
<ul>
<li>Guided Packages</li>
</ul>
</li>
<li>Nature</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
Add this to your css.
nav ul li ul li{
display: block;
text-align: left;
margin: 20px 0px;
}
All you needed to do was target the li inside the li.
I would like to create a 2-level navigation with delay effect when hovering.
in css Where to put transition?
here is the snippet code:
#import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext');
body {
background: #ADAEAE;
box-sizing: border-box;
color: white;
font-family: 'Quicksand';
margin: 0;
}
nav {
background: #222122;
width: 100%;
text-align: center;
position: fixed;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul a {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: white;
text-decoration: none;
}
nav ul a:hover {
background-color: #404040;
transition: all 1s;
}
nav ul ul li {
display: block;
}
nav li ul {
display: none;
position: absolute;
background: #222122;
}
nav li:hover ul {
display: block;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dokument bez tytułu</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<nav>
<ul>
<li>About
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
</ul>
</li>
<li>Offer
<ul>
<li>Offer2</li>
<li>Offer3</li>
<li>Offer4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
put z-index:1;background: #222122; on nav ul a{} to raise the link and hide the hidden menu below
in nav li ul{} remove display: none; and align the bottoms by bottom:0; and hide it under the a element with z-index:-1;
finally in nav li:hover ul{} have it move down with bottom:-300%; and add the animation here, you get a slide effect with transition: bottom .2s; and the ease-in makes it look like it hits something on the bottom
Note: bottom: -300% is because there are 3 items.
Note: transition is places under the :hover tag so that it disappears when you leave with your cursor, move it to nav li ul to make it slide back up
you can test in this snippet if that is indeed what you wanted.
#import url('https://fonts.googleapis.com/css?family=Quicksand&subset=latin-ext');
body {
background: #ADAEAE;
box-sizing: border-box;
color: white;
font-family: 'Quicksand';
margin: 0;
}
nav {
background: #222122;
width: 100%;
text-align: center;
position: fixed;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul a {
display: inline-block;
height: 50px;
line-height: 50px;
padding: 0 10px;
color: white;
text-decoration: none;
z-index:1;
background: #222122;
}
nav ul a:hover {
background-color: #404040;
transition: all 1s;
}
nav ul ul li {
display: block;
}
nav li ul {
bottom:0;
position: absolute;
background: #222122;
z-index:-1;
}
nav li:hover ul {
bottom: -300%;
display: block;
transition: bottom .2s ease-in;
}
<nav>
<ul>
<li>About
<ul>
<li>About2</li>
<li>About3</li>
<li>About4</li>
</ul>
</li>
<li>Offer
<ul>
<li>Offer2</li>
<li>Offer3</li>
<li>Offer4</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
My drop down menu is only showing the last drop down items. I know my css has something wrong with it, but I cannot figure it out. Can someone please help? Thanks in advance.
Here is the HTML:
<div class="menuBar">
<nav class="Menu">
<ul class="main">
<li>Home</li>
<li>Weddings
<ul>
<li>Gallery</li>
<li>Testimonials</li>
</ul>
</li>
<li>Restaurant
<ul>
<li>Gallery</li>
</ul>
</li>
<li>Special Occasions</li>
<li>Corporate</li>
<li>Upcoming Events</li>
<li>Contact Us</li>
<li>Our Locations</li>
</ul>
</nav>
</div>
Here is the CSS:
nav.Menu {
text-align: center;
margin-top: 14px;
}
nav.Menu .main li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 5px 20px;
cursor: pointer;
}
nav.Menu .main li ul li {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
display: none;
opacity: 0;
visibility: hidden;
}
nav.Menu .main li ul li {
background: #83562c;
display: block;
color: #fff;
margin-top: -2px;
z-index: 1000 !important;
}
nav.Menu .main li:hover ul li {
background: #83562c;
}
nav.Menu .main li:hover ul li {
display: block;
opacity: 1;
visibility: visible;
z-index:99;
}
nav.Menu a {
color: #fff;
font: bold 13px/42px Arial, Helvetica, sans-serif;
padding: 0 10px;
text-align: center;
}
nav.Menu a:hover {
color: #eacc90;
}
Huangism is right, your use of position:absolute is breaking the dropdown. I've rewritten your CSS in the following JSFiddle, but it's still hackish.
I'd recommend doing some reading on dropdown menus:
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
http://cssdeck.com/labs/another-simple-css3-dropdown-menu
drove me to desparation but with a little trickery position:absolute does work http://jsfiddle.net/z509cjmg/3/. Adapted from here: http://cssdeck.com/labs/multi-level-dropdown-menu
.navmenu ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 1s ease;
margin-left: 142px;
margin-top: -30px;
}