I've been brainstorming a unique dropdown menu style that involves dropping down a container, but I'm a bit stuck on how to execute it effectively.
Although I've outlined the basic concept, I'm still unsure of the implementation. Any tips or suggestions would be greatly appreciated!
HTML:
<div id="header">
<div class="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Staff</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Enter</a></li>
</ul>
</div>
CSS:
a:visited, a:link, a:active {
text-decoration: none;
color: white;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #4a8fbc;
}
div.nav {
font-family: 'Lato', sans-serif;
font-size: 14px;
margin-left: 200px;
margin-right: 200px;
float: right;
color: white;
line-height: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
margin: 0 30px 0 0;
}
li a:hover {
color: #256690;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 1px solid #7d7d7d;
padding: 6px;
text-decoration: none;
background-color: #f2f2f2;
}