I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you.
Here is the HTML code:
<nav>
<ul>
<li class="current-item"> <a href="index.php"> Home </a> </li>
<li> <a href="profile.php"> Profile </a> </li>
<li> <a href="contact.php"> Contact </a> </li>
</ul>
</nav>
And here is the CSS code:
nav {
position: absolute;
margin-top: 288px;
margin-left: 0px;
width: 25px;
height: 25px;
z-index: 2;
}
nav > ul > li {
font-size: 20px;
color: white;
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0,0,0,0.4);
z-index: 2;
}
nav > ul > li > a {
text-decoration: none;
color: #000000;
transition: all linear 0.15s;
}
nav > ul > .current-item > a {
background-color: rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
width: 50px;
height: 28px;
z-index: 2;
text-decoration: none;
}
nav > ul > li:hover > a {
background-color: rgba(0,0,0,0.35);
text-align: center;
color: white;
padding: 3px 22px;
border-radius: 10px;
border: none;
cursor: pointer;
width: 50px;
height: 28px;
z-index: 2;
}