When I hover over the brass section of my navigation menu, I want to be able to hover over each item within and have a background color individually instead of all together. My problem is when I hover over the brass section that the entire block has a background color outright instead of going through one part at a time.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper {
display: flex;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-angle-double-right"></i>Brass
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li><i class="fas fa-angle-double-right"></i>Woodwind</li>
<li><i class="fas fa-angle-double-right"></i>Percussion</li>
<li><i class="fas fa-angle-double-right"></i>Additional Equipment</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
It appears your main issue was failing to close your <li> on the "Brass" line. I also noticed a few other minor errors in your formatting. HTML is very dependent on proper formatting, so please make sure you do this in the future. I would recommend using an widget on your IDE editor to allow auto formatting.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper {
display: flex;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
.wrapper .sidebar ul.sub-menu li a:hover {
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li>
<i class="fas fa-angle-double-right"></i>Brass
<ul class="sub-menu">
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li><i class="fas fa-angle-double-right"></i>Woodwind</li>
<li><i class="fas fa-angle-double-right"></i>Percussion</li>
<li><i class="fas fa-angle-double-right"></i>Additional Equipment</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
<div class="main">
</div>
</div>
</body>
</html>
You can set hover to your anchor | a element:
.wrapper .sidebar ul li > a {
display: block;
padding: 15px;
}
.wrapper .sidebar ul li a .fas {
width: 25px;
}
.wrapper .sidebar ul li:hover > a {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover > a {
color: #fff;
}
Related
In my navigation section I have sections for Home, Brass, Woodwind, Percussion, Additional Equipment, Maintenance. The Brass, Woodwind, and Percussion sections are supposed to dropdown to reveal pages that belong to those sections, but I'm having trouble making that happen. I've tried the following code to make it work, but it isn't working.
.wrapper .sidebar ul li ul {
display: none;
position: relative;
}
.wrapper .sidebar ul li:hover ul {
display: block;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
.wrapper .sidebar ul li:hover {
background-color: #B1B6B6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-angle-double-right"></i>Brass</li>
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
<li><i class="fas fa-angle-double-right"></i>Woodwind</li>
<li><i class="fas fa-angle-double-right"></i>Percussion</li>
<li><i class="fas fa-angle-double-right"></i>Additional Materials</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
</div>
</body>
</html>
did you try this?
[I just suggest using a class or ID]
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979c9c;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper .sidebar ul li ul {
display: none;
position: relative;
left: auto;
right: 35%;
}
.wrapper .sidebar ul li:hover {
background-color: #b1b6b6;
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
.wrapper .sidebar ul ul {
display: none;
position: relative;
}
.wrapper .sidebar ul:hover ul {
display: block;
}
</style>
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li>
<i class="fas fa-home"></i>Home
</li>
<li>
<i class="fas fa-angle-double-right"></i>Brass
</li>
<ul>
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
<li>
<i class="fas fa-angle-double-right"></i>Woodwind
</li>
<li>
<i class="fas fa-angle-double-right"></i>Percussion
</li>
<li>
<i class="fas fa-angle-double-right"></i>Additional Materials
</li>
<li>
<i class="fas fa-toolbox"></i>Maintenance
</li>
</ul>
</div>
</div>
</body>
</html>
The first problem was that your li for Brass was not properly closed. It did not wrap the child elements properly.
Then I made a little adjustment to the CSS and HTML. I added a class, .hidden-child, to the child li(s). This should make sure, your hover doesn't trigger the display of every child ul of all the menu items, to open when you hover over one menu item.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: Calibri, Helvetica, Arial, Sans-Serif;
}
body {
background-color: #348899;
}
.wrapper .sidebar {
position: fixed;
width: 160px;
height: 100%;
background-color: #979C9C;
color: #343642;
padding: 20px 0;
}
.wrapper .sidebar h2 {
text-align: center;
margin-bottom: 20px;
}
.wrapper .sidebar ul li {
padding: 15px;
}
.wrapper > .sidebar > ul > li .hidden-child {
display: none;
}
.wrapper .sidebar ul li:hover .hidden-child {
/* background-color: #B1B6B6; */
display: block
}
.wrapper .sidebar ul li:hover a {
color: #fff;
}
.wrapper .sidebar ul li a .fas {
width: 20px;
}
.sidebar a {
text-decoration: none;
color: #343642;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="project.css">
<meta charset="utf-8" />
<title>Beginning Band Players - Home</title>
<script src="https://kit.fontawesome.com/b698fbb6d0.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="sidebar">
<h2>
Navigation
</h2>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li menuit><i class="fas fa-angle-double-right"></i>Brass
<ul class="hidden-child">
<li>Trumpet</li>
<li>Horn</li>
<li>Trombone</li>
<li>Euphonium</li>
<li>Tuba</li>
</ul>
</li>
<li><i class="fas fa-angle-double-right"></i>Woodwind</li>
<li><i class="fas fa-angle-double-right"></i>Percussion</li>
<li><i class="fas fa-angle-double-right"></i>Additional Materials</li>
<li><i class="fas fa-toolbox"></i>Maintenance</li>
</ul>
</div>
</div>
</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'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>
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/