I have a grid with a number of records. In each record, there is an option to open a small menu. The problem with the menu is that it gets hidden by the browser's edge when it is opened on the last row. For all the row's menu should open downwards that is the requirement. For the last row where the menu is getting cut-off the fix I want is it to open upwards.

```js
$(function() {
  $("a").click(function() {
    //debugger;
    $(this).next().toggle();
  });
});
```

```css
#main {
  background-color: #ccc;
  overflow: hidden
}

.row {
  height: 30px;
  border: 1px solid #000;
  line-height: 30px;
  background-color: #FFF;
  position: relative;
  overflow: visible
}

.menu {
  width: 70px;
  height: 70px;
  position: absolute;
  top: 0;
  left: 100px;
  background-color: green;
  display: none;
  z-index: 1
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
  <div class="row">
    <a href="javascript:void(0)">Open Menu</a>
    <div class="menu"></div>
  </div>
</div>
```

I have created a jsfiddle here - <https://jsfiddle.net/ashwyn/5mwcvhkr/3/>

I am looking for a CSS solution. If not CSS then a minimal JavaScript.