Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Kenny Parewijck
Kenny Parewijck
4,602 Points

How to add a top-line to a top-nav list item when hovering?

Hi!

Could anyone tell me how I could add a top-border to a navigation list item? The border should stick to the top of the browser when hovering.

I tried top-border in combination whit padding but the list item gets pushed down..

Any ideas?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css/testcss.css" media="screen" title="no title" charset="utf-8">
  </head>
  <body>

    <div class="container-logo-nav">
        <a class="logo" href="index.html">LOGO</a>
        <div class="nav">
          <ul class="nav-ul">
            <li><a href="#">Pricing</li></a>
            <li><a href="#" class="nav-help">Help</li></a>
          </ul>
        </div>
    </div>

  </body>
</html>

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  font-family: Lato, sans-serif;
}

img {max-width: 100%;}

ul,ol,li {
  padding: 0;
  margin:0;
  border: 0;
  list-style: none;
}

body {
  font-family: lato, sans-serif;
  font-weight: 300;
  font-size: 1em;
  font-style: normal;
}


a {
  text-decoration: none;
  color: inherit;
}
a:link {

}

a:visited {

}

a:hover {

}

a:active

a:focus



h1 {
  font-family: lato, sans-serif;
  font-weight: 900;
  font-size: 2em;
}

.main-header {
  width: 100%;
  height: 710px;
  background: linear-gradient(rgba(0, 0, 0, 0.4),rgba(0, 0, 0, 0.4)),url(images/QIRDYNRF06.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
  border-top: 1px solid grey;
}

.container-logo-nav {
  background-color: rgba(76, 195, 223, 0.67);
  padding: 5px 0 0 0;
  height: 100px;
}

.logo {
  padding: 0.3em;
  margin: 1em;
  color: white;
  font-weight: bold;
}

.logo:hover {
  opacity: 0.9;
  transition: 0.25s;
}

.nav {
  text-align: right;
  margin-right: 2em;
  margin-top: 1em;
  text-align: right;
  float: right;
}

.nav-ul {
  padding: 0;
}

.nav-ul li{
  display: inline-block;
  padding: 0.3em;
  margin-left: 1em;
  margin-right: 0.4em;
  font-weight: 700;
  font-size: 1em;
  color: white;
}

.nav-ul li:hover{
border-top: 3px solid white;
padding-top: 30px;
}

.nav-help {
  background-image: url(images/navarrow-03.png);
  background-repeat: no-repeat;
  background-size: 6px 6px;
  padding: 0 12px 0 0;
  background-position: 100% 85%;
}
chrisverra
chrisverra
3,760 Points

you can at a border-top to your css for the li

4 Answers

chrisverra
chrisverra
3,760 Points
chrisverra
chrisverra
3,760 Points

voeg me even toe op skype: xrechthoekx dan kijken we morgen even samen

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi Chris,

If I add a border-top to my <li> elements then the top-borders are at different heights. I would also like to get these top-borders to stick to the 'ceiling'.

chrisverra
chrisverra
3,760 Points
chrisverra
chrisverra
3,760 Points

can you show a screenshot? also i forgot to mention that you should put it on a:hover or li:hover. just now noticed you want it on hovering.

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hi!

here is a screenshot: http://s29.postimg.org/6umlm5knb/Schermafbeelding_2016_02_25_om_02_03_23.png