Page Widget How to - Hover to enlarge menu item

Question

We would like to know how to hover to enlarge menu item.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!--  w  w w  .j  av a  2s.  com-->
  background: #ccc;
}

.wrapper {
  white-space: nowrap;
}

.wrapper .field {
  width: 100px;
  overflow: hidden;
  display: inline-block;
}

.wrapper .field:hover {
  position: relative;
  overflow: visible;
}

.wrapper .field span {
  background: #fff;
}
</style>
</head>
<body>
  <div class="wrapper">
    <span class="field">
        <span>field 1 - Some long text in
        here that gets cut off.</span>
    </span> 
    <span class="field">
        <span>field
        2 - Some long text in here that gets cut off.
        </span>
    </span>
  </div>
</body>
</html>

The code above is rendered as follows: