separate main nav links from sub nav links in css? - html

Question

I'm trying to create a dropdown menu for my personal website but something doesn't seem to go right.
HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li><li>
League</li><li>
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
Contact</li>
</ul>
</nav>
</header>
CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li {
display: inline-block;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
height: 20px;
border-radius: 2px;
}
The last few lines of code are the problem I think. The hover part covers every line-item that is within the .nav , but I don't know how to seperate the main navigation links from the sub navigation links (which should drop down) in css.
Can anyone explain to me what code I should add to let it work?
thanks.

Answer 1

I modified your complete code:
Here is it, There are several modification. This is may be helpful for you. You need to hide your drop-down option first and find out the time when firing it out and also how to fire.
And one important thing, you have to set your drop-down options as absolute, so that it is the child of some main option/ menu.
Modified HTML:
<header class="mainheader">
<nav class="nav">
<ul>
<li>Home</li>
<li>
League
</li>
<li>Dropdown
<ul class="nav-dropdown">
<li>bbva</li>
<li>barclays premier league</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
</header>
Modified CSS:
.mainheader, .header-text, .header-text-soccer {
background-color: green;
margin-left: 60px;
margin-right: 60px;
margin-top: 20px;
height: 60px;
border-radius: 6px;
position: relative;
}
.mainheader nav ul li a {
text-decoration: none;
color: white;
}
.mainheader nav ul li ul{
display: none;
}
.mainheader nav ul li {
display: inline-flex;
padding: 20px;
color: white;
}
.nav ul li:hover {
background-color: #41a608;
border-radius: 2px;
}
.nav ul li:hover ul{
background: #aaa none repeat scroll 0 0;
display: block;
margin-left: -20px;
padding: 0;
position: absolute;
top: 60px;
width: 200px;
}
.mainheader nav ul li ul li{
box-sizing: border-box;
color: white;
display: inline-block;
padding: 20px;
width: 100%;
}

Answer 2

I suppose this is what you need:
https://jsfiddle.net/8f2hvdfh/1/
Your CSS was a mess. Check out a guide on how to make CSS dropdown menus: http://www.w3schools.com/css/css_dropdowns.asp
This gives you the basic setup:
nav ul ul {
position:absolute;
display:none;
padding-left:0;
}
nav ul li {
display:inline-block;
height:60px;
}
nav ul ul li {
display:block;
}
nav ul li a {
text-decoration:none;
color:white;
display:block;
padding:21px;
}
nav ul li:hover ul {
display:block;
}
The rest is bells and whistles. Good luck.