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 Jelique Edward
Jelique Edward
1,691 Points

How to set li opacity back to 1 when p is hovered over ?

Hello All, Im working on a new project and I've decided to create something that I think is unique. At least I think so considering I've never seen it before.

Im trying to create a navigation bar that expands horizontally to reveal list item(li) links. The idea is to have the border of a div expand upon being hovered over. And when that happens, the links appear!

However, the problem that I am facing is that I cannot find a way to keep the li's hidden while the div is not expanded.

I tried setting the opacity to 0 on the li's and have them revert to full opacity when the div is hovered over, however this does not work.

Thank you in advance to any and all who give any advice.

The HTML

<nav>

<div><p>Navigate:</p>

<ul id="inner">
 <li><a href="#">Home</a></li>
 <li><a id="yourcomp" href="#">Your Comp</a></li>
 <li id="spec"><a href="#">Spec Spec</a></li>
 <li><a href="#">Contact</a></li>
</ul>

</div>

</nav>

The CSS

nav {
height: 60px;
margin-top: -20px;
}

nav div {
position: relative;
border: 4px solid #4a4a4a;
border-top: none;
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 130px;
transition-property: width;
transition-duration: 1s;
}

nav div:hover {
width: 99%;
}

 nav div:hover ul {

 }

nav p {
font-family: 'Raleway', sans-serif;
font-size: 1.6em;
font-weight: 100;
color: #333333;
padding-top: 17px;
padding-left: 7px;
height: 50px;
}

#inner {
display: block;
list-style-type: none;
padding: 0px 0px 0px 0px;
margin-right: auto;
margin-left: auto;
margin-top: -87px;
width: 700px;
height: 60px;
/*border: 1px solid black*/
}

#inner li {
position: relative;
display: inline-block;
width: 120px;
padding: 0px 0px;
text-align: center;
margin: 12px 10px 0px 35px;
overflow: hidden;
/*border: 1px solid black;*/
}

#inner li a {
display: inline-block;
font-family: 'Raleway', sans-serif;
font-size: 1em;
text-decoration: none;
color: #ffffff;
padding: 7px 5px 7px 5px;
margin: 0px auto 0px;
border: 3px solid #4a4a4a;
border-top: none;
border-bottom: none;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
width: 100px;
height: 20px;
}

#inner li a:hover {
color: #1ccecb;
border-color: #1ccecb; 
}
Máté Végh
Máté Végh
25,607 Points

Hi Jelique, I'd really like to help you with this, but I will need more info. Could you provide your HTML and CSS?

Jelique Edward
Jelique Edward
1,691 Points

Matt, I added the HTML code and CSS. I hope this helps

1 Answer

Máté Végh
Máté Végh
25,607 Points

Hey,

How about adding overflow: hidden; property on the nav div? I know this will mess up the height of the div, but I think this could be the best solution to hide the list items while the div is not expanded. Check it out here: http://codepen.io/anon/pen/azwvRz

You can also hide the list items inside the div area by giving the ul an offset like this:

ul {
  position: relative;
  left: 100px;
}
Jelique Edward
Jelique Edward
1,691 Points

Your solution actually worked really well ! Thank you Matt. The only issue now is that the border of the "home" li is sticking out within the div, but I suppose I can deal with that myself. Thanks a ton for your help. I really appreciate it!

Máté Végh
Máté Végh
25,607 Points

I'm glad I could help! nav div:hover ul { left: 0; } should do it. Also, you can make it smoother by giving transition: 1s; to the ul.

Jelique Edward
Jelique Edward
1,691 Points

Thank you so much for your help Matt, but I'm having on last small issue, and perhaps you may be able to help me figure it out. I've gotten the li's to be hidden completely when the div's borders are non-expanded. However, I am not able to move the li's back to the center when I hover on the div.

Here's the link: http://codepen.io/ViaJCE/pen/jEwwMZ

Máté Végh
Máté Végh
25,607 Points

Add the left: 100px; to #inner instead of #inner li:

#inner {
  position: relative;
  left: 100px;
  transition: 1s;
}
nav div:hover #inner {
  left: 0;
}

Or here is a better one: http://codepen.io/anon/pen/OPgxgJ (I've added my code to the end)

Jelique Edward
Jelique Edward
1,691 Points

Thank you so much for your help Matt ! I really appreciate this ! The design works even better know than I originally planned !

Máté Végh
Máté Végh
25,607 Points

No problem! Good luck with your project!

Jelique Edward
Jelique Edward
1,691 Points

Thank you !