CODEWITHSUNDEEP
htmlcssbackgroundhoverexpand
Mike AlFaver Favro
Mike AlFaver Favro

Reputation: 41

Expanded background with CSS on Hover item

i'm writing on my website and i've some problems with the following code (full code on codepen):

<section class="sidebar">
    <ul class="sidebar-menu clearfix">
      <li class="sidebar-menu-item">HOME</li>
      <li class="sidebar-menu-item">PORTFOLIO</li>
      <li class="sidebar-menu-item">BLOG</li>
      <li class="sidebar-menu-item">ABOUT ME</li>
      <li class="sidebar-menu-item">CONTACT</li>
    </ul>
</section>

https://codepen.io/anon/pen/pdErVq

As you can see all the :after elements are aligned in the first row.

How can i expand the elements in the proper <li> tags?

Upvotes: 0

Views: 73

Answers (3)

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

You can try this Demo

li{position:relative} li a{position:absolute;}

I am added a tag in li

Upvotes: 0

ankita patel
ankita patel

Reputation: 4251

Give position:relative to .sidebar-menu > li class.

.sidebar {
  position: fixed;
  background-color: #333;
  opacity: 0.75;
  width: 300px;
  height: 100%;
  left: -0px;
  top: 0;
}
.sidebar-menu {
  position: relative;
  top: 100px;
  padding-left: 20px;
}
.sidebar-menu > li {
  color: #fff;
  margin-right: 10px;
  list-style: none;
  font-size: 25px;
  font-style: italic;
  padding: 10px 5px;
  cursor: pointer;
  -webkit-transition: all 0.5s;
   transition: all 0.5s;
   position:relative;
}
.sidebar > ul > li:after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  right: 0;
  background-color: rgba(250,250,250,0.5);
  width: 0;
  height: 37px;
  -webkit-transition: all 0.5s;
   transition: all 0.5s;
}
.sidebar-menu > li:hover:after {
  width: 280px;
}
<section class="sidebar">
    <ul class="sidebar-menu clearfix">
      <li class="sidebar-menu-item">HOME</li>
      <li class="sidebar-menu-item">PORTFOLIO</li>
      <li class="sidebar-menu-item">BLOG</li>
      <li class="sidebar-menu-item">ABOUT ME</li>
      <li class="sidebar-menu-item">CONTACT</li>
    </ul>
  </section>

Upvotes: 1

Savado
Savado

Reputation: 585

Your li's need position: relative.

Upvotes: 0

Related Questions