CSS a:hover border-bottom length

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!

Tieson T. · Accepted Answer · 2013-01-11T04:23:43.317

3

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>

edited Jan 11 '13 at 04:23

answered Jan 11 '13 at 04:18

Tieson T.

20,774
6
77
92

Thanks! Works fine after adjusting the
's and 's!

Spectre

Jan 11 '13 at 04:33

@user1968801 NP. I would suggest, if you are a little light on what constitutes valid HTML, that you consider heading over to http://reference.sitepoint.com/html or https://developer.mozilla.org/en-US/docs/HTML - both are good references for learning most of what you need to know for the basics of web development. – Tieson T. Jan 11 '13 at 04:39

score 0 · Answer 2 · answered Jan 11 '13 at 04:17

0

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.

answered Jan 11 '13 at 04:17

James Montagne

77,516
14
110
130

CSS a:hover border-bottom length

2 Answers2