So, here's the issue. I initially set up a standard "Home" Button that links to the Home Page of the website, but I felt that the word "Home" was too plain. As a solution, I attempted to replace the word with an icon, but unfortunately, it's not aligning correctly. I've made some adjustments in my CSS, but it seems to be causing problems with the entire navigation menu. I've attached a screenshot for reference. If anyone can identify what's going wrong, please let me know.
CSS:-
ul#menu
{
padding: 0px;
position: relative;
margin: 0;
}
ul#menu li
{
display: inline;
text-decoration:solid;
}
ul#menu li a
{
color: black;
background-color: #f5b45a;
padding: 10px 20px;
text-decoration: none;
line-height: 2.8em;
/*CSS3 properties*/
border-radius: 4px 4px 0 0;
}
HTML:-
<ul id="menu">
<li id="Home_Link"><a href="Home"><img src="../../Image_Data/Home_Icon.ico" id="Home_Icon"/></a></li>
<li><a href="Men">MEN</a></li>
<li><a href="Women">WOMEN</a></li>
<li><a href="Kids">KIDS</a></li>
<li><a href="Design">DESIGN!!</a></li>