homepage2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Homepage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
</head>

<body>

    <div id="wrapper">
        <div class="sbox"><h1></h1>

        <form action="https://google.com/search?q=" method="get"><input
        autocomplete="off" type="text" name="q" autofocus/></form></h1></div>
    <div id="nav">
        <ul>
    <li><a href="#">Music</a>

            <ul>
                <li><a href="https://soundcloud.com/cheekycharmander">Soundcloud</a></li>
                <li><a href="https://reddit.com/r/trap">Trap</a></li>
                <li><a href="https://reddit.com/r/jerseyclub">Jersey Club</a></li>
                <li><a href="https://reddit.com/r/kpop">K-pop</a></li>
                <li><a href="https://reddit.com/r/chillwave">Chillwave</a></li>
                <li><a href="https://reddit.com/r/futurebeats">Futurebeats</a></li>
                <li><a href="https://reddit.com/r/chiptunes">Chiptunes</a></li>

            </ul>
            </li>
            <li>

    <a href="#">4chan</a>
            <ul>
                <li><a href="https://boards.4chan.org/g/catalog">/g/</a></li>
                <li><a href="https://boards.4chan.org/mu/catalog">/mu/</a></li>
                <li><a href="https://boards.4chan.org/pol/catalog">/pol/</a></li>
                <li><a href="https://boards.4chan.org/wg/catalog">/wg/</a></li>
                <li><a href="https://boards.4chan.org/gd/catalog">/gd/</a></li>

            </ul>
            </li>
    <li><a href="#">Social</a>
                <ul>
                    <li><a href="https://twitter.com">Twitter</a></li>
                    <li><a href="https://instagram.com">Instagram</a></li>
                    <li><a href="https://tumblr.com">Tumblr</a></li>
                    <li><a href="https://facebook.com">Facebook</a></li>
                    <li><a href="https://gmail.com">Gmail</a></li>

                </ul>
                </li>
    <li><a href="#">Torrents</a>
                <ul>
                    <li><a href="https://thepiratebay.se">The Pirate Bay</a></li>
                    <li><a href="http://rutracker.org">RuTracker</a></li>
                    <li><a href="https://kickass.to">Kickass</a></li>
                </ul>
                </li>
    <li><a href="#">Shopping</a>
            <ul>
                <li><a href="https://newegg.com">Newegg</a></li>
                <li><a href="https://musiciansfriend.com">Musician's Friend</a></li>
                <li><a href="https://used.guitarcenter.com">Guitar Center Used</a></li>
                <li><a href="https://stlouis.craigslist.org">Craigslist</a></li>
                <li><a href="https://ebay.com">eBay</a></li>
                <li><a href="https://amazon.com">Amazon</a></li>
            </ul>
            </li>
    <li><a href="#">Other</a>
            <ul>
                <li><a href="https://youtube.com">Youtube</a></li>
                <li><a href="https://krowdweb.darden.com/krowd/prd/default.asp">Krowd</a></li>
            </ul>
            </li>
        </ul>
    </div> <!--end nav-->
     </div> <!--end wrapper-->

</body>
</html>


<!--css is in a separate styles.css file-->

@charset "utf-8";

body{overflow-y:scroll;padding:10px;margin:10px;font-family:'Roboto', sans-serif;font-size:4.0vw;background-color:#A69CBE;}
#sbox{float: left;width: 98%;margin-left:
1%;margin-right: 1%;opacity: 0.9;transition: 0.2s ease;}#search{width:
50%;margin-top: 20px;}tr, td{height: 100%;padding: 0 0 0 0;}#Search
td:nth-child(1){float: left;margin-top: -2px;width: 35%;text-align:
center;opacity: 0.8;}#Search td:nth-child(2){float: right;width:
60%;}input[type="text"]{padding: 0 0 20px 8px;width: 100%;border:
none;cursor: default;font-family: 'Roboto';opacity: 0.3;transition: 0.0s
ease;text-align: center;background: transparent;color: #FED6DF;font-size:
6.0vw;}input[type="text"]:focus{width: 100%;opacity:0.8;box-shadow: 1 1
1 1;background: transparent;font-size: 6.0vw;}textarea, input{outline:
none;}

#wrapper{width:95%;margin:auto;margin-top:5%;text-align:center;}

#nav ul{list-style-type:none;padding:10px;margin:auto;}
#nav ul li{display:inline-block;}
#nav ul li:hover{background-color:transparent;}
#nav ul li a,visited{display:block;padding:15px;color:#fff;text-decoration:none;}
#nav ul li a:hover{color:#444;}
#nav > ul li:hover a{color:#444;}

#nav ul li:hover > ul{display:block;}
#nav ul ul{display:none;position:absolute;background-color:#transparent;}
#nav ul ul li{display:block;}
#nav ul ul li:hover{background-color:transparent;}
#nav ul li:hover ul li a,visited{color:#E1EEF4;font-size:2.1vw;}

#nav ul ul li:hover > ul{display:block;}
#nav ul ul ul{margin:-49px 0 0 160px;background-color:#E8B7CA;}
#nav ul ul ul li a:hover{color:#222;}
#nav ul li ul li a:hover{color:#FED6DF;}