When I hover "company" my navigation bar is not responding (it should have show sub-menu when it's hovered), can somebody please help me out?
I tried many things but it just doesn't work.
So that's why I am asking for your help.
HTML CODE:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bobo Web</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topbar">
<i class="fa fa-phone"></i>
<p> Whatsapp: +86-15381188302 </p>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p> Beogard Serbija, 500000</p>
<div class="icone">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
</div>
<nav>
<img src="img/logo.png">
<input type="search" placeholder="Search ...">
<ul>
<li>home</li>
<li>company <span class="chevron bottom"></span></li>
<div class="sub-menu-1"> //This submenu doesn't show when it's hovered
<ul>
<li>News</li>
<li>About us</li>
<li>Certificate</li>
<li>R & D Teams</li>
<li>Inovation</li>
</ul>
</div>
<li>products <span class="chevron bottom"></span></li>
<li>knowledge <span class="chevron bottom"></span></li>
<li>online store <span class="chevron bottom"></span></li>
<li>contact us</li>
</ul>
</nav>
<img src="img/pozadina.png">
<p id="p1"> About our compnay</p>
</body>
</html>
CSS code:
*{
margin: 0px;
padding: 0px;
}
.topbar{
background-color: #1fa9e5;
height: 100%;
width: 100%;
display: block;
box-sizing: content-box;
}
.top-bar * {
font-size: inherit;
line-height: inherit;
}
.topbar p{
display: inline-block;
margin-right: 30px;
color: white;
padding: 8px 0;
}
.fa-phone, .fa-map-marker, .fa-facebook-square,.fa-twitter-square,.fa-youtube-square{
color: white;
}
.icone{
float: right;
margin-right: 10px;
}
.icone i{
padding-top : 6px;
padding-left: 10px;
}
nav{
width: 100%;
height: 95px;
}
nav ul{
text-align: center;
}
nav ul li{
display: inline-block;
padding: 40px 40px;
}
nav ul li a{
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
font-weight: bold;
color: black;
}
nav ul li:hover{
background: #e0f8f6;
}
nav img{
position: absolute;
height: 70px;
padding-left: 20px;
padding-top: 10px;
}
.chevron {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
top: 0;
transform: rotate(135deg);
}
#p1{
text-transform: uppercase;
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 80px;
}
nav input{
float: right;
padding: 6px;
margin-top: 30px;
margin-right: 16px;
border: none;
font-size: 17px;
background: #f4f4f4;
}
.sub-menu-1{
display: none;
}
.nav ul li:hover .sub-menu-1{ //Not working at all
display: block;
position:absolute;
background: yellow;
margin-top: 15px;
margin-left: -15px;
}
Your selector line for current HTML should be:
nav ul li:hover + .sub-menu-1 { /*Not working at all*/
Problems:
<nav> doesn't have a class of nav, so it should be nav instead of .nav
.sub-menu-1 is a sibling, not a child so you should use +( Adjacent sibling combinator)
// is not valid CSS comment syntax, it can break compilation of that line
.sub-menu-1 is a <div> which is direct child of <ul>, this is invalid HTML, it should be an <li> or within an <li>
*{
margin: 0px;
padding: 0px;
}
.topbar{
background-color: #1fa9e5;
height: 100%;
width: 100%;
display: block;
box-sizing: content-box;
}
.top-bar * {
font-size: inherit;
line-height: inherit;
}
.topbar p{
display: inline-block;
margin-right: 30px;
color: white;
padding: 8px 0;
}
.fa-phone, .fa-map-marker, .fa-facebook-square,.fa-twitter-square,.fa-youtube-square{
color: white;
}
.icone{
float: right;
margin-right: 10px;
}
.icone i{
padding-top : 6px;
padding-left: 10px;
}
nav{
width: 100%;
height: 95px;
}
nav ul{
text-align: center;
}
nav ul li{
display: inline-block;
padding: 40px 40px;
}
nav ul li a{
text-transform: uppercase;
font-size: 16px;
text-decoration: none;
font-weight: bold;
color: black;
}
nav ul li:hover{
background: #e0f8f6;
}
nav img{
position: absolute;
height: 70px;
padding-left: 20px;
padding-top: 10px;
}
.chevron {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.45em;
left: 0.15em;
position: relative;
top: 0.15em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.45em;
top: 0;
transform: rotate(135deg);
}
#p1{
text-transform: uppercase;
font-size: 42px;
font-weight: bold;
text-align: center;
padding-top: 80px;
}
nav input{
float: right;
padding: 6px;
margin-top: 30px;
margin-right: 16px;
border: none;
font-size: 17px;
background: #f4f4f4;
}
.sub-menu-1{
display: none;
}
nav ul li:hover + .sub-menu-1 { /*Not working at all*/
display: block;
background: yellow;
margin-top: 15px;
margin-left: -15px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Bobo Web</title>
<link rel="icon" href="img/logo.png">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topbar">
<i class="fa fa-phone"></i>
<p> Whatsapp: +86-15381188302 </p>
<i class="fa fa-map-marker" aria-hidden="true"></i>
<p> Beogard Serbija, 500000</p>
<div class="icone">
<i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i>
<i class="fa fa-youtube-square" aria-hidden="true"></i>
</div>
</div>
<nav>
<img src="img/logo.png">
<input type="search" placeholder="Search ...">
<ul>
<li>home</li>
<li class="parent">company <span class="chevron bottom"></span></li>
<li class="sub-menu-1"> //This submenu doesn't show when it's hovered
<ul>
<li>News</li>
<li>About us</li>
<li>Certificate</li>
<li>R & D Teams</li>
<li>Inovation</li>
</ul>
</li>
<li>products <span class="chevron bottom"></span></li>
<li>knowledge <span class="chevron bottom"></span></li>
<li>online store <span class="chevron bottom"></span></li>
<li>contact us</li>
</ul>
</nav>
<img src="img/pozadina.png">
<p id="p1"> About our compnay</p>
</body>
</html>
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>
Can somebody tell me, how can I fix the drop-down menu? after taking cursor, the drop-down items are not visible if I put an image in a different section but drop-down is visible if I don't put any image. But I need to put the image. please tell me what I did wrong.
here is my HTML code=
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<header>
<div class="menu-bar">
<nav>
<ul>
<li><i class="fa fa-home"></i><span class="data-hover"data-hover="home"> Home</span></li>
<li><span class="data-hover" data-hover="Shortcodes"><i class="fa fa-file-text-o"></i> About</span>
<ul>
<li>D1</li>
<li>D2</li>
</ul>
</li>
<li><i class="fa fa-briefcase" aria-hidden="true"></i> Our work</span>
<ul>
<li>D3</li>
<li><a href="#">D4/a></li>
</ul>
</li>
<li><span class="data-hover" data-hover="Portfolio"><i class="fa fa-users" aria-hidden="true"></i> Galary</span>
<ul>
<li>D5</li>
<li>D6</li>
</ul>
</li>
<li> <span class="data-hover" data-hover="contact"><i class="fa fa-phone" aria-hidden="true"></i> Contact</span></li>
</ul>
</nav>
</div>
</header>
<section>
<div class="page_head">
<div class="contained">
<h1>XXXXXXXX</h1>
</div>
</div>
</section> </body> </html>
and here is CSS code
.menu-bar{
background: #2c97e4;
}
nav{
height: 40px;
width: 960px;
display: block;
margin-left: 250px;
}
nav li a{
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color:white;
text-align: center;
text-transform: capitalize;
overflow: visible;
}
nav a:hover{
background: red;
color:white;
text-decoration: none;
}
nav ul{
list-style: none;
}
nav ul li{
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background: #2c97e4;
overflow-y: visible;
margin-right: 30px;
}
nav ul li ul li{
position: relative;
display: none;
right:50px;
}
nav ul li:hover ul li{
display: block;
width: 200px;
padding:1px;
position: relative;
animation: nacm 500ms forwards;
}
#keyframes nacm{
0%{
opacity: 0;
top:5px;
}
100%{
opacity: 1;
top:0;
}
}
.contained{
width:90%;
margin:auto;
overflow:hidden;
}
.page_head{
background: url(c-1.jpg);
background-size:cover;
background-position:center;
height:100%;
width:100%;
padding-bottom:2%;
position:relative;
z-index:99;
padding-top:110px;
padding-bottom:82px;
}
.page_head .contained h1{
font-size:50px;
color:#FF4500;
float: left;
text-decoration: none;
text-underline-position:under;
text-decoration-color: #FF4500;
letter-spacing:3px;
}
This work for me:
.menu-bar {
background: #2c97e4;
}
nav {
height: 40px;
width: 960px;
display: block;
margin-left: 250px;
}
nav li a {
display: block;
text-decoration: none;
font-size: 16px;
font-weight: bold;
color: white;
text-align: center;
text-transform: capitalize;
overflow: visible;
}
nav a:hover {
background: red;
color: white;
text-decoration: none;
}
nav ul {
list-style: none;
}
nav ul li {
float: left;
width: 150px;
height: 40px;
line-height: 40px;
background: #2c97e4;
overflow-y: visible;
margin-right: 30px;
}
nav ul li ul li {
position: relative;
display: none;
right: 50px;
}
nav ul li:hover ul li {
display: block;
width: 200px;
padding: 1px;
position: relative;
animation: nacm 500ms forwards;
}
#keyframes nacm {
0% {
opacity: 0;
top: 5px;
}
100% {
opacity: 1;
top: 0;
}
}
.contained {
width: 90%;
margin: auto;
overflow: hidden;
}
.page_head {
background: url(c-1.jpg);
background-attachment: fixed;
height: 690px;
background-size: cover;
background-position: center;
width: 100%;
padding-bottom: 2%;
position: relative;
z-index: -1;
padding-top: 110px;
padding-bottom: 82px;
}
.page_head .contained h1 {
font-size: 50px;
color: #FF4500;
float: left;
text-decoration: none;
text-underline-position: under;
text-decoration-color: #FF4500;
letter-spacing: 3px;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<header>
<div class="menu-bar">
<nav>
<ul>
<li><i class="fa fa-home"></i><span class="data-hover"data-hover="home"> Home</span></li>
<li><span class="data-hover" data-hover="Shortcodes"><i class="fa fa-file-text-o"></i> About</span>
<ul>
<li>D1</li>
<li>D2</li>
</ul>
</li>
<li><span class="data-hover" data-hover="pages"><i class="fa fa-briefcase" aria-hidden="true"></i> Our work</span>
<ul>
<li>D3</li>
<li>D4</li>
</ul>
</li>
<li><span class="data-hover" data-hover="Portfolio"><i class="fa fa-users" aria-hidden="true"></i> Galary</span>
<ul>
<li>D5</li>
<li>D6</li>
</ul>
</li>
<li>
<span class="data-hover" data-hover="contact"><i class="fa fa-phone" aria-hidden="true"></i> Contact</span>
</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="page_head">
<div class="contained">
<h1>XXXXXXXX</h1>
</div>
</div>
</section>
</body>
</html>
I want to create a webpage like this.So far I have written a code in html and css like this but I cannot align the top nav bar above the nav-menu items?
HTML
<body>
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry#domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li>about us</li>
<li>services</li>
<li>news</li>
<li>request a quote</li>
<li>contact us</li>
<li>track your item</li>
</ul>
</div>
</body>
CSS
-------------------------------------------------------------------------------------------------------
.nav__nav-bar {
flex-direction: row;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
color: black;
font-weight: bold;
margin-top: -102px;
margin-left: 184px;
}
.nav__nav-bar li {
float: left;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color:black;
font-weight:bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background-color: yellow;
}
.top-bar__content{
display:inline-block;
}
.top-header {
border:2px solid black;
background-color: black;
}
.header {
background-color: #fff;
height: 80px;
width: 90%;
}
.logo {
padding: 17px;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}
.top-bar {
border: 2px solid red;
display: inline-grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
width: 76%;
margin-left: 280px;
height: 52px;
margin-top: -100px;
}
.top-bar-content{
display:inline;
}
The top-nav bar is not getting aligned at the top.I tried using flex but it does not work properly. Also the menu items are not aligned properly.Can anyone help me regarding this issue?
Codepen
<div class="top-header">
<div class="header">
<div class="logo">
<div class="logo-left">
<img src="images/logo.jpg" alt="logo-truck">
</div>
<div class="logo-right">
<h3>kuncham</h3>
<p>logistic service</p>
</div>
</div>
<div class="header-right">
<div class="top-bar">
<div class="top-bar__content">
<div class="top-bar-content">call:(007)123-456-7890</div>
<div class="top-bar-content">email:enquiry#domain.com</div>
<div class="top-bar-content">mon-sun:12pm to 12am</div>
<div class="top-bar-content">
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i></div>
</div>
</div>
<ul class="nav__nav-bar">
<li><a class="active" href="#home">Home</a></li>
<li>about us</li>
<li>services</li>
<li>news</li>
<li>request a quote</li>
<li>contact us</li>
<li>track your item</li>
</ul>
</div>
</div>
`.top-header {
border: 2px solid black;
background: black;
}
.header {
background: white;
height: 80px;
width: 100%;
display: flex;
}
.logo {
padding: 0 17px;
flex: 0 0 400px;
align-self: center;
}
.header-right {
flex: auto;
padding: 0 0 0 20px;
}
.top-bar {
background: #000000;
color: white;
padding: 8px 18px;
border-radius: 0 0 0 8px;
}
.nav__nav-bar {
margin: 0;
float: none;
list-style: none;
text-align: right;
display: flex;
padding: 0;
}
.top-bar__content {
display: flex;
}
.top-bar-content {
padding: 0 16px 0 0;
}
.nav__nav-bar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
font-weight: bold;
text-transform: uppercase;
}
.nav__nav-bar li a:hover {
background: yellow;
}
.logo .logo-left {
float: left;
font-size:50px;
color: darkorange;
padding-right: 5px;
}
.logo .logo-right h3 {
padding: 0;
margin: 0;
font-family: serif;
}
.logo .logo-right p {
line-height: 0;
}`
[https://codepen.io/kinjalpatel2207/pen/MWwapLz][1]
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
font-size: 10px;
color: #eee;
padding-top: 30px;
margin-left: 10px;
text-decoration: none;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
padding-top: 80px;
}
.leftSideNav2__lists ul {
list-style: none;
padding-bottom: 10px;
}
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i><br>
Home<br>
<i class="material-icons">pause</i><br>
YouTubers<br>
<i class="material-icons">assignment</i><br>
Campaigns<br>
<i class="material-icons">message</i><br>
Messages<br>
<i class="material-icons">pause</i><br>
Videos<br>
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Codepen
I have an issue with the anchor links and lists in the sidebars. I am unable to align the anchor links and lists in the 2 sidebars. I am trying to apply the CSS properties but they aren't applying perhaps due to improper hierarchical style of applying.
Currently, this is how it looks:
But this is how I want it to look:
you can do it setting the parent container
.leftSideNav1__lists{
text-align:center;
}
an also removing the left margin from each a tag..
codepen
body {
margin: 0px;
font-family: verdana, georgia;
overflow-x: hidden;
}
/*****************Blocks*********************/
.navbar {
background-color: #fff;
height: 90px;
width: 100%;
top:0px;
margin-left: 250px;
}
.topContent {
background-color: #eceff1;
height: 200px;
width:100%;
margin-left: 250px;
}
.mainContent {
background-color: #e5e5e5;
height: 800px;
width:800px;
margin-left: 250px;
}
.leftSideNav1 {
height: 100%;
width: 80px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #37474f;
}
.leftSideNav2 {
height: 100%;
width: 200px;
position: fixed;
z-index: 1;
top: 0;
left: 80px;
background-color: #263238;
text-decoration: none;
}
/*****************Elements*********************/
.leftSideNav1__lists a{
display: block;
text-align: center;
font-size: 10px;
color: #eee;
text-decoration: none;
margin-bottom: 20px;
}
.leftSideNav2 {
font-size: 12px;
}
.leftSideNav2 .leftSideNav2__lists > ul{
}
.leftSideNav2__lists ul {
list-style: none;
}
.leftSideNav1__lists > i{
display: block;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<div class="container">
<div class="navbar">
</div>
<div class="topContent">
</div>
<div class="mainContent">
</div>
<div class="leftSideNav1">
<div class="leftSideNav1__lists">
<!-- <i class="fa fa-home w3-large"></i> -->
<i class="Tiny material-icons">home</i>
Home
<i class="material-icons">pause</i>
YouTubers
<i class="material-icons">assignment</i>
Campaigns
<i class="material-icons">message</i>
Messages
<i class="material-icons">pause</i>
Videos
</div>
</div>
<div class="leftSideNav2">
<div class="leftSideNav2__lists">
<ul class="leftSideNav2__list1">Videos
<li>Action Required</li>
<li>Fund YouTuber</li>
<li>Hired & Funded</li>
<li>Edit Requested</li>
</ul>
<ul class="leftSideNav2__list2">Proposals
<li>New</li>
<li>Declined</li>
<li>Changes Required</li>
<li>Changes Declined</li>
</ul>
<ul class="leftSideNav2__list3">Approvals
<li>Waiting for Approval</li>
<li>Approved / Completed</li>
<li>Video in Dispute</li>
</ul>
</div>
</div>
</div>
</body>
Try this.