Today I was trying to learn how to create those triangles with CSS Borders and I finally did. Awesome stuff! Although it seems that whenever I hover over the menu two things happen that I want to fix (1) the menu seems to snap and resize on hover and resize back on mouse out. (2) the hover opacity seems to flow down to the first item of the sub-menu. I've created a JSFiddle over here. If anyone can drop some knowledge on me, I'd be very grateful!
HTMLCode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
</head>
<body>
<div class="navContainer">
<ul class="nav group">
<li>
<a class="active" href="#">Home</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Safari</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Prices</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Photos</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Contact</a>
<ul class="subNav group">
<li>Sub-Item</li>
<li>Sub-Item</li>
<li>Sub-Item</li>
</ul>
</li>
</ul>
</div>
<div class="box"></div>
</body>
</html>
CSS Code
html {
font-size: 62.5%;
}
body {
background: #fff;
font-size: 1.6em;
}
.navContainer {
width: 1100px;
margin: 0 auto;
}
ul.nav {
margin: 0;
padding: 0;
position: relative;
left:30%;
font-size: 1.3rem;
}
li {
float: left;
list-style-type:none;
text-align: center;
background: #aa2929;
}
li a {
display: block;
text-decoration: none;
color: #fff;
color: rgba(255,255,255, 0.7);
text-shadow: 0 1px 1px rgba(0,0,0,0.5);
padding: 1rem 2rem;
transition: all .3s ease-in-out;
}
li a:focus,
li a:hover {
color: #fff;
background: #a85555;
background: rgba(255,255,255, 0.15);
}
ul.subNav {
margin: 0;
padding: 0;
}
ul.subNav li {
float: none;
display: none;
}
.nav li:hover ul.subNav li {
display: block;
}
.group:after {
content: "";
display: table;
clear: both;
}
li a.active:hover:after {
content: "";
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(89, 172, 255, 0.83);
}
It's because your "Sub-Items" are wider than your main nav elements, so when you hover and the Sub-Items are shown, the parent (main nav element) has to expand to fit it.
Putting a fixed width on .nav.group > li should solve your problem.
Another option is to absolute-position the dropdowns.
position absolute on your subNav and a fixed width on the parent list items ( .nav li) will fix the issue
.nav li{
width:80px; /* I used 80px as example */
}
.subNav{
position:absolute;
}
Add the above to the base of your css it will fix it.
Code Snippet...
html {
font-size: 62.5%;
}
body {
background: #fff;
font-size: 1.6em;
}
.navContainer {
width: 1100px;
margin: 0 auto;
}
ul.nav {
margin: 0;
padding: 0;
font-size: 1.3rem;
}
li {
float: left;
list-style-type: none;
text-align: center;
background: #aa2929;
}
li a {
display: block;
text-decoration: none;
color: #fff;
color: rgba(255, 255, 255, 0.7);
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
padding: 1rem 2rem;
transition: all .3s ease-in-out;
}
li a:focus,
li a:hover {
color: #fff;
background: #a85555;
background: rgba(255, 255, 255, 0.15);
}
ul.subNav {
margin: 0;
padding: 0;
}
ul.subNav li {
float: none;
display: none;
}
.nav li:hover ul.subNav li {
display: block;
}
.group:after {
content: "";
display: table;
clear: both;
}
li a.active:hover:after {
content: "";
box-sizing: border-box;
display: block;
margin: 0 auto;
padding: 0;
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid rgba(89, 172, 255, 0.83);
}
.nav li {
width: 80px;
}
.subNav {
position: absolute;
}
.nav > li > a {
height: 1.5em;
}
<body>
<div class="navContainer">
<ul class="nav group">
<li>
<a class="active" href="#">Home</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Safari</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Prices</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Photos</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
<li class="active">
<a class="active" href="#">Contact</a>
<ul class="subNav group">
<li>Sub-Item
</li>
<li>Sub-Item
</li>
<li>Sub-Item
</li>
</ul>
</li>
</ul>
</div>
Hope this helps
Related
i am developing an app using angular;my problem is i have to create a structure like in the uploaded picture,but i can't figure it out;
i have tried with list style and pseudo classes,but it does n't work it out;
.mod-ul li::before {
content: "L";
color: #88c4e6;
position: relative;
left: 0;
top: -4px;
font-size: 25px;
}
You could do something like the below:
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
ul {
padding-left: 1em;
}
ul ul li {
padding-left: 1em;
border: 1px solid black;
border-width: 0 0 1px 1px;
}
li.container {
border-bottom: 0px;
}
li.empty {
font-style: italic;
color: silver;
border-color: silver;
}
li p {
margin: 0;
background: white;
position: relative;
top: 0.5em;
}
ul ul li ul {
border-top: 1px solid black;
margin-left: -1em;
padding-left: 2em;
}
ul ul li:last-child ul {
border-left: 1px solid white;
margin-left: -17px;
}
<ul class="parent">
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
</li>
</ul>
</li>
</ul>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li>
<p>Testing 1</p>
</li>
<li>
<p>Testing 2</p>
</li>
<li>
<p>Testing 3</p>
</li>
</ul>
</li>
<li class="container">
<p>Testing </p>
<ul>
<li class="empty">
<p>empty</p>
</li>
</ul>
</li>
</ul>
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 5 years ago.
How can I get my transition to work? From other examples I have seen and tried it look like it should be working. I'm wanting a slight delay on the display of the sub-menu so that they are instantly shown when the mouse rolls over them.
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul,
.dropdown-menu>ul,
.sub-dropdown-menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a,
.dropdown-menu a,
.sub-dropdown-menu a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.dropdown-menu,
.sub-dropdown-menu {
display: none;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu {
display: block;
transition: all 1s linear 1s;
}
.sub-dropdown {
position: relative;
}
.sub-dropdown-menu {
left: 100%;
top: 0;
white-space: nowrap;
}
<div class="TopMenuBar">
<ul>
<li>Home</li>
<li class="dropdown">Programs
<div class="dropdown-menu">
<ul>
<li>Preschool Mandarin
<li>Grade School Mandarin</li>
<li>High School Mandarin</li>
<li>Weekend Class</li>
<li>Summer Camp</li>
<li class="sub-dropdown">Examination Training
<div class="sub-dropdown-menu">
<ul>
<li>AP Test</li>
<li>YCT Test</li>
<li>HSK Test</li>
</ul>
</div>
</li>
<li class="sub-dropdown">Adult Mandarin
<div class="sub-dropdown-menu">
<ul>
<li>Conversational Mandarin Class</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown">Resources
<div class="dropdown-menu">
<ul>
<li>Chinese Club</li>
<li>Literature</li>
</ul>
</div>
</li>
<li class="dropdown">Contact us
<div class="dropdown-menu">
<ul>
<li>Customer Service</li>
<li>Careers</li>
</ul>
</div>
</li>
<li class="dropdown">Registration
</ul>
</div>
Cause transitions do not work if element is or has display: none; one way around it is to use visibility:hidden; and opacity: 0;
Also it is better practice to define
transition: all 1s linear 1s;
on the element itself not just on the :hover state
Like so:
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul,
.dropdown-menu>ul,
.sub-dropdown-menu>ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a,
.dropdown-menu a,
.sub-dropdown-menu a {
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.dropdown-menu,
.sub-dropdown-menu {
visibility: hidden;
opacity: 0;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
transition: all 1s linear 1s;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}
.sub-dropdown {
position: relative;
}
.sub-dropdown-menu {
left: 100%;
top: 0;
white-space: nowrap;
}
<div class="TopMenuBar">
<ul>
<li>Home</li>
<li class="dropdown">Programs
<div class="dropdown-menu">
<ul>
<li>Preschool Mandarin
<li>Grade School Mandarin</li>
<li>High School Mandarin</li>
<li>Weekend Class</li>
<li>Summer Camp</li>
<li class="sub-dropdown">Examination Training
<div class="sub-dropdown-menu">
<ul>
<li>AP Test</li>
<li>YCT Test</li>
<li>HSK Test</li>
</ul>
</div>
</li>
<li class="sub-dropdown">Adult Mandarin
<div class="sub-dropdown-menu">
<ul>
<li>Conversational Mandarin Class</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="dropdown">Resources
<div class="dropdown-menu">
<ul>
<li>Chinese Club</li>
<li>Literature</li>
</ul>
</div>
</li>
<li class="dropdown">Contact us
<div class="dropdown-menu">
<ul>
<li>Customer Service</li>
<li>Careers</li>
</ul>
</div>
</li>
<li class="dropdown">Registration
</ul>
</div>
i am trying to achieve this layout:
The nearest I can get is this:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project_thumbnail_info {
margin: 10px 0px 0px 0px;
padding: 0;
list-style: none;
}
.project_thumbnail_info li {
margin: 0 15px 0 0;
padding: 0;
list-style: none;
float: left;
clear: right;
}
.project_thumbnail_info li ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.project_thumbnail_info li ul li {
float: left;
clear: both;
}
.project_thumbnail_info_avatar {
width: 35px;
height: 35px;
}
.project_thumbnail_info_hashtags li {
float: left!important;
clear: right!important;
padding: 0px 8px 0px 0px;
margin: 0;
display: block;
}
h2 {
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
h2 a {
color: #000;
}
<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6">
<img src="http://lorempixel.com/400/200/" class="img-responsive" />
<ul class="project_thumbnail_info">
<li class="project_thumbnail_info_avatar">
<img src="http://lorempixel.com/400/400/" class="img-responsive">
</li>
<li class="project_thumbnail_info_detail">
<ul>
<li>
<h2>dem hinterfragen</h2>
</li>
<li>
<ul class="project_thumbnail_info_hashtags">
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
The problem is, in case the column get smaller (or more hashtags are added), the title and hashtags are jumping down, because there is no room left. This isnt what I want, but I cant find any solution.
I hope you can help me.
You can use display:flex to achieve what you want.
I have removed all your floats and changed the for inline-block (hashtags) and flex (main ul container)
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project_thumbnail_info {
margin: 10px 0px 0px 0px;
padding: 0;
list-style: none;
display: flex;
}
.project_thumbnail_info_detail {
flex-grow: 1;
}
.project_thumbnail_info li {
margin: 0 15px 0 0;
padding: 0;
list-style: none;
}
.project_thumbnail_info li ul {
margin: 0;
padding: 0;
list-style: none;
}
.project_thumbnail_info_avatar {
width: 35px;
height: 35px;
}
.project_thumbnail_info_hashtags li {
padding: 0px 8px 0px 0px;
margin: 0;
display: inline-block;
}
h2 {
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
h2 a {
color: #000;
}
<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6">
<img src="http://lorempixel.com/400/200/" class="img-responsive" />
<ul class="project_thumbnail_info">
<li class="project_thumbnail_info_avatar">
<img src="http://lorempixel.com/400/400/" class="img-responsive">
</li>
<li class="project_thumbnail_info_detail">
<ul>
<li>
<h2>dem hinterfragen</h2>
</li>
<li>
<ul class="project_thumbnail_info_hashtags">
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Please find the solution
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project_thumbnail_info {
margin: 10px 0px 0px 0px;
padding: 0;
list-style: none;
}
.project_thumbnail_info_detail
{
display: inline-block;
width: 70%;
}
.project_thumbnail_info li {
margin: 0 15px 0 0;
padding: 0;
list-style: none;
float: left;
clear: right;
}
.project_thumbnail_info li ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.project_thumbnail_info li ul li {
float: left;
clear: both;
}
.project_thumbnail_info_avatar {
width: 35px;
height: 35px;
}
.project_thumbnail_info_hashtags li {
float: left!important;
clear: right!important;
padding: 0px 8px 0px 0px;
margin: 0;
display: block;
}
h2 {
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0;
}
h2 a {
color: #000;
}
<div class="col-xs-12 col-sm-6 col-lg-4 col-md-6">
<img src="http://lorempixel.com/400/200/" class="img-responsive" />
<ul class="project_thumbnail_info">
<li class="project_thumbnail_info_avatar">
<img src="http://lorempixel.com/400/400/" class="img-responsive">
</li>
<li class="project_thumbnail_info_detail">
<ul>
<li>
<h2>dem hinterfragen</h2>
</li>
<li>
<ul class="project_thumbnail_info_hashtags">
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
<li>
#hashtag
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Wrestling with mutli-drop menu. (97% working) Select United States 1 menu, then pick Nevada menu item. There's a gray bar at the bottom. Same for US -> California. Gray bar below Los Angeles. I've played with margins and padding for a while. The :hover I was hoping would highlight the entire li portion. "Seems" to for all but most bottom menu item. (BTW: US -> California -> San Francisco -> SOMA. You'll see top left corner doesn't quite touch. That's maybe related.)
Any tips welcome. Thanks. Milton.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul
{
list-style:none;
margin: 0;
padding: 0;
background: #b3c2bf; /* BG color across screen */
}
#nav_wrapper ul li
{
display: inline-block;
position:relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a
{
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration:none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul
{
display:none;
position:absolute;
top: 100%; /* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a
{
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left:100%;
}
p.menutextpadder { padding-left: 12px; padding-top: 4px; padding-bottom: 4px; }
#nav_wrapper ul li:hover > ul { display:block; }
#nav_wrapper ul li:hover { background-color: Blue; color: white; }
</style>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li><p class="menutextpadder">United States 1
<ul>
<li class="dir"><p class="menutextpadder">Arizona</p></li>
<li class="dir"><p class="menutextpadder">California
<ul>
<li><p class="menutextpadder">San Francisco
<ul>
<li><p class="menutextpadder">Pacific Heights</p></li>
<li><p class="menutextpadder">SOMA
<ul>
<li class="dir"><p class="menutextpadder">Spear Street</p></li>
<li class="dir"><p class="menutextpadder">Moscone Center</li>
</ul>
</li>
</ul>
</li>
<li><p class="menutextpadder">Los Angeles</p></li>
</ul>
<li class="dir"><p class="menutextpadder">Nevada</p></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
add the css rule below
ul{
font-size: 0;
}
Snippet below
#nav_wrapper {
margin-top: 20px;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul {
list-style: none;
margin: 0;
padding: 0;
background: #b3c2bf;
/* BG color across screen */
}
#nav_wrapper ul li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
min-width: 150px;
max-width: 150px;
text-align: left;
}
#nav_wrapper ul li a {
display: block;
/* white here gives the text white color */
color: white;
font-family: Arial, sans-serif;
font-weight: 200;
font-size: 16px;
text-decoration: none;
padding: 0;
margin 0;
}
#nav_wrapper ul ul {
display: none;
position: absolute;
top: 100%;
/* 100% of height of the li element */
padding: 0;
margin 0;
}
#nav_wrapper ul ul a {
line-height: 120%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#nav_wrapper ul ul ul {
top: 0;
left: 100%;
}
p.menutextpadder {
padding-left: 12px;
padding-top: 4px;
padding-bottom: 4px;
}
#nav_wrapper ul li:hover > ul {
display: block;
}
#nav_wrapper ul li:hover {
background-color: Blue;
color: white;
}
#nav_wrapper .menutextpadder {} ul {
font-size: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<body>
<nav id="nav_wrapper">
<ul class="topmenu">
<li>
<a href="#">
<p class="menutextpadder">United States 1</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Arizona</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">California</p>
</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">San Francisco</a>
<ul>
<li>
<a href="#">
<p class="menutextpadder">Pacific Heights</p>
</a>
</li>
<li>
<a href="#">
<p class="menutextpadder">SOMA</a>
<ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Spear Street</p>
</a>
</li>
<li class="dir">
<a href="#">
<p class="menutextpadder">Moscone Center</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
<p class="menutextpadder">Los Angeles</p>
</a>
</li>
</ul>
<li class="dir">
<a href="#">
<p class="menutextpadder">Nevada</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
I have a drop down menu with 3 sub list items in every tab, there's a problem were the drop down menu disappears when you move the mouse to the second drop down menu list item. Any idea on how to fix this? I tired setting .sub-nav to display block on hover also but this didnt work, any ideas as to why?
nav {
color: white;
background-color: orange;
margin: auto;
padding: 0;
max-width: 100%;
}
nav li > span,
nav a {
font-size: 1.5em;
}
nav ul {
max-height: 100%;
text-align: right;
max-width: 100%;
margin: auto;
padding: 0 5% 0 0;
}
nav li {
max-height: 100%;
border-style: solid;
border-width: 0 1px 0 0;
border-color: rgba(0, 0, 0, .1);
display: inline-block;
list-style: none;
margin: 3px;
padding: 2px;
max-width: 100%;
}
.main-nav:hover {
background-color: #ffcc33;
}
nav a {
text-decoration: none;
}
nav a {
color: orange;
}
.home-page a:visited {
color: white;
}
nav a:visited {
color: orange;
}
.active {
background-color: #ffcc33;
}
.main-nav {
position: relative;
}
.sub-nav li:hover {
background-color: rgba(0, 0, 0, .1);
}
.sub-nav {
position: absolute;
display: none;
}
.main-nav:hover .sub-nav {
display: block;
}
<nav>
<ul>
<li class="main-nav home-page active">
HOME
</li>
<li class="main-nav">
<span> Content 1 </span>
<ul class="sub-nav">
<li>Page 1
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</li>
<li class="main-nav">
<span> Content 2 </span>
<ul class="sub-nav">
<li>Page 4
</li>
<li>Page 5
</li>
<li>Page 6
</li>
</ul>
</li>
<li class="main-nav">
<span> Content 3 </span>
<ul class="sub-nav">
<li>Page 7
</li>
<li>Page 8
</li>
<li>Page 9
</li>
</ul>
</li>
</ul>
</nav>
It's because you have a max-height set to all ul's within your nav. If you remove this then it'll work fine.
nav ul {
max-height: 100%; <-- here
text-align: right;
max-width: 100%;
margin: auto;
padding: 0 5% 0 0;
}
If you need max-height then just apply it to the first child of nav (nav > ul).
nav > ul {
max-height: 100%;
}
Codepen example - http://codepen.io/lukemeaden/pen/mPGreY