Hi so in this my explore more button and my ul list so whenever I move my explore button line height the ul and button both move together side..and I want the explore more button downward. what should I do?? I tried using other attributes but nothing worked. I am making this website for my dad's academy.
Here is my HTML code
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="row">
<div>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Study Visa
<ul>
<li>Australia</li>
<li>Canada</li>
<li>New Zealand</li>
</ul>
</li>
<li>Courses
<ul>
<li>Ielts</li>
<li>PTE</li>
<li>Spoken English</li>
</ul>
</li>
<li>Contact Us
</li>
<li> Login </li>
<li>Reviews</li>
</ul>
</div>
<div class="button">
Explore More
</div>
</div>
</header>
</header>
</body>
this is my CSS code
body {
background: url(abc.jpg) no-repeat;
background-size: none;
background-position : none;
background-size : cover;
margin-left: 20%;
}
.main-nav
{
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
position: absolute
top : 20px;
}
.main-nav li {
float: left;
width: 145px;
height: 67px;
background-color: black;
opacity: 0.8;
line-height: 67px;
text-align: center;
font-size: 22px;
margin-left : px;
}
.main-nav li a {
text-decoration: none;
color: white;
display: block;
line-height : 100 px ;
}
.main-nav li a:hover {
background-color: orange;
}
.main-nav li ul li{
display: none;
}
.main-nav li:hover ul li {
display: block;
}.button
{
margin-top: 350px;
margin-left: 320px;
}
.btn
{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 89px;
font-size: 13px;
text-transform: uppercase;
}
.btn-two
{
font-family: "Roboto", sans-serif;
}
.btn-two:hover
{
background-color: darkorange;
transition: all 0.5s ease-in;
}
so I want the menu above near k academy logo.. and explore more button where it is. thanks!!
I changed up your HTML structure since there were empty tags and random closing tags. CSS i basically just removed the float on the li, since that takes it out of the flow, and instead added flexbox to the ul. Hope that helps flexbox ftw. Idk how your button ended up in that location but I would use position: absolute on that top,right,bottom,left:0 margin: auto;
body {
background: url(abc.jpg) no-repeat;
background-size: none;
background-position: none;
background-size: cover;
}
.main-nav {
display: flex;
justify-content: space-between;
alig margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.main-nav li {
width: 145px;
height: 67px;
background-color: black;
opacity: 0.8;
line-height: 67px;
text-align: center;
font-size: 22px;
margin-left: px;
}
.main-nav li a {
text-decoration: none;
color: white;
display: block;
line-height: 100 px;
}
.main-nav li a:hover {
background-color: orange;
}
.main-nav li ul li {
display: none;
}
.main-nav li:hover ul li {
display: block;
}
.button {
margin-top: 350px;
margin-left: 320px;
}
.btn {
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 89px;
font-size: 13px;
text-transform: uppercase;
}
.btn-two {
font-family: "Roboto", sans-serif;
}
.btn-two:hover {
background-color: darkorange;
transition: all 0.5s ease-in;
}
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Study Visa
<ul>
<li>Australia</li>
<li>Canada</li>
<li>New Zealand</li>
</ul>
</li>
<li>Courses
<ul>
<li>Ielts</li>
<li>PTE</li>
<li>Spoken English</li>
</ul>
</li>
<li>Contact Us
</li>
<li> Login </li>
<li>Reviews</li>
</ul>
<div class="button">
Explore More
</div>
</header>
</body>
I hope this will help you to solve the problem.
.main-menu {
background-color: #444;
}
.main-menu nav ul {
margin: 0;
padding: 0;
}
.main-menu nav > ul > li {
display: inline-block;
position: relative;
margin: 0;
}
.main-menu nav > ul > li a {
display: block;
color: #fff;
font-size: 16px;
padding: 20px 15px;
text-decoration: none;
transition: .3s;
}
.main-menu nav > ul > li:hover > a {
color: #7AA93C;
}
.main-menu nav ul li ul {
position: absolute;
padding: 10px 0;
width: 200px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
top: 150%;
opacity: 0;
visibility: hidden;
transition: .3s;
}
.main-menu nav ul li:hover ul {
top: 100%;
opacity: 1;
visibility: visible;
}
.main-menu nav ul li ul li {
display: block;
padding: 0;
margin: 0;
}
.main-menu nav ul li ul li a {
display: block;
text-decoration: none;
padding: 6px 20px;
font-size: 14px;
color: #444;
transition: .3s;
}
.main-menu nav ul li ul li:hover a {
color: #7AA93C;
}
<div class="main-menu">
<nav>
<ul>
<li>
Home
<!-- submenu start -->
<ul class="submenu">
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
<!-- submenu end -->
</li>
<li>About</li>
<li>
Service
<!-- submenu start -->
<ul class="submenu">
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
<li>Sub Menu</li>
</ul>
<!-- submenu end -->
</li>
<li>Contact</li>
</ul>
</nav>
</div>
Related
So, I was trying to make a dropdown menu, it works. But when I hover above it, it just appears in front of my Parents menu
I've tried some things like making an inline-block inside the parent's menu and still didn't work, I tried one thing that work that is adding a top: 100% code but it just didn't feel right cuz basically you add space to it and it just didn't feel right
Code:
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
position: relative;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul>
<li>About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
Just add top: 100% for the submenus:
nav ul li ul {
display: none;
position: absolute;
top: 100%;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
This will position it 100% from the top of the relative positioned parent - 100% referring to the height of that parent, so that it will start directly below it.
I have prepared a possible solution to your problem. With some modifications in the HTML, I added some separate classes to make the code more transparent.
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
.sub-menu {
position: absolute;
top: 55px;
flex-direction: column;
display: none;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
.about:hover .sub-menu {
left: 70px;
}
.why:hover .sub-menu {
left: 145px;
}
nav {
/* this is a tag */
width: 100%;
height: 60px;
background-color: white;
display: flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
float: left;
padding: 0px 14px;
text-decoration: none;
text-align: center;
}
nav form {
float: left;
max-width: 100%;
height: 60px;
}
nav ul {
float: left;
text-align: center
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
padding: 0px 14px;
text-decoration: none;
}
nav ul li:hover ul {
display: flex;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav id="navbar">
<form Name="" Method="" action="BUTTON TEST.html">
<input type="Image" name="IB1" src="gradient-coding-logo-template_23-2148809439.jpg" width="70" height="60">
</form>
<ul class="main-menu">
<li class="about">About
<ul class="sub-menu">
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li class="why">Why?
<ul class="sub-menu">
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>Events
<ul class="sub-menu">
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<a href="" target="_blank">
<li>assd</li>
</a>
<a href="contact.php">
<li>Contact</li>
</a>
</ul>
</nav>
</body>
</html>
There are some points:
In HTML nested tag you should close the inner tag before the outer tag
<li> <a> link tag </a> </li>
Position property can't be used with float. if an element was floated, can't take position and left , top , bottom , right properties.
The better way for layout, is to use display: flex, a powerful feature with less code. (you can read this and this)
* {
margin: 0;
padding: 0;
}
body {
background-image: url(photo-1542831371-29b0f74f9713.jpg);
background-size: cover;
}
nav {
/* this is a tag */
height: 60px;
background-color: white;
display:flex;
}
nav a {
font-family: arial, sans-serif;
color: #222;
font-size: 18px;
line-height: 55px;
padding: 0px 14px;
text-decoration: none;
text-align: center;
display: block;
}
nav form {
max-width: 100%;
height: 60px;
}
nav ul {
display:flex;
list-style: none;
}
nav li:hover>a {
background: rgb(224, 224, 224);
cursor: pointer;
}
nav ul li ul {
display: none;
position: absolute;
background-color: rgba(255, 238, 238, 0.89);
backdrop-filter: blur(5px);
border-radius: 0px 0px 4px 4px;
}
nav ul li:hover ul {
display: block;
}
nav ul li ul li {
width: 180px;
border-radius: 4px;
}
nav ul li ul li a {
padding: 8px 14px;
}
nav ul li ul li a:hover {
background-color: #69696969
}
<nav id="navbar">
<form name="" method="" action="BUTTON TEST.html">
<input
type="Image"
name="IB1"
src="gradient-coding-logo-template_23-2148809439.jpg"
width="70"
height="60"
/>
</form>
<ul>
<li>
About
<ul>
<li>Expectations</li>
<li>FAQ</li>
<li>Laptop Program</li>
</ul>
</li>
<li>
Why?
<ul>
<li>What?</li>
<li>Events & Activities</li>
<li>Meet The Grads</li>
</ul>
</li>
<li>
Events
<ul>
<li>Opportunities</li>
<li>asd</li>
</ul>
</li>
<li>assd</li>
<li>Contact</li>
</ul>
</nav>
I want to make a dropdown menu just using html and css. However, I am unable to do it. I want to make the others list item a dropdwon menu. Can anyone help me with that?
Here's my CSS code:
```
nav {
background-color: #01a6f0;
}
.navbar {
list-style: none;
float: right;
margin-right: 10rem;
margin-top: 2.6rem;
margin-bottom: .5rem;
}
.navbar li {
display: inline-block;
padding: 1rem 1rem;
}
.navbar li:hover {
background-color: #01A6FE;
}
.navbar li a {
color: #fff;
}
```
Here's the HTML code
```
<nav>
<ul class="navbar">
<li>Home</li>
<li>Puzzles</li>
<li>Stories</li>
<li>Goods</li>
<li class="dropdown-link">Others
<ul class="dropdown-menu">
<li>Under The Sea</li>
<li>Middle The Sea</li>
<li>Ovver The Sea</li>
</ul>
</li>
</ul>
</nav>
Try this example with just HTML and CSS:
It is from this site if you want to read more about this code:
https://css-tricks.com/solved-with-css-dropdown-menus/
a {
text-decoration: none;
}
nav {
font-family: monospace;
}
ul {
background: darkorange;
list-style: none;
margin: 0;
padding-left: 0;
}
li {
color: #fff;
background: darkorange;
display: block;
float: left;
padding: 1rem;
position: relative;
text-decoration: none;
transition-duration: 0.5s;
}
li a {
color: #fff;
}
li:hover {
background: red;
cursor: pointer;
}
ul li ul {
background: orange;
visibility: hidden;
opacity: 0;
min-width: 5rem;
position: absolute;
transition: all 0.5s ease;
margin-top: 1rem;
left: 0;
display: none;
}
ul li:hover > ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<nav role="navigation">
<ul>
<li>One</li>
<li>Two
<ul class="dropdown">
<li>Sub-1</li>
<li>Sub-2</li>
<li>Sub-3</li>
</ul>
</li>
<li>Three</li>
</ul>
</nav>
I'm trying to make a simple dropdown menu but the sub items of Meme don't stay in block.
If I remove float left of header li, the menu of Memes appears under Home.
HTML:
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
CSS:
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
Remove the float left and change the following:
header li {
position: relative;
display: inline;
padding: 0 20px 0 20px;
}
nav ul ul {
display:none;
position: absolute;
top: 100%;
left: 0;
}
demo
If you use a flexbox for the embedded menus, it handles with width of the sub-items better than floating does.
You can also change this flex to use flex-direction: row if you prefer that to the column.
Had to change a few other things in order to position the absolute element properly based on its parent menu element. But not too much has changed and I even included a following element to show how they will be aligned even with following submenus.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: flex;
align-items: start;
flex-direction: column;
background: #e8491d;
}
nav > ul{
height: 20px;
}
nav ul li{
position: relative;
white-space: nowrap;
}
nav ul ul {
display:none;
position: absolute;
right: 0;
top: 100%;
width: auto;
padding: 0;
}
nav ul ul li {
padding: 0 5px;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
<li>Memes2
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
Remove the float:left off of header li and make it display:inline-block; instead.
Edit: I don't know how it doesn't work then, because it does in this fiddle, with the same code that you provided. There must be other code that you have that is conflicting, that you didn't include.
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
display: inline-block;
padding: 0 20px 0 20px;
}
header #brand {
float: left;
}
header #brand h1 {
margin: 0;
}
header nav {
float:right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover{
color: #ccc;
font-weight: bold;
}
nav ul li:hover ul {
display: block;
}
nav ul ul {
display:none;
position: absolute;
}
nav ul ul li {
display: block;
background: #e8491d;
}
<header>
<div class="container">
<div id="brand">
<h1><span class="highlight">My</span> website</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>Curriculum Vitae</li>
<li>PC Gaming</li>
<li>Memes
<ul>
<li>Hot</li>
<li>Trending</li>
<li>Upload File</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
I have a top navigation bar with 4 options, where I wish that while the fourth option is hovered, a dropdown-menu will display.
The navigation bar is an unordered list, and the dropdown-menu (which should be activated by the fourth option) is a div consisting of 3 links.
The list item that is supposed to display the dropdown-menu while hovered:
<li class="dropdownbutton">Contact</li>
With the help of this line of code:
.dropdownbutton:hover .dropdowncontent {
display:inline-block;
}
And this is the CSS for the dropdown-content:
.dropdowncontent {
display:none;
background-color:#333;
margin-left:272px;
width:90px;
text-align:center;
}
What am I missing?
This should be allright.
ul {
margin: 0;
padding: 0;
list-style: none;
background-color: #333;
}
ul li {
display: inline-block;
position: relative;
text-align: left;
background-color: #333;
}
ul li a {
display: block;
color: #f2f2f2;
text-align: center;
padding: 16px 15px;
text-decoration: none;
transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
font-size: 17px;
font-family: Arial;
}
ul li a:hover {
background-color: #555;
}
ul li ul.dropdown {
min-width: 100%;
display: none;
position: absolute;
z-index: 999;
left: 0;
width: 90px;
}
ul li:hover ul.dropdown {
display: block;
}
ul li ul.dropdown li {
display: block;
}
ul li ul.dropdown li a {
font-size: 14px;
padding: 10px 15px;
}
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact
<ul class="dropdown">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>
I am currently working on a navigation bar for a website, but I am having trouble with the submenu. I have figured out how to position the submenu relative to it's parent ul, but I am having trouble on making the submenu disappear until the user hovers over the parent.
So when I hover over the "Crisis and Support" I expect not to see the secondary submenu until I hover over the "Resources" tab. Can anyone help figure out what am I doing wrong?
Here is a [live example][1]
/* Navigation Bar */
/* Styles color and interaction, as well as continuous position on scroll. */
.nav {
position: relative;
color: white;
background: -webkit-linear-gradient(#182B52, #1D355E);
/* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#182B52, #1D355E);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#182B52, #1D355E);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#182B52, #1D355E);
/* Standard syntax (must be last) */
box-shadow: 0 0 10px 0px black;
position: -webkit-sticky;
z-index: 1;
}
.nav button {
padding: 10px;
background: #182B52;
color: white;
border-style: solid;
border-top-style: none;
border-color: white;
border-width: 1px;
margin-left: 47%;
margin-bottom: 15px;
}
.nav button:hover {
background: #D3B663;
}
.nav-wrapper {
width: 100%;
margin: 0 auto;
text-align: left;
}
.nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
.nav ul li {
display: inline-block;
}
.nav ul li:hover {
background-color: #1D355E;
}
.nav ul li a,
visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
.nav ul li a:hover {
color: white;
text-decoration: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul ul {
display: none;
position: absolute;
background-color: rgba(29, 53, 94, .75);
}
.nav ul ul li {
display: block;
text-align: left;
}
.nav ul ul li a,
visited {
color: white;
}
.nav ul ul li a:hover {
color: #D3B663;
display: block;
}
.nav ul.submenu {
display: none;
position: absolute;
left: 153px;
top: 147px;
width: 150px;
text-align: center;
}
.nav ul.submenu li {
text-align: left;
color: white;
}
.nav li:hover ul.submenu:hover {
color: #D3B663;
display: block;
}
.nav-wrapper img {
float: right;
height: 75px;
padding-right: 70px;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
.nav form {
position: absolute;
right: 0;
padding-right: 75px;
margin-top: -18px;
}
.nav input {
border: solid;
border-color: white;
border-width: 1px;
color: white;
background-color: #182B52;
padding: 6px;
padding-top: 8px;
}
.nav input:hover {
background: #1D355E;
}
<!-- Navigation Bar -->
<div class="nav">
<!-- Quick Close -->
<button id="get-away">QUICK CLOSE</button>
<!-- Search Bar
<form action="./search.php" method="get">
<input type="text" name="input" size="40px"/>
<input type="submit" value="SEARCH"/>
</form> -->
<!-- Sticky Navigation -->
<div class="nav-wrapper">
<ul>
<li>
ABOUT US
<ul>
<li>OUR HER-STORY</li>
<li>WHY A WOMEN'S CENTER?</li>
<li>LEARN ABOUT OUR SPACE</li>
<li>MEET OUR STAFF
<li>CONTACT US</li>
</ul>
</li>
<li>
CRISIS & SUPPORT
<ul>
<li>FIND COMMUNITY</li>
<li>BASIC RIGHTS</li>
<li>HEALTH</li>
<li>RESOURCES FOR</li>
<ul class="submenu">
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>FOR EDUCATORS</li>
</ul>
</li>
<li>
GET INVOLVED
<ul>
<li>VOLUNTEER</li>
<li>JOIN PEER EDUCATION</li>
<li>BECOME A SAGE AFFILIATE</li>
<li>GET WRRC UPDATES</li>
<li>STUDENT STAFF POSITIONS</li>
</ul>
</li>
<li>
</li>
</ul>
</div>
</div>
Thank you for your time!
On you stylesheet (line 72) change
.nav ul li:hover ul {
display: block;
}
to
.nav ul li:hover > ul {
display: block;
}
You also have a submenu improperly nested. The closing tag for "Resources For" should come after the submenu -- you probably know that.
Codepen: http://codepen.io/SteveClason/pen/oxRyxY