border not working correctly on links html - html

Question

So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>

Answer 1

Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/

Answer 2

I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!

Answer 3

Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>

Answer 4

I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.