I am trying to set up the footer, but I'm unable to remove the lines under the text. I also would like to change the color of the text. I tried using text decoration:none under .footer ul, but that was unsuccessful.
h2 {
text-align: center;
font-family: "Courier New";
color: beige;
font-size: 50px;
font-weight: 200;
text-shadow: -2px -2px black;
margin-bottom: -50px;
position: relative;
}
.head-link {
text-decoration: none;
color: aliceblue;
}
.head-link:hover {
margin: 20px auto 20px;
position: relative;
color: darkgoldenrod;
}
header {
background-image: url(https://i.imgur.com/xD3POCF.jpg);
position: absolute;
background-position: center;
max-width: 2000px;
width: 100%;
height: 100%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
bottom: 40px;
}
.header-image {
background-size: cover;
}
.dropbtn {
background-color: transparent;
color: darkblue;
padding: 10px;
cursor: pointer;
font-family: monospace;
top: 0;
font-size: 15px;
width: 120px;
height: 50px;
border-color: black;
border-style: double;
align-content: center;
text-align: center;
margin-top: -10px;
}
.dropdown {
display: inline-block;
position: relative;
margin-left: 15px;
}
.dropdown-content {
padding: 12px;
position: absolute;
font-family: monospace;
background-color: transparent;
z-index: 1;
display: none;
min-width: 10px;
text-align: left;
left: 0;
}
.dropbtn:hover {
color: white;
}
.dropdown-content a {
color: #04116f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:hover {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
text-decoration: underline;
}
.sidebar {
display: block;
position: relative;
top: -650px;
bottom: 0px;
left: -30px;
width: 120px;
padding: 10px;
background: transparent;
z-index: 0;
}
.sidebar ul {
cursor: pointer;
list-style: none;
color: white;
line-height: 2;
}
body {
margin: 0px;
top: 0;
width: 100%;
max-height: 10%;
background-image: url(http://i.imgur.com/yiMoYpV.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20px 50px center;
background-attachment: fixed;
}
.content {
display: block;
margin-right: 0px;
padding: 0px;
margin-bottom: 700px;
position: relative;
max-width: 1500px;
max-height: 500px;
}
p {
display: block;
padding: 40px;
position: relative;
max-width: 500px;
max-height: 500px;
width: 100%;
left: 50%;
height: 200px;
top: 120px;
font-family: monospace;
font-size: 15px;
line-height: 2;
margin-bottom: -70px;
color: goldenrod;
text-align: left;
}
.footer {
margin: 100px 0 0 0;
display: flex;
flex-flow: row;
justify-content: center;
padding-bottom: 2px;
align-content: space-between;
background: transparent;
overflow: hidden;
}
.footer ul {
text-align: center;
list-style: none;
display: inline-flex;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<header>
<h2 style="bottom: -130px">
<a href="#" class=h ead-link> A B E L</a>
</h2>
<div class="dropdown" style="float;right">
<button class="dropbtn">Menu</button>
<div class="dropdown-content" style="right;0">
About
Portfolio
Contact
</div>
</div>
<div class="title"></div>
<title>A B E L </title>
</header>
<body>
<div id="hl-content" class="content"></div>
<p>
<span style="color:navajowhite">
<b>Hello, Welcome to my website.</b>
</span>
<BR></BR>
My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling
and taking photos!
</p>
<p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p>
<div class="footer">
<ul>
<li> About</li>
<li>Portfolio</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
As you can see text decoration and color doesn't work.
How can I fix this?
.footer > ul > li > a {
color: white;
text-decoration: none;
}
Try this.
You need to style the links in your footer explicitly.
.footer ul a {
text-decoration:none;
}
You need to add this css :
.footer ul li a {
text-decoration:none;
}
I've tried my best, this might help as per your requirement(underline and color):
add this in your code,
.footer ul li a {
text-decoration: none;
color: tan;
padding: 5px;
}
.footer ul li a:hover {
text-decoration: underline;
}
appreciate if it is useful enough.
Related
I followed a tutorial about sticky navbar with pure css without javascript. The problem is that the sticky navigation bar is not fixed at the top of the page when i scroll down. Under this sticky navbar I have 3 other sections. Every time I scroll down the page that the navbar goes under sections and does not work anymore. In the header I have a full-width image and I have some text and a button on it.
Here is my code of navbar in HTML:
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .1);
position: sticky;
top: 0;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
Sorry for my bad english.
Thanks!
The reason why it behave is the use of z-index in the .intro .inner class. You will need to set the z-index: 11; on the .nav class for it to appear on top of everything.
header {
margin: auto;
position: relative;
width: 100%;
height: 100vh;
background: linear-gradient(black, transparent, black), url(images/architecture2.jpg);
background-size: cover;
background-position: center;
display: table;
top: 0;
}
nav {
position: absolute;
width: 100%;
height: 50px;
background: rgba(0, 0, 0, .8);
position: sticky;
top: 0;
z-index: 11;
}
nav ul {
display: flex;
margin: 0;
padding: 0 100px;
float: right;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
.intro .inner {
margin-top: 200px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
color: #fff;
}
.content h1 {
font-weight: 800;
color: #fff;
text-transform: uppercase;
font-size: 3.5rem;
}
.content p {
padding: 0;
margin-top: -35px;
margin-left: -1px;
color: #fff;
font-size: 2.2rem;
padding-bottom: 35px;
}
.btnD1 {
border: 2px solid #fff;
color: #000;
background: #fff;
border-radius: 50px;
padding: 16.5px 50px;
font-size: 1.15rem;
font-weight: 500;
text-decoration: none;
}
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu">
<ul>
<li>Acasa</li>
<li>Despre Noi</li>
<li>Calatorii</li>
<li>Contact</li>
<li>SignIn</li>
</ul>
</div>
</nav>
<div class="intro">
<div class="inner">
<div class="content">
<h1>Călătoreşte cu noi în jurul lumii</h1>
<p>Destinaţia visată este la un click distanţă!</p>
<a class="btnD1" href="#">Rezervă acum</a>
</div>
</div>
</div>
</header>
</div>
</body>
</html>
If you're not sure what other z-index values you gonna use. Most people set it to 999 for things that supposed to appear on top of everything at all times.
The nav is sticky, but only within it's parent (which is the .header). To fix this, simply make the .header sticky - this way it will be sticky as long as it's parent (which is .wrapper) is being scrolled.
And also give it a higher z-index than it's siblings (.intro inner has z-index: 10), or it will come underneath the intro inner when scrolled pass it :
header {
position: sticky;
top: 0;
z-index: 11;
}
The problem was that sticky propriety. i removed that from the nav and i added a transition and z-index as well.
nav{
position: fixed;
width: 100%;
height: 50px;
background: rgba(0,0,0,.2);
top: 0;
z-index:999;
transition: 0.5s;
}
nav ul{
display: flex;
margin: 0;
padding: 0 100px;
float:right;
}
nav ul li{
list-style: none;
}
nav ul li a{
display: block;
color: #fff;
padding: 0 15px;
text-decoration: none;
text-transform: capitalize;
font-weight: bold;
line-height: 90px;
}
Thank you all!
Make your wrapper's Height auto. this will fix your issue.
I`m trying to make this navbar responsive, and have not found a code that works in this example. When I adjust the width of the screen, I want all the links (not the logo) to be gathered in a hamburger icon, so in portrait mode it will only display the logo and the hamburger icon with the links.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown This example is very close to what I would like, but the content in my navbar is centered with a logo in between the links, and I couldn`t make it work. Also I want the third element (the logo) to be displayed instead of the first link (when the width reaches a certain point). Any help would be greatly appreciated
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
position: fixed;
top: 0;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
<nav>
Home
News
<div><img id="logo" src="src/Logo.jpg" alt=""></div>
Sponsors
<div class="dropdown">
<button class="dropbtn">About us</button>
<div class="dropdown-content">
Our employees
About company
Founder
</div>
</div>
</nav>
I just updated your code with few fixes your logo will always on center and hamburger menu also added. I hope it'll help you out. Thanks
nav {
background: black;
font-family: Times New Roman;
font-size: 14px;
height: 94px;
position: fixed;
width: 100%;
z-index: 1;
}
nav ul {
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
height: 94px;
}
nav ul li {
background-color: white;
border: 3px solid #f9c534;
position: relative;
white-space: nowrap;
}
nav ul li:hover {
background-color: #f9c534;
border-color: #fff;
}
nav ul li a {
color: black;
display: block;
margin: 0;
padding: 16px;
text-decoration: none;
}
nav li ul {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: none;
position: absolute;
right: -3px;
top: 50px;
height: auto;
min-width: 150px;
}
nav ul li:hover ul {
display: block;
}
nav #logo {
border-radius: 50%;
background: rgba(0,0,0,0.3);
border: 0;
padding: 0;
width: 100px;
}
#mob-dropChecked {
display: none !important;
}
#media only screen and (max-width: 768px) {
nav {
height: 60px;
}
nav ul {
display: block;
height: 60px;
position: relative;
top: 44px;
}
nav ul li {
display: none;
}
nav #logo {
display: block;
position: absolute;
left: 34%;
top: -29px;
}
#mob-btn {
background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
background-color: transparent;
border: 0;
background-repeat: no-repeat;
background-size: contain;
position: relative;
top: 21px;
height: 40px;
width: 40px;
padding: 13px 20px;
z-index: 2;
}
#mob-dropChecked:checked ~ ul li{
display: block;
}
nav li ul {
position: relative;
right: 0;
top: 16px;
}
}
<nav>
<label for="mob-dropChecked" id="mob-btn"></label>
<input type="checkbox" id="mob-dropChecked" role="button">
<ul>
<li>Home</li>
<li>News</li>
<li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
<li>Sponsors</li>
<li>About us
<ul>
<li>Our employees</li>
<li>About company</li>
<li>Founder</li>
</ul>
</li>
</ul>
</nav>
You can add class to the wrapper div of logo img tag
and add css position: absolute; top: 10px; left: 10px to it for smaller devices using css media queries.
Else (not recommended), you can use two img tags. Hide one on desktop and another on mobile using display: block / display: none.
You could remove the logo from the nav and add a spacer element in its place. Then use absolute position on the logo to get it into place. It's a bit hacky, but would work. https://codepen.io/nickberens360/pen/bZmGWy
header{
position: fixed;
width: 100%;
top: 0;
}
.logo{
display: block;
margin: auto;
position: absolute;
left: 36px;
right: 0;
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 99999999;
top: 0;
}
.spacer{
margin: 0 100px;
border: 1px solid red;
}
nav{
display: flex;
width: 100%;
height: 17%;
background: black;
align-items: center;
justify-content: center;
font-family: Times New Roman;
font-size: 1.5vw;
z-index: 1;
}
nav a{
text-decoration: none;
background-color: white;
color: black;
margin: 0 40px;
padding: 16px;
border: 3px solid #f9c534;
width: 143px;
text-align: center;
}
#logo{
width: 7vw;
height: auto;
background: rgba(0,0,0,0.3);
border-radius: 50%;
margin: 0 5vw;
}
.dropbtn {
padding: 16px;
background: white;
font-family: Times New Roman;
font-size: 1.5vw;
color: black;
border: 3px solid #f9c534;
margin: 0 40px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
margin: 0;
text-decoration: none;
display: block;
}
nav a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown-content a:hover {
background-color: #f9c534;
border: 2px solid white;
}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {
background-color: #f9c534;
border: 2px solid white;
}
I have a problem with putting an img for hover background.
It should look like this : Navigation
These 2 lines, represent the hover transparent image, and the text "home" should be in center of that img.. I have no idea how to do that... Anyone ?
Sorry if my english is bad
.page-container {
width: 980px;
margin: 0 auto;
text-align: center;
}
header {
margin: 0;
padding: 0;
width: 100%;
height: 220px;
background-color: #EAEAEA;
}
.logo {
text-align: center;
}
.logo img {
margin: 30px 0 0 0;
}
nav {
height: 136px;
}
ul {
list-style-type: none;
display: inline-block;
margin: 70px 0 0 0;
padding: 0;
}
nav li {
float: left;
text-align: center;
}
nav li a {
margin-right: 165px;
text-decoration: none;
float:left;
font-size: 22px;
letter-spacing: 3px;
text-transform: uppercase;
font-family: font91477;
color: #9E9E9E;
background-size: 75px;
}
a:focus {
text-decoration: none;
color: #9E9E9E;
}
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<div class="page-container">
<ul>
<li>Home</li>
<li>O Podjetju</li>
<li>Produkti</li>
<li><a class="last-child" href="#">Kontakti</a></li>
</ul>
</div>
</nav>
</header>
just add the following css styles
a:hover {
height: 75px;
text-decoration: none;
color: #9E9E9E;
background: url(http://i.imgur.com/P5tF09r.png) no-repeat center;
/*****************here they are ************/
display:flex;
align-items: center;
}
Why you don't make it in css ? Something like this
.menu{
list-style: none;
background-color: #EAEAEA;
margin: 0;
padding: 20px 0;
overflow: hidden;
}
.menu__item{
float: left;
margin: 0 20px;
position: relative;
}
.menu__item a{
background-color: #EAEAEA;
text-transform: uppercase;
position: relative;
z-index: 1;
}
.menu__item::after{
content:'';
width: 1px;
height: 1px;
background-color: #000;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
transform: rotate(-45deg);
z-index: 0;
transition: all .25s ease;
}
.menu__item:hover::after{
width: 50px;
margin: -1px 0 0 -25px;
}
<ul class="menu">
<li class="menu__item"><a>Home</a></li>
<li class="menu__item"><a>test</a></li>
<li class="menu__item"><a>very long title for test</a></li>
<li class="menu__item"><a>test</a></li>
</ul>
I'm fairly new to html, and when I tried to create a webpage, I encountered a problem. I managed to make a navigation bar with a drop down menu directly under the "Games" section, but if I scroll down and open the drop down menu, it no longer opens directly under the navigation bar. This is my HTML code.
<div class="wrapper">
<div id="main-title">
<header>
<h1>Max Reviews</h1>
</header>
</div> <!-- Title box-->
<div id="nav"> <!-- Navigation Bar -->
<nav>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>About Me</li> <!-- Link to about page -->
<li class="drop">
<p>Games</p>
<div class="drop-content">
<p>Red Faction: Guerrilla</p> <!-- Contains links to the respective pages -->
<p>Way of the Samurai 3</p>
<p>Singularity</p>
</div>
</li>
<li>Reviews</li>
<li>External Store</li> <!-- Link to external site -->
<li>Videos</li> <!-- Contains links to Youtube -->
</ul>
</nav>
</div>
<div class="image"> <!-- Banner-->
<a href="singularity.html">
<img src="modified singularity aging 1.jpg" alt="singularity">
<h2><span>Recommended Game of the Month</span></h2>
</a>
</div>
<div id="home-content"><p>Learn more about the site ☛here☚</p></div>
<div id="footer">
<p>© Copyright 2016-2017. All images here were taken and edited by me. All rights reserved. Games featured here might not be suitable for all audience.</p>
</div>
</div>
And this is the stylesheet.
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
position: fixed;
top: 155px;
border: 1px solid black;;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
Please help me as I've been trying to solve this problem for 2 days. Also, this is my first time posting a question here, so forgive me if I indented my code wrongly, or if I inadvertently violated some of the rules of Stack Overflow.
The reason for this behaviour is that your drop-content has position:fixed on hover.
From MDN:
…an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist. The absolutely positioned element is positioned relative to its nearest positioned ancestor… Fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the viewport.
Working example on JSFiddle and here is what I've changed:
#nav ul {
/*overflow: hidden;*/
}
.drop:hover .drop-content {
/*position: fixed;
top: 155px;*/
position: absolute;
}
Update CSS to
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
margin: 0;
width: 100%;
background-color: #FFFFFF;
padding: 0px;
overflow-x: hidden;
}
body {
transition: background 600s ease-in-out;
}
body:hover {
background-color: #4B0101;
}
/*main title*/
#main-title {
background-color: #33B2E7;
color: #FFFFFF;
position: relative;
top: 25px;
left: 20px;
padding: 10px;
margin-left: 10px;
display: inline-block;
transition: color 1s, transform 1s;
transition-delay: 2s;
}
#main-title:hover {
color: black;
transform: rotate(360deg);
}
/* Nav */
#nav nav{
padding-top: 100px;
margin-bottom: 0;
}
#nav ul {
list-style-type: none;
margin: 0;
background-color: #1C86EE;
padding: 0;
position: relative;
width: 100%;
bottom: 40px;
display: inline-block;
}
#nav li {
float: left;
width: 16%;
}
li a, .dropbtn {
display: inline-block;
color: #FFFFFF;
text-align: center;
padding-left: 50px;
padding-right: 50px;
text-decoration: none;
}
.active {
background-color: #6CCC0A;
padding-right: 50px;
}
li a:hover, .drop:hover .dropbtn {
background-color: #BFA811;
}
a {
padding-top: 10px;
padding-bottom: 10px;
}
li.drop {
display: inline-block;
}
.drop-content {
display: none;
position: absolute;
background-color: #970707;
min-width: 50px;
box-shadow: 0px 8px 16px 0px #000000;
z-index: 100;
}
.drop-content a {
color: #FFFFFF;
padding: 15px 20px;
display: block;
text-align: left;
}
.drop-content a:hover {
background-color: #02BBC4
}
.drop:hover .drop-content {
display: block;
}
/*banner*/
.image {
position: relative;
width: 100%;
}
.image h2 {
position: absolute;
top: 600px;
text-align: center;
width: 100%;
right: 350px;
}
.image h2 span {
color: #FFFFFF;
font: Arial, Calibri, Sans-serif;
background: #000000;
padding: 10px;
}
.image h2:hover span {
background-color: #003316;
}
.button {
position: absolute;
top: 1013px;
left: 700px;
padding: 16px 32px;
text-align: center;
margin: 4px 2px;
display: inline-block;
cursor: pointer;
background-color: rgb(41,120,104);
color: rgb(240,144,22);
font-family: Cambria, Times New Roman, serif;
font-size: 20px;
}
/*content*/
#home-content {
position: relative;
padding: 20px;
text-align: center;
margin-left: 90px;
display: block;
color: #8A0707
}
#home-content a {
color: #09922A
}home-content a:visited {
color: #000000
}
/*Footer*/
#footer {
background: #000000;
width: 100%;
height: 40px;
position: relative;
bottom: 0;
left: 0;
padding-top: 10px;
overflow: hidden;
}
#footer p {
font-family: arial, calibri, sans-serif;
color: #FFFFFF;
text-align: center;
}
#aboutme h2 {
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
font-family: Cambria, Calibri, sans-serif;
font-size: 20px;
color: #000000;
}
#aboutme article {
padding-top: 20px;
position: relative;
margin-left: 25%;
margin-right: 25%;
display: inline-block;
font-family: arial, cambria, serif;
line-height: 200%;
color: #777000;
text-align: center;
border: 2px solid #000000;
padding: 10px;
}
#gallery-title {
text-align: center;
font-family: Cambria, calibri, sans-serif;
padding-top: 20px;
}
#image-1 {
text-align: center;
margin: 0 25%;
padding: 20px;
}
.img-desc-1 {
padding: 20px;
color: #047615;
}
#image-2 {
text-align: center;
margin: 0 25%;
border: 2px solid #262020;
padding: 20px;
}
#prompt-text {
text-align: center;
padding-top: 30px;
font-family: cambria, calibri, sans-serif;
}
.image-container img{
height: 300px;
width: 300px;
padding-left: 60px;
padding-top: 60px;
}
.image-container p{
padding-left: 80px;
font-family: Arial, cambria, sans-serif;
color: #560404;
text-decoration: none;
}
.image-container {
display: block;
text-align: center;
padding-left: 20px;
}
#image1 {
padding-right: 60px;
padding-bottom: 10%
}
#image2 {
padding-right: 60px;
padding-bottom: 10%;
}
#image3 {
padding-bottom: 0;
margin: 0;
}
.gameimages {
padding-bottom: 15%;
text-align: center;
}
.gameimages p {
padding-top: 20px;
}
.gameimages h3 {
text-align: center;
font-family: cambria, times new roman, sans-serif
}
#side-nav {
height: 200px;
float: right;
bottom: 1500px;
right: 3%;
padding: 10px;
background-color: #8C3406;
display: block;
position: relative;
text-align: center;
}
2 changes done.
Removed overflow:hidden in #nav ul
Keot display:block only in .drop:hover .drop-content
The drop-down menu wont work for my navigation. It gets hidden with display:none but upon hovering nothing is shown even though i specified that when the anchor tag containing the UL is hovered over display the child elements as blocked.
html:
<body>
<header id = "M_head">
<h2><ul>MC</ul></h2>
</header>
<div id="container">
<nav id="M_nav">
<ul>
<a>NEWS<img class="Nav_down1" src="Nav_down1.png">
<ul>
<li><a>ting1</a></li>
</ul>
</a>
<a>STORE<img class="Nav_down1" src="Nav_down1.png"></a>
<a>BLOG<img class="Nav_down1" src="Nav_down1.png"></a>
<a>CONTACTS<img class="Nav_down1" src="Nav_down1.png"></a>
<a>ABOUT<img class="Nav_down1" src="Nav_down1.png"></a>
</ul>
</nav>
<section id="M_section">
<div id=Side_sec></div>
<div id="Side_sec2"></div>
</section>
<footer id="M_footer">
</footer>
</div>
</body>
css:
* {
box-sizing: border-box; }
body {
max-width: 100%;
margin: 0px;
display: block; }
#container {
padding: 0;
text-align: center;
box-sizing: border-box;
margin: 0px auto;
margin-top: -.5em;
background-image: url("MircBackground.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat; }
#M_head {
margin: 0px auto;
color: black;
width: 90%;
background-color: white;
height: 4em; }
#M_head ul {
padding: 0px auto !important;
margin: 0px;
margin-left: 5em;
text-align: left;
font-style: italic;
font-weight: bold;
width: 30%;
letter-spacing: -0.08em;
word-spacing: -0.03em; }
#M_nav ul {
width: 102.5%;
padding: 0px;
padding-top: .25em;
padding-bottom: .25em;
margin-left: -2.6%;
margin-top: 0em;
background-color: black;
position: relative;
display: inline-table; }
#M_nav ul a {
display: inline-block;
list-style-type: none;
text-decoration: none;
text-align: center;
padding-left: 3.5em;
padding-right: 3.5em;
padding-top: 0.35em;
padding-bottom: 0.35em;
display: inline-block;
border-radius: 0.25em;
color: white;
font-weight: bold;
background-color: black; }
.Nav_down1 {
position: absolute;
height: 0.625em;
margin-left: 0.625em;
margin-top: 0.3125em;
overflow: none; }
#M_nav ul a:hover {
background-color: #FFBF00;
color: white;
font-shadow: none; }
#M_nav ul ul {
display: none; }
#M_nav ul > a:hover > ul {
display: block; }
#Side_sec {
height: 50em;
width: 15%;
border: 2px solid white;
float: right; }
#M_section {
height: 50em;
width: 80%;
margin: -1em auto;
border: 2px solid white; }
here is the Jsfiddle link:http://jsfiddle.net/va06bfav/
* {
box-sizing: border-box;
}
body {
max-width: 100%;
margin: 0px;
display: block;
}
#container {
padding: 0;
text-align: center;
box-sizing: border-box;
margin: 0px auto;
margin-top: -.5em;
background-image: url("MircBackground.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
#M_head {
margin: 0px auto;
color: black;
width: 90%;
background-color: white;
height: 4em;
}
#M_head ul {
padding: 0px auto !important;
margin: 0px;
margin-left: 5em;
text-align: left;
font-style: italic;
font-weight: bold;
width: 30%;
letter-spacing: -0.08em;
word-spacing: -0.03em;
}
#M_nav ul {
width: 102.5%;
padding: 0px;
padding-top: .25em;
padding-bottom: .25em;
margin-top: 0em;
background-color: black;
position: relative;
display: inline-table;
}
#M_nav ul a {
display: inline-block;
list-style-type: none;
text-decoration: none;
text-align: center;
padding-left: 3.5em;
padding-right: 3.5em;
padding-top: 0.35em;
padding-bottom: 0.35em;
display: inline-block;
border-radius: 0.25em;
color: white;
font-weight: bold;
background-color: black;
}
.Nav_down1 {
position: absolute;
height: 0.625em;
margin-left: 0.625em;
margin-top: 0.3125em;
overflow: none;
}
#M_nav ul a:hover {
background-color: #FFBF00;
color: white;
font-shadow: none;
}
#M_nav ul li {
float: left;
position: relative;
}
#M_nav ul ul {
display: none;
position: absolute;
width: 157px;
top: 34px;
left: 0px;
list-style: none;
}
#M_nav ul a:hover + ul {
display: block;
}
#Side_sec {
height: 50em;
width: 15%;
border: 2px solid white;
float: right;
}
#M_section {
height: 50em;
width: 80%;
margin: -1em auto;
border: 2px solid white;
}
<div id="container">
<nav id="M_nav">
<ul>
<li>
<a>NEWS<img class="Nav_down1"src="Nav_down1.png">
</a>
<ul>
<li><a>ting1</a>
</li>
</ul>
</li>
<li>
<a>NEWS<img class="Nav_down1"src="Nav_down1.png">
</a>
<ul>
<li><a>ting1</a>
</li>
</ul>
</li>
<li>
<a>NEWS<img class="Nav_down1"src="Nav_down1.png">
</a>
<ul>
<li><a>ting1</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
If you see your code in dev tool you can see that Ul which is your drop down menu is not immediate children of your anchor tag it is placed after anchor tag immediately. The selector you are using is X > Y which selects direct children (please see the link for more detailed information about css selector.)
Changes i have made
Changed your markup structure added li in it which was not there earlier and causing the weird behavior of drop down menu which i have mentioned above.
Changed your css selector from X > Y to X X + Y what this selector will do ,It will select only the element that is immediately preceded by the former element.
* {
box-sizing: border-box;
}
body {
max-width: 100%;
margin: 0px;
display: block;
}
#container {
padding: 0;
text-align: center;
box-sizing: border-box;
margin: 0px auto;
margin-top: -.5em;
background-image: url("MircBackground.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
}
#M_head {
margin: 0px auto;
color: black;
width: 90%;
background-color: white;
height: 4em;
}
#M_head ul {
padding: 0px auto !important;
margin: 0px;
margin-left: 5em;
text-align: left;
font-style: italic;
font-weight: bold;
width: 30%;
letter-spacing: -0.08em;
word-spacing: -0.03em;
}
#M_nav ul {
width: 102.5%;
padding: 0px;
padding-top: .25em;
padding-bottom: .25em;
margin-left: -2.6%;
margin-top: 0em;
background-color: black;
position: relative;
display: inline-table;
}
#M_nav ul a {
display: inline-block;
list-style-type: none;
text-decoration: none;
text-align: center;
padding-left: 3.5em;
padding-right: 3.5em;
padding-top: 0.35em;
padding-bottom: 0.35em;
display: inline-block;
border-radius: 0.25em;
color: white;
font-weight: bold;
background-color: black;
}
.Nav_down1 {
position: absolute;
height: 0.625em;
margin-left: 0.625em;
margin-top: 0.3125em;
overflow: none;
}
#M_nav ul a:hover {
background-color: #FFBF00;
color: white;
font-shadow: none;
}
#M_nav ul ul {
display: none;
}
#M_nav ul a:hover + ul {
display: block;
}
#Side_sec {
height: 50em;
width: 15%;
border: 2px solid white;
float: right;
}
#M_section {
height: 50em;
width: 80%;
margin: -1em auto;
border: 2px solid white;
}
<div id="container">
<nav id="M_nav">
<ul>
<li>
<a>NEWS<img class="Nav_down1"src="Nav_down1.png">
</a>
<ul>
<li><a>ting1</a></li>
</ul>
</li>
</ul>
</nav>
</div>