.submenu {
visibility:hidden;
}
.menu>li:hover .submenu {
visibility:visible;
}
<header>
<nav class="header-nav">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a class="active" href="#">About</a>
<ul class="submenu">
<li><a href="#">Dropdown Content</a></li>
<li><a href="#">Another Dropdown Content</a></li>
</ul>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</header>
body {
margin: 0;
padding: 0;
background: #ccc;
}
.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;
height: 40px;
border-bottom: 1px solid #888;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: default;
}
@media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
/* Option 1 - Display Inline */
.nav li {
display: inline-block;
margin-right: -4px;
}
/* Options 2 - Float
.nav li {
float: left;
}
.nav ul {
overflow: auto;
width: 600px;
margin: 0 auto;
}
.nav {
background-color: #444;
}
*/
}
- floating both list and list items left. Floating the list items left is what pulls them into a nice horizontal row for us, stacking the items from left to right.
- However, because of how floats behave, our containing list will collapse to a height of zero unless it is also floated left.
- giving my list a width of 100%: That way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).
- giving the anchors a display of “block” to make sure they fill up the entire list item and make the whole area clickable
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
<ul id="nav">
<li><a href="#">About Us</a></li>
<li><a href="#">Our Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Login</a></li>
</ul>
<body class="news">
<header>
<div class="nav">
<ul>
<li class="home"><a href="#">Home</a></li>
<li class="tutorials"><a class="active" href="#">Tutorials</a></li>
<li class="about"><a href="#">About</a></li>
<li class="news"><a href="#">Newsletter</a></li>
<li class="contact"><a href="#">Contact</a></li>
</ul>
</div>
</header>
</body>