Search code examples
htmlcsstextborderunderline

CSS a:hover border-bottom length

Could anyone help me out by telling me why the a:hover { border-bottom: 2px; } continues on over the length of the link itself?

body {
    margin: 0;
    font-family: "Georgia", "Times New Roman", "Times", "serif";
}

header {
    background-color: #191919;
    padding: 56px;
    text-align: center;
}

div {
    display: inline;
}

ul {
    list-style-type: none;
    display: inline;
    color: #ffffff;
}

li {
    display: inline;
    margin-right: 28px;
    width: 135px;
}

a {
    text-decoration: none;
    color: #ffffff;
}

a:hover {
    border-bottom: 2px solid #ac9962;
    font-size: 18px;
}

a:active {
    border-bottom: 2px solid #ac9962;
    font-size: 18px
}

<!DOCTYPE HTML>
<html>
    <head>
    <title>HTML</title>
    <link rel="stylesheet" type="text/css" href="stylesheet2.css" />
</head>

<body>
    <header>
         <nav>
        <ul>
           <a href="www.youtube.com"><li>Menu 1</li></a>
           <a href="www.youtube.com"><li>Menu 2</li></a>
           <a href="www.youtube.com"><li>Menu 3</li></a>
           <a href="www.youtube.com"><li>Menu 4</li></a>
           <a href="www.youtube.com"><li>Menu 5</li></a>
               <a href="www.youtube.com"><li>Menu 6</li></a>
           <a href="www.youtube.com"><li>Menu 7</li></a>
               <a href="www.youtube.com"><li>Menu 8</li></a>
            </ul>
         </nav>
    </header>
</body>
</html>

bonus:

I'm also having trouble getting Menu 1 - Menu 4 on top of Menu 5 - Menu 8 (horizontally, centered)

Thanks alot!

Solution

  • Borders are applied to the box that the element creates in the page, so it will also continue to the edge of any padding you have applied.

    If you just want the text underlined, use text-decoration: underline;

    Also, your markup is invalid. <ul> can only contain <li> as it's immediate children. Move your hyperlinks inside the list elements.

    <ul>
   <li><a href="www.youtube.com">Menu 1</a></li>
   <li><a href="www.youtube.com">Menu 2</a></li>
   <li><a href="www.youtube.com">Menu 3</a></li>
   <li><a href="www.youtube.com">Menu 4</a></li>
   <li><a href="www.youtube.com">Menu 5</a></li>
   <li><a href="www.youtube.com">Menu 6</a></li>
   <li><a href="www.youtube.com">Menu 7</a></li>
   <li><a href="www.youtube.com">Menu 8</a></li>
</ul>