I'm a little new to HTML as my classes has recently started and etc. In our task we have to hand in a website that has different characteristics, one of them being a drop down menu.
I managed to almost get it all working, but when I tried to hover my mouse over one of the navigation menu tags, the drop down menu is a little bit to the left like it would be as a listing object?
Here is how it shows up
This is how it looks when I hover over About
I have no idea what I'm doing wrong! I tried to do some research where I ended up centering my navigation menu, but that was all I managed to do! What do I have to do to make it be aligned with the "About" tag?
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
background-color: white;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Issue is because of padding you have for the child ul and anchor tag. If you remove those it will align properly. Try to add the classes to the child elements, as this is not the proper way to write the css.
p {
font-size: 44px;
color: white;
font-family: verdana;
background-color: #333;
text-align: center;
}
p2 {
font-size: 12px;
color: white;
font-family: verdana;
}
body {
background-image: url(background.jpg);
}
div {
margin-left: 400px;
margin-right: 400px;
margin-top: 30px;
border: solid white 3px;
background-color: #333;
}
div2 {
margin-left: auto;
margin-right: auto;
width: 6em;
}
#nav {
text-align:center;
}
#nav ul {
display:inline-block;
}
#nav a {
float:left;
text-decoration:none;
padding:0 30px;
}
ul {
background-color: #333;
font-family: verdana;
}
ul li {
display: inline;
background-color: #333;
font-size: 24px;
height: 47px;
width: 200px;
line-height: 47px;
text-align: center;
float: left;
list-style: none;
}
ul li a {
color: white;
text-decoration: none;
display: block;
}
ul li a:hover {
border: 1px solid red;
}
ul li a:active{
background-color: #333;
color: #333
}
ul li ul li {
display: none;
}
ul li ul{
padding-left: 0;
}
ul li:hover ul li{
display: block;
}
.active {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Sleepless hub</title>
</head>
<body>
<div> <!-- Denne er med for å kun skape en fin designer strek ;) -->
</div>
<div>
<p>There is nothing like a good nut </p>
</div>
<div> <!-- Samme her. -->
</div>
<div id="nav">
<ul>
<li> Home</li>
<li> About
<ul>
<li> <a href="#">Wikipedia</li>
</ul>
</li>
<li> Projects</li>
<li> Contact me</li>
<li> Fun Room</li>
</div>
<div>
<p>Okay</p>
</div>
</body>
</html>
Related
I'm having a bit of trouble in regards to background color being applied to all at once to pages within a part of my navigation section. Currently when I hover over Brass, the background color is being applied to Brass and the pages within this section. What I'm trying to accomplish is getting the background color to appear only when I hover over these elements instead of all at once.
header {
color: #348899;
background-color: #343642;
background-image: url(Images/heading.png);
background-position: right;
background-repeat: no-repeat;
}
#wrapper {
width: 90%;
margin-right: auto;
margin-left: auto;
}
h1 {
margin: 0;
padding: 10px;
font-size: 42pt;
line-height: 36pt;
font-weight: lighter;
}
h2 {
margin: 0;
padding: 0 10px 5px;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
h3 {
margin: 0;
padding: 0 10px 5px 0;
font-size: 18pt;
line-height: 22pt;
font-weight: bold;
font-style: italic;
}
nav {
color: #343642;
background-color: #979C9C;
float: left;
width: 160px;
font-weight: bold;
height: 100%;
}
nav ul li {
list-style: none;
padding: 10px;
}
nav ul li:hover {
background-color: #b1b6b6;
}
nav ul li a {
display: block;
text-decoration: none;
color: #343642;
}
nav ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li a:hover {
color: #fff;
}
main {
color: #17354A;
background-color: #F2EBC7;
margin-left: 160px;
padding: 10px;
z-index: 0;
display: flex;
}
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
margin: 0 20px 0 0;
}
main .row .left {
width: 25%;
}
main .row .middle {
width: 50%;
}
main .row .right {
width: 25%;
}
.brass {
float: right;
margin: 0 0 5px 5px;
}
.logo {
float: right;
margin: 0 0 5px 5px;
}
body{
background-color: #348899;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
footer {
color: #348899;
background-color: #343642;
font-style: italic;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>
Beginning Band Players
</h1>
<h2>
Home
</h2>
</header>
<nav>
<ul>
<li>Home</li>
<li>Brass
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li>Woodwind
<ul>
<li>Clarinet</li>
<li>Flute</li>
<li>Oboe</li>
<li>Saxophone</li>
</ul>
</li>
<li>Percussion
<ul>
<li>Bells</li>
<li>Snare Drum</li>
</ul>
</li>
<li>Maintenence</li>
<li>Additional Equipment</li>
</ul>
</nav>
<main>
<div class="column left">
<div class="logo">
<img src="Images/Logo-E.png" alt="logo" height="200" width="355">
</div>
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
It's our hope that prospective music students find what they're looking
for and enjoy a lifetime of music.
</p>
<div class="brass">
<img src="Images/brass-1.jpg" alt="brass" height="238" width="425">
</div>
</div>
</div>
<div class="column right">
<h3>
What to Expect:
</h3>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources:
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
<footer>
Copyright © 2022, Carter Thomas Wolfe <br>
Web Project Prototype
</footer>
</div>
</body>
</html>
you can use this
nav ul li ul li:hover {
background-color: #b1b6b6;
}
instead of
nav ul li:hover {
background-color: #b1b6b6;
}
I'm trying to create a clone of the google homepage as one of my first html/css projects. This is the first time I've ever coded and I'm having trouble with setting the background colour for one of the navigation bars at the bottom of the screen. I was able to set the background colour of the upper navigation bar (the one with the country name on it) but when I try to set the background colour for the lower navigation bar (the one with the Advertising and Business links) it doesn't show and the bar remains white.
This is my html code for the lower navigation bars
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</footer>
This is my CSS
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #f2f2f2;
}
.bottom_nav {
padding-top: 170px;
}
And this is what the page looks like for reference. I want the lowest bar to be grey as well.
google homepage clone
Can anyone help me out?
You do not need to use ul li. You can wrap your bottom link in to div and use display: flex and justfify-content:space-between to have space between your link.
Also i have modified the a links to match exactly as google footer by adding padding and text-decoration:none
Exact copy of google footer in demo.
Working Demo: https://jsfiddle.net/kx291hqm/
Run snippet below.
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 27px;
}
.bottom_nav_l li a {
display: block;
text-decoration: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_r {
padding-right: 27px;
}
.bottom_nav {
padding-top: 170px;
}
.bottom_link {
display: flex;
justify-content: space-between;
line-height: 40px;
background: #f2f2f2;
}
a {
text-decoration: none;
white-space: nowrap;
color: #5f6368;
padding-left: 27px;
}
<footer class="bottom_nav">
<div class="country_nav">
Canada
</div>
<div class="bottom_link">
<div class="bottom_nav_l">
Advertising
Business
How Search Works
</div>
<div class="bottom_nav_r">
Settings
Terms
Privacy
</div>
</div>
</footer>
Try with adding following css:
.bottom_nav{
background-color:blue;
}
I hope this will help you..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #ededed;
padding-top: -1px;
padding-bottom: 1px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
margin-left: -10px;
}
section{
background-color: #ebebeb;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
.bottom_nav_r li {
float: right;
margin: 10px;
font-size: 14px;
list-style-type: none;
}
.bottom_nav_l li a {
display: block;
margin-left: -10px;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
ul {
list-style-type: none;
}
.bottom_nav_r li a {
display: block;
text-decoration: none;
color: rgba(0,0,0,0.54);
}
.bottom_nav_l li a:hover {
text-decoration: underline;
}
.bottom_nav_r li a:hover {
text-decoration: underline;
}
.bottom_nav_l {
padding-left: 15px;
background-color: #f2f2f2;
}
.bottom_nav_r {
padding-right: 15px;
background-color: #d7d7d7;
}
.bottom_nav {
padding-top: 0px;
position: relative;
top: 460px;
}
</style>
</head>
<body>
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<section>
<div class="bottom_nav_l">
<ul>
<li>Advertising</li>
<li>Business</li>
<li>How Search Works</li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li>Settings</li>
<li>Terms</li>
<li>Privacy</li>
</ul>
</div>
</section>
</footer>
</body>
</html>
I'm currently doing my first website for fun and I decided to make a fan website of a band I really like, just to start. This is my current website but the element that says "store" is too spaced from the right side. The only way I can find to move is by using " margin '-number' " but it will affect the webpage and increase its width. Can anyone help me?
body {
margin: 0;
background: url(images/moonspell_concert_2.jpg) no-repeat;
background-size: cover;
color: #fff;
}
header {
background-color: #000;
}
header::after {
content:'';
display: table;
clear: both;
}
.logo {
}
nav {
float: right;
font-size: 1.45rem;
font-family: "Roboto",sans-serif;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 100px;
height: 40px;
background-color: #000;
line-height: 40px;
text-align: left;
text-transform: uppercase;
font-weight: 700;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}
nav ul li a {
text-decoration: none;
color: #fff;
display: block;
font-size: 0.85rem;
}
nav ul li a:hover {
color: darkgoldenrod;
-webkit-transition: 300ms ease;
transition: 300ms ease;
}
nav ul li ul li {
display: none;
width: 140px;
padding: 0 7px;
text-transform: none;
font-weight: 400;
}
nav ul li ul li a:hover {
color: #fff;
}
nav ul li:hover ul li {
display: block;
}
nav ul li ul li:hover {
background-color: darkgoldenrod;
color: #fff;
}
#news {
margin-right: -46px;
}
#band {
margin-right: -50px;
}
#tour {
margin-right: -50px;
}
#media {
margin-right: -43px;
}
#discography {
margin-right: 10px;
}
#store {
}
.default-cursor /* Cursor fica default nos elementos que não são páginas */ {
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moonspell - Fan Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="container" alt="logo" class="logo">
<img src="images/moonspell_logo.png"/>
<nav>
<ul>
<li id="news">News</li>
<li id="band">Band
<ul>
<li>Profiles</li>
<li>History</li>
</ul>
</li>
<li id="tour">Tour
<ul>
<li>Tour Dates</li>
<li>Tour Archive</li>
</ul>
</li>
<li id="media">Media
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
<li id="discography">Discography
<ul>
<li>Releases</li>
<li>Videography</li>
</ul>
</li>
<li id="store">Store</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
You have set width: 100px on nav ul li, this is what is determining how much space there is to the right of the store element.
If you're happy with using widths for layout in this way then you could simply reduce the width of the store element like so:
#store {
width: 60px;
}
I am trying to create a dropdown menu in HTML and CSS and it does not work as I'm expecting it to. I don't know what is wrong with it.
I'm attempting to make the menu show the subset of items in the parent items <ul> tags on hover and it is not working. Either the child items don't show at all (just the parent items show) or the child items are strewn all across the page in a weird fashion.
My HTML, CSS AND JavaScript code:
What I'm trying to create (NOT MY VIDEO).
function copyText(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
try {
document.execCommand("copy");
} catch(err) {
console.log(err);
}
$temp.remove();
}
function copyMessage() {
console.log("Triggered change");
$("#note").fadeIn("fast");
$("#note").fadeOut("slow");
}
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100% height: auto;
}
.container {
width: 95%;
margin: 0 auto;
}
/* Typography
========*/
.title {
font-size: 2.5rem;
color: #b21acs;
}
.title span {
font-size: 3.75rem;
font-weight: 300;
display: block;
}
.title span2 {
font-size: 2rem;
font-weight: 300;
display: block
}
.title span3 {
display: none;
}
.note {
display: none;
color: #b21acd;
}
/*button
======== */
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
border-width: 5px;
border-style: solid;
padding: .5em 1.75em;
border-color: #b21acd;
color: #FFF;
background-color: transparent;
}
/*Header
======== */
header {
position: absolute;
left: 0;
right: 0;
margin-top: 0em;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
background-color: transparent;
display: inline-block;
}
nav ul li ul {
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
display: inline-block;
float: left;
margin: 0 auto;
}
nav ul li ul li {
display: none;
padding: 0px;
margin: 0px;
opacity: .8;
list-style: none;
background-color: black;
float: left;
line-height: 40px;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
}
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #000
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #b21acd;
}
nav ul li ul:hover nav ul li ul li {
display: inline-block;
}
nav .current {
color: #b21acd;
}
/* home-hero
======= */
.home-hero {
background-image: url(../assets/home-hero_background.png);
padding: 10em 0;
font-weight: 700;
background-color: #000;
color: #FFF;
}
/* Footer
========= */
footer {
background-color: #b21acd;
color: #FFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>TrigonMC | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/copyAndChange.js"></script>
</head>
<body>
<header>
<img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
<nav>
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Forums
<ul>
<li>Reports</li>
</ul>
</li>
<li>Punishments
<ul>
<li>Warnings</li>
<li>Mutes</li>
<li>Kicks</li>
<li>Bans</li>
<li>Temp-Mutes</li>
<li>Temp-Bans</li>
<li>IP-Bans</li>
</ul>
</li>
<li>Apply
<ul>
<li>Apply For Staff</li>
<li>Apply For Builder</li>
</ul>
</li>
<li>Videos
<ul>
<li>ExZiByte's Livestream</li>
<li>GameWolf's Livestream</li>
<li>Placeholder 1</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">TrigonMC Network
<span>We Support</span>
<span2>Versions 1.8 - 1.12.2</span2>
<span3 id='ip'>play.trigonmc.com</span3>
</h1>
<button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
<div class="note">
<p>Copied!</p>
</div>
</div>
</section>
<section class="home-servers">
<div class="home-servers-textbox">
<h1>Servers we have</h1>
<h3>Creative</h3>
<h5>Coming Soon</h5>
<h3>Prison</h3>
<h5>Coming Soon</h5>
<h3>Skyblock</h3>
<h5>Coming Soon</h5>
<h3>Survival</h3>
<h5>Coming Soon</h5>
<h3></h3>
</div>
</section>
<footer>
<p>TrigonMC Gaming Group Copyright © 2018</p>
<p>All images Copyright © of respectful owners</p>
</footer>
</body>
</html>
This is the problem with your css
nav ul li ul:hover nav ul li ul li {
display: inline-block;
}
Basically your layout is something like this:
nav -> ul -> li -> ul -> li...
What you are telling the browser is something like this:
nav -> ul -> li -> ul -> nav -> ul -> li -> ul -> li...
Which certainly do not match. Hence, the submenu remains hidden.
So, what to do. Just replace that bit of rule with this
nav ul li:hover ul li{
display: block;
}
Also, change the color of link text to something that would not blend in with the background
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #fff
}
Try to write your stylesheets around classes. It will help you a lot in avoiding such issues in the future.
function copyText(element){
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
try{
document.execCommand("copy");
}catch(err){
console.log(err);
}
$temp.remove();
}
function copyMessage(){
console.log("Triggered change");
$("#note").fadeIn("fast");
$("#note").fadeOut("slow");
}
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: 'Raleway', sans-serif;
text-align: center;
}
img {
max-width: 100% height: auto;
}
.container {
width: 95%;
margin: 0 auto;
}
/* Typography
========*/
.title {
font-size: 2.5rem;
color: #b21acs;
}
.title span {
font-size: 3.75rem;
font-weight: 300;
display: block;
}
.title span2 {
font-size: 2rem;
font-weight: 300;
display: block
}
.title span3 {
display: none;
}
.note {
display: none;
color: #b21acd;
}
/*button
======== */
.button {
display: inline-block;
font-size: 1.15rem;
text-decoration: none;
text-transform: uppercase;
border-width: 5px;
border-style: solid;
padding: .5em 1.75em;
border-color: #b21acd;
color: #FFF;
background-color: transparent;
}
/*Header
======== */
header {
position: absolute;
left: 0;
right: 0;
margin-top: 0em;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
background-color: transparent;
display: inline-block;
}
nav ul li ul {
border-bottom: none;
height: 86px;
line-height: 86px;
font-size: 14px;
float: left;
margin: 0 auto;
}
nav ul li ul li {
display: none;
padding: 0px;
margin: 0px;
opacity: .8;
list-style: none;
background-color: black;
float: left;
line-height: 40px;
text-align: center;
font-size: 12px;
position: absolute;
z-index: 1;
}
nav ul li ul li a{
display: block;
padding: 12px 16px;
text-decoration: none;
color: #fff
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin: 1em;
}
nav a {
font-weight: 900;
text-decoration: none;
text-transform: uppercase;
font-size: .8rem;
padding: .5em;
color: #FFF;
}
nav a:hover,
nav a:focus {
color: #b21acd;
}
nav ul li:hover ul li{
display: block;
}
nav .current {
color: #b21acd;
}
/* home-hero
======= */
.home-hero {
background-image: url(../assets/home-hero_background.png);
padding: 10em 0;
font-weight: 700;
background-color: #000;
color: #FFF;
}
/* Footer
========= */
footer {
background-color: #b21acd;
color: #FFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width, initial-scale=1">
<title>TrigonMC | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="shortcut-icon" href="assets/favicon.ico" type="image/x-icon">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/copyAndChange.js"></script>
</head>
<body>
<header>
<img src="assets/logo_transparent.png" alt="TrigonMC Network Logo" class="logo">
<nav>
<ul>
<li><a class="current" href="#">Home</a></li>
<li>Forums
<ul>
<li>Reports</li>
</ul>
</i>
<li>Punishments
<ul>
<li>Warnings</li>
<li>Mutes</li>
<li>Kicks</li>
<li>Bans</li>
<li>Temp-Mutes</li>
<li>Temp-Bans</li>
<li>IP-Bans</li>
</ul>
</li>
<li>Apply
<ul>
<li>Apply For Staff</li>
<li>Apply For Builder</li>
</ul>
</li>
<li>Videos
<ul>
<li>ExZiByte's Livestream</li>
<li>GameWolf's Livestream</li>
<li>Placeholder 1</li>
</ul>
</li>
</ul>
</nav>
</header>
<section class="home-hero">
<div class="container">
<h1 class="title">TrigonMC Network
<span>We Support</span>
<span2>Versions 1.8 - 1.12.2</span2>
<span3 id='ip'>play.trigonmc.com</span3>
</h1>
<button id='ipButton' class="button button-accent" onclick="copyText('#ip'); copyMessage();">Copy the IP of the server!</button>
<div class="note">
<p>Copied!</p>
</div>
</div>
</section>
<section class="home-servers">
<div class="home-servers-textbox">
<h1>Servers we have</h1>
<h3>Creative</h3>
<h5>Coming Soon</h5>
<h3>Prison</h3>
<h5>Coming Soon</h5>
<h3>Skyblock</h3>
<h5>Coming Soon</h5>
<h3>Survival</h3>
<h5>Coming Soon</h5>
<h3></h3>
</div>
</section>
<footer>
<p>TrigonMC Gaming Group Copyright © 2018</p>
<p>All images Copyright © of respectful owners</p>
</footer>
</body>
</html>
i have been trying to create a navigation bar with a drop-down menu in it. after a few hours of looking have had found the problem is that as the cursor moves down the drop-down and into the next div underneath it, it disappears.
i have been trying to but cannot figure out how to fix it.
here is the jsfiddle
the page html is :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E-book</title>
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/button.css" rel="stylesheet" type="text/css">
<link href="../css/dropdown.css" rel="stylesheet" type="text/css">
<script src="../script/script.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<span><h1>AS Level E-Book</h1></span>
</div>
<div class="nav-wrapper">
<nav class="menu-wrap">
<ul>
<li>Introduction</li>
<li>Online Services
<ul>
<li>E-Mail</li>
<li>Social Network</li>
<li>Instant Messaging</li>
</ul>
</li>
<li>Life In Info Age</li>
<li>Digital Divide</li>
<li>Conclusion</li>
</ul>
</nav>
</div>
<div class="main"><!-- TemplateBeginEditable name="next and prev" -->
<a><button class="metal radial"><=</button></a>
<a><button class="metal radial">=></button></a>
<!-- TemplateEndEditable --></div>
<div class="cont"><!-- TemplateBeginEditable name="content" -->
content
<!-- TemplateEndEditable -->
</div>
</div>
</body>
</html>
and the css is:
.nav-wrapper{
position:absolute; top: 100px; right: 0; left: 0;
background: linear-gradient(to right, #aaa , #aaa, #ddd, #ddd, #aaa,#aaa);
}
nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
nav a:hover {
background-color: #005f5f;
}
nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
nav li li {
font-size: .8em;
}
nav li {
width: 250px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
nav a {
border-bottom: none;
}
nav > ul > li {
text-align: center;
}
nav > ul > li > a {
padding-left: 0;
}
nav li ul {
position: absolute;
display: none;
width: inherit;
}
nav li:hover ul {
display: block;
}
nav li ul li {
display: block;
}
any help would be much appreciated
thanks
Add high(er) z-index to:
nav li ul {
position: absolute;
display: none;
width: inherit;
z-index:9999;
}
About z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Demo: https://jsfiddle.net/0cd16xjj/1/