I am frustrated with the vertical alignment of my menus (home, photos, paintings) on my website. I want them to be displayed horizontally instead. Can someone please assist me with this issue?
<style>
body{background:black}
li a{
white-space: nowrap;
color: transparent;
display: block;
text-transform: uppercase;
text-align: center;
text-shadow: 0px 0px 0px #fff;
letter-spacing: 1px;
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
transition: all 0.6s linear; text-decoration:none
}
li a:hover{
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
text-decoration:none
}
li a:hover:before{content:"<"}
li a:hover:after{content:">"}
</style>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Paintings</a></li>
</ul>