Jump to content

Menu Whitespace


dmacfang8

Recommended Posts

<!DOCTYPE hml>

<html>
    <head>
    <title> Dashie </title>
    <link rel='stylesheet' href='CSS.css'>
    </head>
<body>
    <div class="navbar">
  <a href="#home">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Links
      
    </button>
    <div class="dropdown-content">
        <div class='red'>
        <a href="https://www.youtube.com/user/DashieGames"><img src="yt_logo_rgb_light.png" style='width:10%'/></a>
        </div>
        <div class='lightblue'>
        <a href="https://twitter.com/DashieXP"><img src="7194920_orig.png" style='width:10%'/></a>
        </div>
        <div class='blue'>
        <a href="https://www.facebook.com/brokenxbox/"><img src="yt_logo_rgb_light.png" style='width:100px'/></a>
        </div>
    </div>
  </div>
</div>

    </div>
</body>

</html>

Link to comment
Share on other sites

.navbar {
    overflow: hidden;
    background-color: #FD7012;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: black;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.red a:hover {
        background-color: red;
}

.lightblue a:hover {
        background-color: #1da1f2;
}

.blue a:hover {
        background-color: #365899;
}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...