so - 30492160

by BramVanroy

HTML

<div id="mainNavigation">
    <a href="Home/home.html" id="siteName" class="pull-left">
        <span>Miniverse</span>
    </a>
    <div id="siteNavigation" class="pull-left">
        <a href="Home/home.html">Home</a>
        <a href="Catalog/catalog.html">Catalog</a>
        <a href="Forum/forum.html">Forums</a>
    </div>
    <div id="userContent" class="pull-right">
        <!-- If user isn't logged in
        <a href="#">Log-In</a>
        <a href="#">Sign Up</a>
        -->
        <div class="pull-left">
            <a><span onclick="toggleCurrencyDropdown()" style="cursor:pointer">Currency</span></a>
            <div id="currencyDropdown" style="display: none;">
                <a href="#">Buy More</a>
                <a href="#">Transactions</a>
            </div>
        </div>
        <div class="pull-left">
            <a><span onclick="toggleUserDropdown()" style="cursor:pointer" class="username">Username</span></a>
            <div id="userDropdown" style="display: none;">
                <a href="#">Profile</a>
                <a href="#">Membership</a>
                <a href="#">Inventory</a>
            </div>
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
.pull-left {
    float: left;
}
.pull-right {
    float: right;
}
#mainNavigation {
    width: 100%;
    height: 45px;
    background-color: #3B3B40;
}
#siteName {
    margin: 0;
    width: 421;
    height: 45px;
    color: #FFF;
    font-family: Arial, sans-serif;
    font-size: 40px;
    line-height: 1.15em;
    text-align: right;
}
#siteNavigation {
    margin: 0 0 0 100px;
    width: auto;
    height: 45px;
    color: #FFF;
}
#siteNavigation a {
    width: 125px;
    height: 45px;
    color: #FFF;
    text-align: center;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.8em;
    float: left;
    display: block;
    transition: background-color .5s;
}
#siteNavigation a:hover {
    background-color: #4C4C4C;
}
#userContent {
    margin: 0 50px 0 0;
    width: auto;
    height: 45px;
    text-align: center;
}
#userContent a {
    margin: 0 0 0 2px;
    width: 125px;
    height: 45px;
    color: #FFF;
    font-family: Arial, sans-serif;
    font-size: 20px;
    line-height: 2.2em;
    display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.username {
    font-weight: bold;
}
#userDropdown {
    width: auto;
    height: auto;
    clear: both;
}
#userDropdown a {
    width: 125px;
    background-color: #3B3B40;
    transition: background-color .4s;
}
#userDropdown a:hover {
    background-color: #3399FF;
}
#currencyDropdown {
    width: auto;
    height: auto;
    clear: both;
}
#currencyDropdown a {
    width: 125px;
    background-color: #3B3B40;
    transition: background-color .4s;
}
#currencyDropdown a:hover {
    background-color: #3399FF;
}
#notification-bad {
    margin: 10px 10%;
    width: 80%;
    height: 40px;
    text-align: center;
    border-radius: 15px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 0, 0, 0.6);
}
#notification-good {
   ...

JavaScript

function toggleUserDropdown() {
    var dropdown = document.getElementById("userDropdown");
    if (dropdown.style.display != 'none') {
        dropdown.style.display = 'none';
    } else {
        dropdown.style.display = '';
    }
}

function toggleCurrencyDropdown() {
    var dropdown = document.getElementById("currencyDropdown");
    if (dropdown.style.display != 'none') {
        dropdown.style.display = 'none';
    } else {
        dropdown.style.display = '';
    }
}