html - 在悬停时增加菜单的宽度，同时保留其他链接的位置

Question

我目前正在使用列表制作水平菜单。我的问题是，在悬停时我想增加链接的宽度，同时保留旁边其他链接的位置(如下图所示)。

相反，悬停时的链接会增加宽度并将其他链接插入下一行，而我不希望它这样做。有人可以帮我弄清楚我该怎么做吗？谢谢

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 1

我会使用伪元素 (:before) 来设置悬停事件的样式..

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;
  }

演示在 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>