My navbar shows only 2 of the submenu titles. Why is that?
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #36527c;
text-align: center;
padding: 0;
margin: 0;
height: 121px;
position: relative;
z-index: 99999;
}
.nav li {
font-family: Open sans hebrew;
font-size: 1.2em;
line-height: 40px;
margin-top: 35px;
position: relative;
z-index: 99999;
display: none;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
position: relative;
z-index: 99999;
}
.nav a:hover {
background-color: #aaa;
color: #444;
cursor: default;
position: relative;
z-index: 99999;
}
.nav a.active {
position: relative;
z-index: 99999;
}
/* Sub Menus */
.nav li li {
position: absolute;
z-index: 999;
font-size: .8em;
}
<div class="nav">
<ul>
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
Your .nav UL CSS has a height set to 121px and unfortunately that doesn't just affect the first UL, it affects them all. Giving it a class or id you can bind to your height fixes that problem.
body {
margin: 0;
padding: 0;
}
.nav ul {
list-style: none;
background-color: #36527c;
text-align: center;
padding: 0;
margin: 0;
position: relative;
z-index: 99999;
}
.mainul {
height: 121px;
}
.nav li {
font-family: Open sans hebrew;
font-size: 1.2em;
line-height: 40px;
margin-top: 35px;
position: relative;
z-index: 99999;
display: none;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
position: relative;
z-index: 99999;
}
.nav a:hover {
background-color: #aaa;
color: #444;
cursor: default;
position: relative;
z-index: 99999;
}
.nav a.active {
position: relative;
z-index: 99999;
}
/* Sub Menus */
.nav li li {
position: absolute;
z-index: 999;
font-size: .8em;
}
<div class="nav">
<ul class="mainul">
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1##</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2###</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
Related
I was just trying to make a dropdown menu, but my code does not work. Pls let me know what is the error. Like it is only showing empty dropdown on Hover just increasing its width and not showing any links in it. Pls Pls help me find the solution I am stucked on this prob. since one whole month. Here is the code...
.contain ul{
list-style: none;
margin-top: 40px;
position:relative;
bottom: 15px;
z-index: 99999999999999999;
overflow-y: hidden;
position: absolute;
top: 150px;
}
.contain ul li {
background: cadetblue;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
text-transform: uppercase;
font-weight: bold;
z-index: 99999999999999999;
}
.contain ul li:hover{
background-color:green;
height: 250px;
width: 250px;
z-index: 99999999999999999;
}
.contain ul ul{
display: none;
z-index: 99999999999999999;
height: 40
}
::-webkit-scrollbar {
width: 7px;
background-color: orange;
height: 20px;
}
<div class="contain">
<ul>
<li>HOME
<ul>
<li>Welcome Page</li>
<li>Main Page</li>
</ul>
</li>
<li>ABOUT US
<ul>
<li>Our Motto</li>
<li>Principal's Messgae</li>
<li>Organization</li>
</ul>
</li>
<li>ADMISSIONS
<ul>
<li>Registration</li>
<li>Subjects</li>
<li>Fee Structure</li>
</ul>
</li>
<li>Academics
<ul>
<li>School Timings</li>
<li>Faculty</li>
<li>CBSE</li>
</ul>
</li>
<li>CONTACT US
<ul>
<li>+91-995 828 4006</li>
<li>jpsnoida#jaypeeschools.edu.in</li>
</ul>
</li>
</ul>
</div>
Dropdown menu is display: none, so that you need to CSS for that
.contain ul li:hover ul {
display: block;
}
Also, I have added some CSS to display proper dropdown on hover.
.contain ul{
list-style: none;
margin-top: 40px;
position:relative;
}
.contain ul li {
background: cadetblue;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
text-transform: uppercase;
font-weight: bold;
}
.contain ul li:hover{
background-color:green;
}
.contain ul li:hover ul {
display:block;
z-index: 10;
}
.contain ul ul{
display: none;
position: absolute;
background: cadetblue;
top: 51px;
left: 0;
padding: 0;
margin: 0;
min-width: 250px;
}
.contain ul ul li {
width: 100%;
display: block;
}
::-webkit-scrollbar {
width: 7px;
background-color: orange;
height: 20px;
}
<div class="contain">
<ul>
<li>HOME
<ul>
<li>Welcome Page</li>
<li>Main Page</li>
</ul>
</li>
<li>ABOUT US
<ul>
<li>Our Motto</li>
<li>Principal's Messgae</li>
<li>Organization</li>
</ul>
</li>
<li>ADMISSIONS
<ul>
<li>Registration</li>
<li>Subjects</li>
<li>Fee Structure</li>
</ul>
</li>
<li>Academics
<ul>
<li>School Timings</li>
<li>Faculty</li>
<li>CBSE</li>
</ul>
</li>
<li>CONTACT US
<ul>
<li>+91-995 828 4006</li>
<li>jpsnoida#jaypeeschools.edu.in</li>
</ul>
</li>
</ul>
</div>
Did small changes
.contain ul li:hover ul {
display: block;
}
.contain ul {
list-style: none;
margin-top: 40px;
position: relative;
bottom: 15px;
z-index: 99999999999999999;
overflow-y: hidden;
position: absolute;
top: 150px;
}
.contain ul li {
background: cadetblue;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
text-transform: uppercase;
font-weight: bold;
z-index: 99999999999999999;
}
.contain ul li:hover {
background-color: green;
height: 250px;
width: 250px;
z-index: 99999999999999999;
}
.contain ul ul {
display: none;
z-index: 99999999999999999;
height: 40
}
::-webkit-scrollbar {
width: 7px;
background-color: orange;
height: 20px;
}
.contain ul li:hover ul {
display: block;
}
<div class="contain">
<ul>
<li>HOME
<ul>
<li>Welcome Page</li>
<li>Main Page</li>
</ul>
</li>
<li>ABOUT US
<ul>
<li>Our Motto</li>
<li>Principal's Messgae</li>
<li>Organization</li>
</ul>
</li>
<li>ADMISSIONS
<ul>
<li>Registration</li>
<li>Subjects</li>
<li>Fee Structure</li>
</ul>
</li>
<li>Academics
<ul>
<li>School Timings</li>
<li>Faculty</li>
<li>CBSE</li>
</ul>
</li>
<li>CONTACT US
<ul>
<li>+91-995 828 4006</li>
<li>jpsnoida#jaypeeschools.edu.in</li>
</ul>
</li>
</ul>
</div>
Your css lacks the display assignment;
.contain ul li:hover ul {display: block;}
you can also find correct code sample in Here
In the first photo, my cursor is hovering over the slogan in the top right corner. If someone could tell me the adjustments I need to make so that my dropdown menu only comes down when I hover over it, it would be much appreciated.
HTML:
<ul class="dropdown">
<li>Menu</li>
<ul class="dropdownElements">
<li><a href="About.html"/>About</li>
<li><a href="Vintage.html"/>Vintage Products</li>
<li><a href="Antique.html"/>Antique Products</li>
<li><a href="Collectibles.html"/>Collectibles</li>
<li><a href="Contact.html"/>Contact Information</li>
</ul>
</ul>
CSS:
* {
margin: 0px;
padding: 0px;
}
div.header ul.dropdown {
position: absolute;
margin: auto;
list-style: none;
margin-left: 190px;
position: relative;
top: 40px;
}
div.header ul.dropdown li {
background-color: white;
height: 45px;
width: 135px;
line-height: 45px;
border-radius: 5px;
box-shadow: 1px 3px 5px black;
text-align: center
}
ul.dropdownElements li {
list-style: none;
}
div.header ul.dropdown li:hover {
background-color: #C5A06D;
transition: background linear 0.2s;
}
div.header ul ul {
visibility:hidden;
}
div.header ul:hover ul {
visibility:visible;
}
a:link {
text-decoration: none;
color: black;
}
See below. I have removed div.header at a few places because that element isn't in the HTML and stops the CSS from working.
Essential changes: list items of the top level menu positioned relative, submenu positioned absolute.
* {
margin: 0px;
padding: 0px;
}
ul.dropdown {
position: relative;
margin: auto;
list-style: none;
margin-left: 190px;
position: relative;
top: 40px;
}
div.header ul.dropdown li {
background-color: white;
height: 45px;
width: 135px;
line-height: 45px;
border-radius: 5px;
box-shadow: 1px 3px 5px black;
text-align: center
}
ul.dropdownElements {
display: none;
position: absolute;
top: 1em;
left: 0;
}
ul.dropdownElements li {
list-style: none;
}
div.header ul.dropdown li:hover {
background-color: #C5A06D;
transition: background linear 0.2s;
}
ul.dropdown li:hover ul.dropdownElements {
display: inline-block;
}
a:link {
text-decoration: none;
color: black;
}
<ul class="dropdown">
<li>Menu
<ul class="dropdownElements">
<li><a href="About.html" />About</li>
<li><a href="Vintage.html" />Vintage Products</li>
<li><a href="Antique.html" />Antique Products</li>
<li><a href="Collectibles.html" />Collectibles</li>
<li><a href="Contact.html" />Contact Information</li>
</ul>
</li>
</ul>
Trying to create a responsive nav with sub menus, the first sub menu is working great, but cant seem to get the sub sub menus to work.
It would be great if i can just add UL's under each section and it will pop out.
What am i doing wrong
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav>ul>li {
text-align: center;
}
.nav>ul>li>a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: block;
}
.nav li ul li {
display: block;
}
}
<header>
<div class="nav">
<ul class="menu">
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1</li>
<li>
Tutorial #2
<ul>
<li>Tutorial #1</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
Your menus are overlapping, that's why you cant see them properly. You can fix this moving the submenus to the right and show them when parent menu item, for example:
HTML:
<header>
<div class="nav">
<ul class="menu">
<li class="home">Home</li>
<li class="tutorials">Tutorials
<ul>
<li>Tutorial #1</li>
<li>
Tutorial #2
<ul class="submenu">
<li>Tutorial #1</li>
<li>Tutorial #2</li>
<li>Tutorial #3</li>
</ul>
</li>
<li>Tutorial #3</li>
</ul>
</li>
<li class="about"><a class="active" href="#">About</a></li>
<li class="news">Newsletter
<ul>
<li>News #1</li>
<li>News #2</li>
<li>News #3</li>
</ul>
</li>
<li class="contact">Contact</li>
</ul>
</div>
</header>
CSS:
.nav ul {
list-style: none;
background-color: #444;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
font-family: 'Oswald', sans-serif;
font-size: 1.2em;
line-height: 40px;
text-align: left;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
padding-left: 15px;
border-bottom: 1px solid #888;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #aaa;
color: #444;
cursor: default;
}
/* Sub Menus */
.nav li li {
font-size: .8em;
}
ul.submenu {
margin-left:100%;
margin-top: -50px;
}
/*******************************************
Style menu for larger screens
Using 650px (130px each * 5 items), but ems
or other values could be used depending on other factors
********************************************/
#media screen and (min-width: 650px) {
.nav li {
width: 130px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
display: inline-block;
margin-right: -4px;
}
.nav a {
border-bottom: none;
}
.nav > ul > li {
text-align: center;
}
.nav > ul > li > a {
padding-left: 0;
}
/* Sub Menus */
.nav li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul:not(.submenu) {
display: block;
}
.nav li ul li {
display: block;
}
.nav ul.submenu { display:none }
.nav li:hover ul li:hover ul.submenu { display:block; }
}
updated fddle https://jsfiddle.net/99Lecy15/2/
.nav li ul li {
display: block;
position:relative;
}
.nav li ul a + ul{
position:absolute;
left:100%;
top:0;
}
Hi im trying to create a navigation bar which when you hover the li another list come out from the side to show other options. My problem I can get to align with the first li but I'm not sure how to do it with the rest of the list. At the moment the drop down list stays in the same position.
Im sure I haven't explained it well enough here is my code.
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
https://jsfiddle.net/2zov6q2v/
Change margin of your lists:
nav ul ul {
height: auto;
display: none;
position:absolute;
background-color: #399077;
margin-left: 89.5%;
//top: 9%; delete this line
margin-top: -38px; //add this line
z-index:150;
}
jsfiddle
.menu {
position: relative;
left: 0;
}
.menu-open {
left: 0;
}
.menu-open .menu-side {
left: 0;
}
.menu-side,
menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side {
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: 100%;
padding: 2px;
}
body {
display: block;
margin: 8px;
background: #f0f0f0;
}
nav ul {
background-color: #43a286;
/* overflow: hidden; <----------------- here */
color: white;
padding: 0;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: block;
padding: 20px;
width: 80%;
text-align: center;
position: relative; /* <------------------ and here */
}
nav ul li:hover {
background-color: #399077;
}
nav ul .arrow:hover {
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}
nav ul ul {
height: auto;
display: none;
position: absolute;
background-color: #399077;
left: 89.5%;
top: 9%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
display: block;
width: 165px;
}
/*nav .ee:after {
content: '';
width: 0;
height: 0;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
z-index: 1;
top: 0%;
left: 50%;
margin-left: -6px
} */
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul>
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
Change this style
.menu{
position: relative;
left: 0;
}
.menu-open{
left: 0;
}
.menu-open .menu-side{
left: 0;
}
.menu-side, menu {
-webkit-transition: left 0.2s ease;
-moz-transition: left 0.2s ease;
transition: left 0.2s ease;
}
.menu-side{
background-color: #333;
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 210px;
height: 100%;
padding: 2px;
}
body{
display: block;
margin: 8px;
background: #f0f0f0;
}
nav ul{
background-color: #43a286;
color:white;
padding: 0;
text-align: center;
margin: 0;
width: 100%;
height: 100%;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: block;
padding: 20px;
width: 80%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul .arrow:hover{
border-right: 10px solid white;
border-right-width: thick;
width: 79%;
}
nav ul ul {
height: auto;
display: none;
background-color: #399077;
left: 212px;
position: absolute;
top: 0;
z-index:150;
}
nav ul ul li{
display: block;
width:75%;
text-align: center;
}
nav ul li:hover ul{
display: block;
width: 165px;
}
/*nav .ee:after {
content: '';
width: 0;
height: 0;
border-top: 8px solid black;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
z-index: 1;
top: 0%;
left: 50%;
margin-left: -6px
} */
nav ul li a, visited{
color:white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover{
color:white;
font-size: 20px;
}
<body class="menu">
<header>
<nav class="menu-side">
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li><a class="ee" href="Premiership.html">Premiership</a>
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r"><a class="ee" href="Unavailble.html">Ligue 1</a>
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li><a class="ee" href="Unavailble.html">Bundesliga</a>
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li><a class="ee" href="Unavailble.html">Serie A</a>
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li><a class="ee" href="Unavailble.html">La Liga</a>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
See this updated JSFiddle. Set li's to position: relative; and ul ul's to position: absolute. From there you can set ul ul's left to 100%. This pushes them all the way to the right of the parent. You can use left: calc(100% + 5px) to account for li's white right border when hovered. No need for messy margins.
Hi I've looked up ways to place an arrow under my navigation but I can't get to work on my navigation bar. Any help would be much appreciated.
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><span>Home</span></li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul >
<li id="r">Ligue 1
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
<li class="arrow"> Spain
<ul>
<li>La Liga
</li>
</ul>
</li>
</ul>
<div class="handle"> Menu </div>
</nav>
I thought that is css would work but it hasn't
li a:after {
content: '';
display: none;
width: 0;
height: 0;
border-top: 6px solid #333;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
my code https://jsfiddle.net/jzqv6kr0/
In your case, the arrow is there it's just that the overflow:hidden on the ul means you can't see it.
I've adapted your code a little (see the snippet below) but it requires some tweaks to get it exactly as you might like. I've colored the arrow red for simplicity.
nav ul {
/* overflow:hidden; REMOVE */
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul {
background-color: #43a286;
color: white;
padding: 0;
text-align: center;
margin: 0;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li {
display: inline-block;
padding: 20px;
width: 12.3%;
text-align: center;
position: relative;
}
nav ul li:hover {
background-color: #399077;
}
nav ul li.arrow:after {
content: '';
width: 0;
height: 0;
border-top: 6px solid red;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -6px
}
nav ul ul {
display: none;
position: absolute;
background-color: #399077;
margin-left: -3%;
z-index: 150;
}
nav ul ul li {
display: block;
width: 75%;
text-align: center;
}
nav ul li:hover ul {
margin-top: 2%;
display: block;
border-bottom-left-radius: 5%;
border-bottom-right-radius: 5%;
width: 165px;
}
nav ul li a,
visited {
color: white;
font-family: 'CFJackStory-Regular', Helvetica, Arial, sans-serif;
display: block;
text-decoration: none;
}
nav ul ul li a:hover {
color: white;
font-size: 20px;
}
<nav>
<div class="hello"></div>
<ul>
<li class="icon-home"><span>Home</span>
</li>
<li class="arrow"> <a class="star" href="#">England</a>
<ul>
<li>Premiership
</li>
<li>Championship
</li>
<li>League 1
</li>
<li>League 2
</li>
</ul>
</li>
<li class="arrow"> France
<ul>
<li id="r">Ligue 1
</li>
</ul>
</li>
<li class="arrow"> Germany
<ul>
<li>Bundesliga
</li>
</ul>
</li>
<li class="arrow"> Italy
<ul>
<li>Serie A
</li>
</ul>
</li>
</ul>
</nav>