basti1012.bplaced.net

Guten Tag, ich bin ein blutiger Css-Anfänger, ich habe eine Navigationsbar designt. Es funktioniert soweit, aber bitte um verbesserungs Vorschläge was den code betrifft. Denn so wie ich es gelöst habe gibt es Probleme dabei einen Schatten einzufügen.

Code

                                    
                                <style>
  *{
  margin:0;
  padding:0;
}

nav{
    width: 50%;
    border-top: solid 70px #037CA9;
    border-left: solid 130px transparent;
    border-right: solid 130px transparent;
    position: relative;
    margin: 0 auto;
 
}
nav:before{
  content:'';
  position:absolute;
  top:-70px;
  width:200%;
  margin-left:-50%;
  height:30px;
  background:#037CA9;
  display:inline-block;
}
nav>ul li{
position:relative;
 float:left;
  top:-30px;
  left:0;
  width:33%;
  text-align:center;
  list-style:none;
  color:white;
  font-size:25px;
  cursor:pointer;
}
</style>
<nav id="trapezium-border">
  <ul>
    <li>home</li>
    <li>home 2</li>
  <li>home 3</li>
</nav>