JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div id="TopMenu">
    <ul>
        <li class="HeaderLiveChat" style="display:none"></li>
        <li class="First">
            <a href="/account.php">My Account</a>
        </li>
        <li>
            <a href="/orderstatus.php">Order Status</a>
        </li>
        <li>
            <a href="/wishlist.php">Wish Lists</a>
        </li>
        <li>
            <a href="/giftcertificates.php">Gift Certificates</a>
        </li>
        <li class="CartLink">
            <a href="/cart.php">
        </li>
        <li>
        <div>
            <a onclick="" href="/login.php">Sign in</a>
            or
            <a onclick="" href="/login.php?action=create_account">Create an account</a>
        </div>
        </li>
    </ul>
    <br class="Clear">
</div>

CSS

/* Top Navigational Menu */
#TopMenu {
    position: absolute;
    right: 10px;
    top: 70px;
    font-size: 10px;
    text-align: right;
}

#TopMenu ul, #TopMenu li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#TopMenu ul li {
    display: inline;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding: 0px 4px 0 6px;
}

#TopMenu ul li.First {
    border-left: 0;
}

#TopMenu a {
    color: #333;
}

#TopMenu a:hover, #TopMenu a:visited {
    color: #333;
}

#TopMenu li div {
    display: inline;
}

a {
 padding-top: 20px;
 background:url('http://cdn1.iconfinder.com/data/icons/munich/16x16/home.png') no-repeat 50% 0px;
  height: 16px;
  width: 16px;
}

a:hover {
 background-image: url('http://icons.iconarchive.com/icons/3xhumed/mega-games-pack-32/16/Team-Fortress-2-new-16-icon.png');
}