Skip to content

Instantly share code, notes, and snippets.

@jackyu1996
Last active January 4, 2018 05:08
Show Gist options
  • Save jackyu1996/86563a1f24f2d66e2324d67a916e0fb8 to your computer and use it in GitHub Desktop.
Save jackyu1996/86563a1f24f2d66e2324d67a916e0fb8 to your computer and use it in GitHub Desktop.

Revisions

  1. jackyu1996 revised this gist Jan 4, 2018. 1 changed file with 2 additions and 7 deletions.
    9 changes: 2 additions & 7 deletions style.css
    Original file line number Diff line number Diff line change
    @@ -15,22 +15,18 @@ nav {
    ul {
    list-style: none;
    padding: 0;
    margin: 0;
    }

    li {
    text-align: center;
    font-size: 1.5rem;
    }

    nav>ul {
    padding: 0;
    margin: 0;
    background: black;
    }

    nav>ul>li {
    width: 7%;
    display: inline-block;
    background: black;
    position: relative;
    }

    @@ -41,6 +37,5 @@ nav>ul>li>ul {

    nav>ul>li:hover>ul {
    display: block;
    background: black;
    width: 100%;
    }
  2. jackyu1996 revised this gist Jan 3, 2018. No changes.
  3. jackyu1996 created this gist Jan 3, 2018.
    40 changes: 40 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="wilih=device-wilih" />
    <title>Test Page</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="all" />
    </head>

    <body>
    <nav>
    <ul>
    <li>
    <a href="#">This</a>
    <ul>
    <li><a href="#">Not</a></li>
    <li><a href="#">Yet</a></li>
    <li><a href="#">Sorry</a></li>
    </ul>
    </li>
    <li><a href="#">Is</a>
    <ul>
    <li><a href="#">Not</a></li>
    <li><a href="#">Yet</a></li>
    <li><a href="#">Sorry</a></li>
    </ul>
    </li>
    <li><a href="#">It</a>
    <ul>
    <li><a href="#">Not</a></li>
    <li><a href="#">Yet</a></li>
    <li><a href="#">Sorry</a></li>
    </ul>
    </li>
    </ul>
    </nav>
    </body>

    </html>
    46 changes: 46 additions & 0 deletions style.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    body {
    margin: 0 auto;
    width: 100%;
    }

    a {
    color: white;
    text-decoration: none;
    }

    nav {
    margin: 1% 1%;
    }

    ul {
    list-style: none;
    padding: 0;
    }

    li {
    text-align: center;
    font-size: 1.5rem;
    }

    nav>ul {
    padding: 0;
    margin: 0;
    }

    nav>ul>li {
    width: 7%;
    display: inline-block;
    background: black;
    position: relative;
    }

    nav>ul>li>ul {
    display: none;
    position: absolute;
    }

    nav>ul>li:hover>ul {
    display: block;
    background: black;
    width: 100%;
    }