Eunice Dhivya Eunice Dhivya - 1 month ago 11
HTML Question

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>




Answer

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>