I'm struggling to center a CSS drop-down menu on my webpage without causing the drop-down effect to break. No matter what I try, it seems to mess up. What am I missing?
Snippet of code:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,
dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;color:black;text-decoration:none;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing: 0;}
#wrap{max-width:1280px;width:100%;margin:auto;}
nav ul li{line-height:44px;float:left;background-color:#64abfb;padding:10px;}
nav ul li a{color:#FFF;padding:10px;font-size:20px;}
nav ul li ul{display:none;}
nav ul li:hover ul{display:list-item;position:absolute;margin-top:5px;margin-left:-10px;}
nav ul li:hover ul li{float:none;}
li a:hover{border-bottom:3px red solid;}
li > a:after{content:' »';}
li > a:only-child:after{content:'';} <body>
<div id="wrap">
<nav>
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Drop 1</a></li>
<li><a href="#">Drop 2</a></li>
<li><a href="#">Drop 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
</ul>
</nav>
</div>
</body>