CODEWITHSUNDEEP
htmlcss
Eunice Dhivya
Eunice Dhivya

Reputation: 329

Increase width of menu on hover while preserving the position of other links

I am currently working on a horizontal menu using lists. My problem is that on hover I want to increase the width of the link while preserving the positioning of other links next to it(something like the image below).

enter image description here

Instead the link on hover increases the width and pushes the other links into the next line which I don't want it to do. Can some one help me figure out how I can do this. Thanks

https://jsfiddle.net/diviseed/k1wk9cvb/5/

#other-menu {
  width: 850px;
  background-color: #eee;
}
#other-menu li {
  list-style: none;
  float: left;
  padding: 10px;
}
li a {
  display: block;
  color: #828282;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
}
li {
  display: block;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}
li:hover {
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background: #fff;
  color: #828282 !important;
  font-size: 12px;
  letter-spacing: 2px;
  line-height: 25px;
  text-transform: uppercase;
  border: 1px solid #eeeeee;
  width: 15%;
  height: 10px;
}
li a:hover {
  text-decoration: none;
  color: #828282 !important;
  font-size: 12px;
}
<ul id="other-menu">
  <li><a href="#">Home</a>
  </li>
  <li>
    <a href="#">News</a>
  </li>
  <li>
    <a href="#">opinion</a>
  </li>
  <li>
    <a href="#">States</a>
  </li>
  <li>
    <a href="#">Cities</a>
  </li>
  <li>
    <a href="#">World</a>
  </li>
  <li>
    <a href="#">Opinion</a>
  </li>
  <li>
    <a href="#">Life &amp; Style</a>
  </li>
  <li>
    <a href="#">Entertainment</a>
  </li>
  <li>
    <a href="#">EBusiness</a>
  </li>
  <li>
    <a href="#">ESport</a>
  </li>
</ul>

Upvotes: 0

Views: 46

Answers (3)

Alex Kohatzki
Alex Kohatzki

Reputation: 1

Try it :

Edit in JSFiddle
JavaScript
HTML
CSS
Result
#other-menu {width:850px; background-color:#eee;}
#other-menu li{ list-style:none; float:left; padding:10px;}
li a{
    display: block;
    color: #828282;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    width : 100;
}

li {
    display: block;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    float : left ;
width : 100;
}

li:hover {
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  background: #fff;
  color: #828282 !important;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 25px;
    text-transform: uppercase;
    border: 1px solid #eeeeee;
    width: 100;
  height: 10px;
  }
li a:hover {
  text-decoration: none; color: #828282 !important; font-size:12px;
}

Upvotes: -1

Shah Hassan
Shah Hassan

Reputation: 155

Add transform property
li:hover{transform: scale(1.5);}

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

I would use a pseudo-element (:before) to style the hover event..

changes to CSS

li {
    display: block;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    position:relative; /* set the parent to be relative */
}

li:hover:before { /* use the :before for styling */
   content:''; 
   position:absolute; /* set styling box to be absolute position to not affect parent */
   z-index:-1; /* set it behind the parent */
   /*copy the properties the parent had*/
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;

    /* use positioning to grow its size in relation to parent */
    top:-5px;
    bottom:-5px;
    left:-15px;
    right:-15px;


    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background: #fff;
    border: 1px solid #eeeeee;
  }

Demo at https://jsfiddle.net/hvurs857/

#other-menu {width:850px; background-color:#eee;}
#other-menu li{ list-style:none; float:left; padding:10px;}
li a{
    display: block;
    color: #828282;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
}

li {
    display: block;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    position:relative;
}

li:hover:before {
   content:'';
   position:absolute;
   z-index:-1;
   display: block;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    top:-5px;
    bottom:-5px;
    left:-15px;
    right:-15px;
    
    
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    background: #fff;
    color: #828282 !important;
    font-size: 12px;
    letter-spacing: 2px;
    line-height: 25px;
    text-transform: uppercase;
    border: 1px solid #eeeeee;
   
  }
li a:hover {
  text-decoration: none; 
  color: #828282 !important; 
  font-size:12px;
}
<ul id="other-menu" >
    <li><a href="http://newsite.thehindu.com/">Home</a></li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">opinion</a>
    </li>
    <li>
      <a href="#">States</a>
    </li>
    <li>
      <a href="#">Cities</a>
    </li>
    <li>
      <a href="#">World</a>
    </li>
    <li>
      <a href="#">Opinion</a>
    </li>
    <li>
      <a href="#">Life &amp; Style</a></li>
    <li>
      <a href="#">Entertainment</a></li>
    <li>
      <a href="#">EBusiness</a></li>
    <li>
      <a href="#">ESport</a>
    </li>
  </ul>

Upvotes: 1

Related Questions