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/
Related
I have to make this:
I am very inexperienced in HTML so I though the best thing would be making a rectangle in a div and show only half of it, but I can't seem to make it work. Here is the screen of the current website and how I would like to display it instead:
And here's the code:
header {
font-family: Arial;
}
header nav {
color: white;
}
header nav ul {
list-style: none;
margin: 0;
padding: 0;
}
header nav ul li {
margin: 0;
padding: 0;
float: left;
width: 200px;
height: 40px;
background-color: rgb(187, 199, 124);
line-height: 40px;
text-align: center;
}
header nav ul li a {
display: block;
text-decoration: none;
color: white;
}
header nav ul li a:hover {
background-color: rgb(163, 175, 75);
opacity: 0.5;
}
header nav ul li ul li {
display: none;
}
header nav ul li:hover ul li {
display: block;
}
.fit-picture {
max-width: 12%;
}
#rectangle {
width: 1000px;
height: 900px;
background: rgb(187, 199, 124);
border-radius: 500px;
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li>
<a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>
You can use transform:translateX to achieve this
header {
font-family: Arial;
}
header nav {
color:white;
}
header nav ul {
list-style:none;
margin:0;
padding:0;
}
header nav ul li {
margin:0;
padding: 0;
float: left;
width:200px;
height:40px;
background-color: rgb(187,199,124);
line-height: 40px;
text-align: center;
}
header nav ul li a {
display: block;
text-decoration: none;
color:white;
}
header nav ul li a:hover {
background-color: rgb(163,175,75);
opacity: 0.5;
}
header nav ul li ul li {
display: none;
}
header nav ul li:hover ul li {
display: block;
}
.fit-picture {
max-width: 12%;
}
#rectangle {
width:1000px;
height:900px;
background:rgb(187,199,124);
border-radius: 500px;
transform:translateX(-250px);
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li><a><img class="fit-picture" src="menu-icon.png" alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>
You can use transform:translateX to achieve this
header {
font-family: Arial;
}
header nav{
color:white;
}
header nav ul{
list-style:none;
margin:0;
padding:0;
}
header nav ul li{
margin:0;
padding: 0;
float: left;
width:200px;
height:40px;
background-color: rgb(187,199,124);
line-height: 40px;
text-align: center;
}
header nav ul li a{
display: block;
text-decoration: none;
color:white;
}
header nav ul li a:hover{
background-color: rgb(163,175,75);
opacity: 0.5;
}
header nav ul li ul li{
display: none;
}
header nav ul li:hover ul li{
display: block;
}
.fit-picture{
max-width: 12%;
z-index:1;
}
#rectangle{
width:500px;
height:400px;
background:rgb(187,199,124);
border-radius: 500px;
transform:translateX(-250px);
z-index:-111;
}
<html>
<head>
<title>Accueil - Gite Naille</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<nav>
<ul>
<li><a><img class="fit-picture"
src="menu-icon.png"
alt="Menu">ACCUEIL</a>
<ul>
<li>ACCUEIL</li>
<li><a>CABANES</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>ACTIVITÉS</a></li>
<li><a>TARIFS</a></li>
<li><a>CONTACT</a></li>
<li><a>RÉGLEMENTAIRE</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<body>
<div id="rectangle"></div>
</body>
</html>```
I am currently working on a project for college and my nav bar is giving me issues, I have tried various ways to resolve the issue by doing some research.
The site is very basic as it is just a template at the moment.
My main goal for the nav bar was to centre it on the main background image and allow the "Rooms" tab to drop down.
nav {
background-color: transparent;
}
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Beachview - Home</title>
<meta name="author" content="Your Name">
<meta name="description" content="Example description">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/x-icon" href="" />
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Spartan&display=swap" rel="stylesheet">
</head>
<body>
<div class="bg-img">
<div class="container">
<nav>
<ul>
<li>ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
</div>
<main>Main stuff goes here</main>
</body>
</html>
Not 100% sure if the above makes sense as the background image will not load.
Add a .dropdown class to your li containing the dropdown ul.
<li class="dropdown">ROOMS
<ul>...</ul>
</li>
Add these styles to align your dropdown below the "Rooms" link:
.dropdown {
/* Make it so you can position the child ul with absolute position
/ relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
Apply display: flex to your .bg-img container, and then adding margin: auto; to the child-element nav will center it vertically and horizontally.
.bg-img {
background-image: url('https://via.placeholder.com/900x200/000/333'); // Replace with your image
height: 200px; // Sample height
width: 100%; // Sample width
display: flex; // Flex allows for easy centering of child-elements
}
nav {
background-color: transparent;
margin:auto; // this is the key to the centered alignment
}
I also moved your class="container" from the wrapper div to your nav and removed that div.
Here is the full working code. (Click "Run Code Snippet, then hit "Full Page" on the right-hand side to see it working):
.bg-img {
/* Replace this img url with your image */
background-image: url('https://via.placeholder.com/900x200/000/333');
height: 200px; /* Sample height */
width: 100%; /* Sample width */
display: flex; /* Flex allows for easy centering of child-elements with margin:auto */
}
nav {
background-color: transparent;
margin:auto;
}
.dropdown {
/* Make it so you can position the child ul with absolute position
relative to this parent */
position:relative;
}
.dropdown ul {
position:absolute;
left:0;
top:2.5em;
}
/* None of the below code was modified */
nav a {
color: #F2E2C4;
text-align: center;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-weight: bold;
display: inline-block;
text-decoration: none;
position: relative;
font-family: 'Spartan';
}
nav ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
nav a.beachview {
float: left;
color: #F2E2C4;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 45px;
padding-top: 2px;
font-family: 'Spartan';
}
nav a:hover {
background-color: none;
color: #8C8474;
}
nav ul ul {
display: none;
position: absolute;
}
nav ul li:hover ul {
display: inline-block;
}
nav ul ul li {
float: none;
}
nav li {
float: left;
}
<body>
<div class="bg-img">
<!-- this is where the old <div class="container"> was -->
<nav class="container">
<ul>
<li class="dropdown">ROOMS
<ul>
<li>GLASGOW</li>
<li>EDINBURGH</li>
<li>ABERDEEN</li>
<li>DUNDEE</li>
</ul>
</li>
<li>GALLERY</li>
<li><a class="beachview" href="#">BEACHVIEW</a></li>
<li>LOCAL</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<main>Main stuff goes here</main>
</body>
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'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>