i'm just a beginner in html and css. I'm currently working on my activity which I have added navigation bar to it that I got from a tutorial. My problem is the link inside the dropdown isn't working. This is my code:
HTML code
<!DOCTYPE html>
<html>
<head>
<title> CWP - 111 HW1</title>
<link href = "style.css" rel = "stylesheet">
</head>
<body>
<div id="container">
<header><image src = "ue.jpg" style = "width: 1300px; height: 200px" > </header>
<nav class= "nav-main">
<ul>
<li class = "dropdown">Home</li>
<li>Assignments
<div class = "content">
<div class = "content-sub">
<ul>
<li>test 1</li><!doesn work>
<li>test 2</li><!doesn work>
</ul>
</div>
</div>
</li>
<li>Activities
<div class = "content">
<div class = "content-sub">
<ul>
<!Link testing>
<li>test 3</li><!doesn work>
<li>test 4</li><!doesn't work>
</ul>
</div>
</div>
</li>
<li class = "dropdown">About</li>
</ul>
</nav>
CSS
#container {
margin: auto;
width: 1300px;
}
header,nav,div,footer{
display: block;
}
.nav-main{
width: 100%;
background-color: #660000;
padding: 0px;
margin-top: 10px;
height: 70px;
}
.nav-main > ul{
margin: 0;
padding: 0;
float: left;
list-style-type: none;
}
.nav-main > ul > li{
float: left;
}
.dropdown{
display: inline-block;
padding: 15px 20px ;
height: 40px;
line-height: 40px;
color: white;
text-decoration: none;
}
.dropdown:hover{
background-color: #A80000;
}
.content{
position: absolute;
max-height: 0px;
overflow: hidden;
background-color: #660000;
}
.content a{
color: white;
text-decoration: none;
}
.content a:hover{
text-decoration: underline;
}
.content-sub{
padding: 20px;
}
.content-sub ul{
padding: 0px;
margin: 0px;
list-style-type: none;
}
.content-sub ul li a{
padding: 5px 0px;
display: inline-block;
}
.dropdown:focus{
background-color: #A80000;
}
.dropdown:focus ~ .content{
max-height: 400px;
-webkit-transition: max-height 0.4s ease-in;
-moz-transition: max-height 0.4s ease-in;
transition: max-height 0.4s ease-in;
}
body{
background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
}
.section{
background-image: url("years.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: white;
padding: 10px 10px 10px 10px;
margin: 10px;
overflow: auto;
}
footer{
background-color: black;
padding: 5px;
margin-top: 10px;
}
h1{
text-align: center;
color: White;
}
.divide2{
background-color: #11233b;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
padding: 5px;
width: 600px;
}
.lyrics{
background-image: url("years1.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: white;
text-align: left;
margin: 10px 10px 10px 10px;
padding: 10px 10px;
white-space: nowrap;
}
p{
color: white;
}
#title{
color: White;
}
JSfiddle
https://jsfiddle.net/smurf16/x74Lobgt/
Try this. Plz change the code as follows
.content-sub {
/*padding: 20px;*/
}
.content{
position: absolute;
/*max-height: 0px;
overflow: hidden;*/
background-color: #660000;
}
ul li .content ul{
min-width: 125px;
display: none;
position: absolute;
z-index: 999;
left: 0;
}
ul li:hover .content ul{
display: block;
}
ul li .content ul li{
display: block;
background: #660000;
}
ul li .content ul li a{
padding: 10px;
width: 100px;
}
ul li .content ul li a:hover{
background: #A80000;
text-decoration: none;
}
Demo Link jsfiddle
Related
I am new to HTML and CSS and was trying to make a random website about astronomy. And I can't figure out what my dropdown menu is not working. I googled a lot and saw many youtube videos, but still cannot find a solution. When I change the display in sub-menu in CSS to block, it shows the submenus but in a horizondal line. Should I rewrite the whole code or is it editable? I am new HTML and CSS so excuse my mistakes and lack of knowledge. Thanks.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets</li>
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
It's because you have to place your submenu inside the parent <li>.
Here's a working live Codepen.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</li>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
Let me know in the comment if you need a help styling the dropdown menu.
I'm having trouble writing a code for a simple drop down menu but cant understand what I'm doing wrong still new to coding. Whenever I bring my cursor over the respective dropdown li tag the hover color effect is there but nothing comes down. In a previous attempt when the code was a a little different the list id appeared but it was in an inline manner and was align horizontally not vertically plz help.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li id="main">Home</li>
<li id="main">Products</li>
<li id="main">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
First of all, you have id="main" applied to multiple elements. id is meant to be unique and applied to only one element.
Second, your hover effect was just a little incomplete. See my changes below.
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
/*overflow: hidden; don't do this if you want dropdowns */
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
#nav>li>a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
#nav>li>a:hover {
background-color: #d3d3d3;
color: black;
}
#nav>li {
position: relative;
display: inline-block;
}
#nav>li ul {
display: none;
position: absolute;
}
#nav>li:hover ul {
display: block;
bottom: -80px;
padding: 10px;
left: 0;
min-width: 100px;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li>Home</li>
<li>Products</li>
<li>More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li>About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
you need to target ul li ul which you will show and hide ... and #main id can not be duplicate on the same page.. working example as below
#navbar {
background-color: #9C9C9C;
margin: 0px 200px 0px 200px;
height: 30px;
overflow: hidden;
}
#nav {
padding: 0px;
margin: 0px;
font-family: arial;
}
#main {
display: inline;
}
a {
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover {
background-color: #d3d3d3;
color: black;
}
ul li{display: inherit;}
ul li ul {
display: none;
width: auto;
position: absolute;
top: 35px;
background: #ccc;
margin: 0;
padding: 0;
}
ul li ul li{display:block; list-style-type:none}
ul li:hover ul {
display: block;
z-index:1000;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
<div id="navbar">
<div>
<ul id="nav">
<li class="nestedchild">More
<ul class="c">
<li class="B"><a id="A">Article1</a></li>
<li class="B"><a id="A">Article2</a></li>
<li class="B"><a id="A">Article3</a></li>
<li class="B"><a id="A">Article4</a></li>
</ul>
</li>
<li id="main">About US</li>
</ul>
</div>
<div id="searchbar"><input type="text" name="search" /><button id="button">GO</button></div>
</div>
Your css should be like that.
.first .link {
color: black;
transform: rotate(-90deg);
width: auto;
border-bottom: 2px solid #FFFFFF;
position: relative;
top: 0vh;
}
.first {
background: green;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.menu {
background-color:red;
}
.bottom-line {
border-bottom:5px solid pink;
}
#navbar{
background-color: #9C9C9C;
margin: 0 auto;
padding: 30px 0;
width: 1200px;
}
#nav{
padding: 0px;
margin: 0px;
font-family: arial;
float: left;
list-style: none;
}
#main{
display: inline;
}
a{
display: block;
text-align: center;
float: left;
width: 100px;
padding: 3px;
line-height: 25px;
text-decoration: none;
color: white;
margin-top: 0px;
}
a:hover{
background-color: #d3d3d3;
color: black;
}
ul li {
float: left;
position: relative;
}
ul li ul {
display: none;
position: absolute;
list-style: none;
top: 32px;
z-index: 5;
background-color: #ddd;
padding-left: 0;
}
ul li:hover ul {
display: block;
}
#searchbar {
margin: 5px 5px 0px 0px;
float: right;
}
and You can also see demo here
How can i make custom pills for navbar like on
screenshot?
I did it by myself, but pills are inside of navbar and the text is not in the center of pill.
I understand, that the problem is inside of .menu li a:hover:not and .menu li a:hover:not(.active). But i don't know, how to make outside of navbar(i mean borders of the pills like on screenshot)
.menu {
padding-top: 10px;
padding-bottom: 10px;
font-size: 20px;
margin-left: auto;
margin-right: auto;
}
.menu ul {
margin: 0 auto;
padding: 0px;
overflow: hidden;
display: block;
list-style:none;
border-radius: 20px 0 0 0;
background-color: #0b78ad;
text-align: center;
}
.menu li {
list-style-type: none;
text-align: center;
display: inline-block;
}
.menu ul li a {
padding: 10px;
padding-left: 50px;
margin: 0px;
display: block;
text-align: center;
}
.menu li a:hover:not(.active) {
color: #325491;
}
.menu li.active a {
border-radius: 20px 0 20px 0;
border-style: solid;
border-width: 2px;
border-color: #325491;
color: #325491;
background-color: white;
}
<div class="menu">
<ul>
<li class="active">startseite</li>
<li>über uns</li>
<li>zell-linien</li>
<li>downloads</li>
<li>kontakt</li>
</ul>
</div>
.menu {
font-family: Arial, sans-serif;
}
.menu ul {
padding: 0;
list-style: none;
background-color: #0b78ad;
text-align: center;
white-space: nowrap;
height: 34px;
margin: 30px 0;
}
.menu li {
position: relative;
top: -10px;
list-style-type: none;
text-align: center;
display: inline-block;
margin: 0 10px;
}
.menu ul li a {
position: relative;
display: block;
padding: 18px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border: 2px solid transparent;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #FFF;
font-weight: 700;
line-height: 1;
transition: all .1s ease-in-out;
}
.menu ul li a.active,
.menu ul li a:hover {
background-color: #FFF;
border: 2px solid #0b78ad;
color: #0b78ad;
}
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skill</li>
<li>Contact</li>
</ul>
</div>
You can do it with just a plain border-radius, like any other property it starts with top, right, bottom and right
.button {
display: inline-block;
background-color: #ededed;
border: 1px solid deepskyblue;
border-radius: 10px 0 10px 0;
padding: 10px 16px;
text-align: center;
}
<div class="button">shape</div>
You can do like this.
1. Navbar you can give a 'max-height' property so that we can set a height for the first-child.
#nav-id {
max-height: 65px;
margin-top: 20px;
}
2.We can set the first 'li' 'margin-top' or 'position'
li:first-child {
border-radius: 15px 50px;
padding: 20px;
width: 200px;
height: 106px;
background: blue;
background-position: center;
margin-top:-20px;
z-index:1;
text-align:center;
}
Here is the working copy:
https://codepen.io/nabanitadasgupta/pen/aLNGgo
So I'm trying to understand why when I specify the width for my .thenav class it is not expanding to the entire width of the page.
I UNDERSTAND that it is taking the characteristics of the .container class, but I don't understand why and what is the solution seeing that i specified the width? PLEASE HELP!
Here is my picture of what's happening (I attached an image of what's happening because the jsfiddle makes the div appear at 100% and it's not):
http://imgur.com/a/zsBqC
Here is my jsfiddle:
https://jsfiddle.net/CheckLife/yox7Ln1b/3/
Here's the code for reference:
HTML:
<div class="header">
<div class="container">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com"/>Home</a></li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()"></li>
<li><a href="#kobesec"/>Kobe</a></li>
<li><a href="#"/>Kevin Durant</a></li>
<li><a href="#"/>The Goat</a></li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header, nav, section, aside, footer, article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background:linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1{
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display:inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li{
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align:left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759 ;
}
.thenav li ul li a:hover{
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul{
position:absolute;
}
.thenav li:hover ul{
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top:2px;
color: white;
}
input[type=text], input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
}
A child div that does not have absolute positioning and has a width of 100% (unnecessary if it's display is the default of block) will be set to it's containers width. Your div.container has a width setting of 1300px and it is the parent element of div.thenav, therefore div.thenav's width will also be 1300px.
You can either remove width on the container:
.container {
margin: 0px auto;
background-size: cover;
/*width: 1300px; remove this */
height: 100%;
}
or:
Move div.thenav outside of div.container as in this code:
(https://jsfiddle.net/nod19rze/)
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<!-- contents of thenav here -->
</div>
<div class="container">
</div>
</div>
Either the container should be the first wrapper and then comes the header, which could solve the issue. I am not sure if this is what u need. Please check this fiddle:
https://jsfiddle.net/estgLn1q/1/
<div class="container">
<div class="header">
</div>
</div>
Or if you want to maintain the same html structure, then remove width:1300px from '.container' which will cause the container to take the same width as of its parent.
I would just move #box and .thenav out of .container and start that class after those elements.
* {
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
header,
nav,
section,
aside,
footer,
article {
display: block;
}
body {
background-image: url(backwood.png);
width: 100%;
margin: auto;
}
.container {
margin: 0px auto;
background-size: cover;
width: 1300px;
height: 100%;
}
.header {
background: linear-gradient(to right, #5092f4, #f29641);
margin-top: 0px;
width: 100%;
}
.header h1 {
text-align: center;
width: 100%;
padding-bottom: 15px;
font-family: Arial, Helvetica, sans-serif;
color: #f4ca1f;
}
.tmacw {
display: inline;
position: relative;
padding: 0px;
top: 5px;
}
.nba {
margin-right: 10px;
}
.thenav {
background-color: #7886a3;
width: 100%;
height: 85px;
position: relative;
z-index: 1;
}
/* Style for the Nav Bar */
.thenav ul {
padding: 0;
margin: 0;
}
.thenav ul li {
float: left;
width: 90px;
text-align: center;
border-right: 1px groove #141e38;
position: relative;
}
.thenav ul li a {
display: block;
color: white;
font-weight: bold;
padding: 33px 10px;
}
.thenav ul li a:hover {
background-color: #47e586;
transition: all 0.90s;
}
/*Dropdown Nav */
.thenav li ul li {
background-color: #7886a3;
border: 2px groove grey;
border-radius: 4px;
position: relative;
}
.thenav li ul li a {
padding: 8px;
text-align: left;
}
.thenav li ul li:nth-child(1) a:hover {
background-color: #F47575;
}
.thenav li ul li:nth-child(2) a:hover {
background-color: #f7d759;
}
.thenav li ul li a:hover {
background-color: red;
}
.thenav ul li ul {
display: none;
}
.thenav li:hover ul {
position: absolute;
}
.thenav li:hover ul {
display: block;
}
/* End of Dropdown */
.userlogin {
font-size: 12px;
top: 2px;
color: white;
}
input[type=text],
input[type=password] {
font-weight: bold;
margin: 0;
font-size: 8px;
height: 10px;
padding: 3px 5px 3px 5px;
color: 162354;
}
/* Stats Button */
.stat input[type=button] {
background-color: #6cd171;
color: blue;
border-radius: 6px;
font-weight: bold;
border: none;
float: left;
margin-top: 20px;
margin-left: 20px;
padding: 2px 2px;
font-family: Verdana, Geneva, sans-serif;
}
.log[type=button] {
background-color: white;
color: #008cff;
border-radius: 4px;
font-weight: bold;
border: none;
padding: 1px 2px 2px 2px;
position: relative;
left: 5px;
top: 3px;
<div class="header">
<h1 id="box" onload="changed()"><image src="nbaone.png" width="40px" height="55px" class="nba">NBA Legends</h1>
<div class="thenav" onload="changed()">
<ul>
<li><a href="http://www.nba.com" />Home</a>
</li>
<li onclick="changeP()">About</li>
<li>Players
<ul>
<li onmouseover="slow()">
</li>
<li><a href="#kobesec" />Kobe</a>
</li>
<li><a href="#" />Kevin Durant</a>
</li>
<li><a href="#" />The Goat</a>
</li>
</ul>
</li>
<li onclick="slow()">News</li>
</ul>
</div>
<div class="container">
</div>
</div>
So my problem is that I can't get my navigation links focused. When you try to click the link the it doesn't stay focused so the dropdown box only gets displayed for a second.
This is the navigation I am trying to do.
*{
margin: 0px;
padding: 0px;
list-style-type: none;}
header,nav,article,section,footer,aside {
display: block;}
#container {
width: 100%;
margin: 0px auto;}
.nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;}
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height:40px;}
.nav-main > ul {
float: left;}
.nav-main > ul > li {
float: left;}
.nav-item:hover {
background-color: #444;}
.nav-item {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 15px;
height: 40px;
line-height: 40px;}
.sub-link {
text-decoration: none;
color: #fff;}
.nav-content {
position: absolute;
background-color: #444;
height: 200px;
max-height: 0px;
overflow: hidden;}
.nav-content-sub {
padding: 20px;}
.nav-content a:hover {
text-decoration: underline;}
.sub-link {
display: inline-block;
padding: 15px;
line-height: 10px;}
.nav-item:focus {
background-color: #444;}
.nav-item:focus ~ .nav-content {
max-height: 200px;}
<nav class="nav-main">
<div class="logo">Website</div>
<ul>
<li>
News
<div class="nav-content">
<div class="nav-content-sub">
<ul>
<li>Safsafasf</li>
<li>Safsasagsagasg</li>
<li>Qgagsag</li>
<li><a href="" class="sub-link">wKgagsagsagsgsagsaga<a></li>
</ul>
</div>
</div>
</li>
You forgot to give the News a direction (link to a website or page). If you don't want the news item link to a page use "#" instead of "" like so News
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0px;
padding: 0px;
list-style-type: none;}
header,nav,article,section,footer,aside {
display: block;}
#container {
width: 100%;
margin: 0px auto;}
.nav-main {
width: 100%;
background-color: #222;
height: 70px;
color: #fff;}
.logo {
float: left;
height: 40px;
padding: 15px 30px;
font-size: 1.4em;
line-height:40px;}
.nav-main > ul {
float: left;}
.nav-main > ul > li {
float: left;}
.nav-item:hover {
background-color: #444;}
.nav-item {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 15px;
height: 40px;
line-height: 40px;}
.sub-link {
text-decoration: none;
color: #fff;}
.nav-content {
position: absolute;
background-color: #444;
height: 200px;
max-height: 0px;
overflow: hidden;}
.nav-content-sub {
padding: 20px;}
.nav-content a:hover {
text-decoration: underline;}
.sub-link {
display: inline-block;
padding: 15px;
line-height: 10px;}
.nav-item:focus {
background-color: #444;}
.nav-item:focus ~ .nav-content {
max-height: 200px;}
</style>
</head>
<body>
<nav class="nav-main">
<div class="logo">Website</div>
<ul>
<li>
News
<div class="nav-content">
<div class="nav-content-sub">
<ul>
<li>Safsafasf</li>
<li>Safsasagsagasg</li>
<li>Qgagsag</li>
<li><a href="" class="sub-link">wKgagsagsagsgsagsaga<a></li>
</ul>
</div>
</div>
</li>
</nav>
</body>
</html>