CSS a:hover border-bottom length

StackOverflow https://stackoverflow.com/questions/14271550

Question

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!

Was it helpful?

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>

OTHER TIPS

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

Since the a contains an li. The underline is under the a as it should be, since the full size of the li, including margin is within the a.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top