show div on hover (fixed position and overflow hidden parent)

Question

Have such a site with fixed sidebar, with 100% height. When you hover on placeholder img you can see dropdown menu. There is an item called HOVER ME AND SEE. When you hover on it, I want show you some block with class .hidden-nav with 100% height, 200px width and positioned near fixed sidebar. I create that div inside <li> HOVER ME AND SEE, but it appears horizontal scroll on fixed sidebar.. Here is screen what I want

Html

<aside class="fixed-col">
<div class="fix-wrap cf">
    <div class="fixed-col-inner">
        <h1>lorem</h1>
        <div class="menu-button">
            <a href="#" onclick="return false"></a>
        </div><!-- menu-button -->
        <input type="text" id="search" placeholder="...">
        <button class="search-button"></button>
        <div class="fav-wrap">
            <a href="#" class="fav">ipsum (0)</a>
        </div><!-- fav-wrap -->
        <div class="menu-side">
            <img src="http://placehold.it/31x31" alt="">
            <a href="#" class="username">xxx xxx</a>
            <a href="#" class="logout">xxx</a>
            <ul class="main-nav">
                <li><a href="#">lorem</a></li>
                <li><a href="#" class="add">ipsum</a></li>
                <li class="last-li"></li>
            </ul>
            <ul class="second-nav">
                <li>
                    <a href="#">HOVER ME AND SEE</a>
                    <div class="hidden-nav">
                        some content here
                    </div><!-- hidden-nav -->
                </li>
                <li><a href="#">amet</a></li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
        </div><!-- menu-side -->
        <ul class="social">
            <li class="facebook"><a href="#"></a></li>
        </ul>
    </div><!-- fixed-col-inner -->
    </div>
</aside><!-- fixed-col -->

css

html, body {
    margin: 0;
    height: 100%;
}

.fixed-col {
    width: 290px;
    height: 100%;
    position: fixed;
    left: 0;
    background: url(../img/menu-bg.jpg) no-repeat;
    background-size: 100% 100%;
    overflow-y: auto;
    overflow-x: hidden; 
}

.fix-wrap {
    background: rgba(0, 0, 0, 0.8);
    min-height: 100%;
}

.fixed-col-inner {
    height: 100%;
    position: relative;
}

.fixed-col-inner h1 {
    margin: 0;
    font: 24px/90px Arial;
    color: #fff;
    margin-left: 30px;
}

.menu-button {
    width: 36px;
    height: 32px;
    position: absolute;
    background: rgba(0, 0, 0, 0.6);
    right: 30px;
    top: 30px;
    border-radius: 2px;
}

.menu-button a {
    display: block;
    background: url(../img/menu-button-bg.png) center center no-repeat;
    width: 36px;
    height: 32px;
}

.menu-button:hover {
    background: #5b5c5b;
}

.fixed-col-inner input {
    width: 230px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.4);
    outline: none;
    color: #c4c4c4;
    margin-left: 30px;
    padding: 0 40px 0 15px;
}

button.search-button {
    width: 17px;
    height: 17px;
    display: block;
    border: none;
    outline: none;
    background: url(../img/search-icon.png) center center no-repeat;
    position: absolute;
    right: 46px;
    top: 101px;
    cursor: pointer;
}

.fav-wrap {
    text-align: center;
    margin: 25px 30px 0;
    border-bottom: 1px solid #51504f;
    padding-bottom: 30px;
    background: url(../img/star.png) 30% 7% no-repeat;
}

a.fav {
    display: inline-block;
    padding-left: 27px;
    color: #fff;
    text-decoration: none;
    font: 14px Calibri;
}

a.fav:hover {
    text-decoration: underline;
}

.menu-side {
    padding-top: 25px;
}

.menu-side img {
    max-width: 31px;
    max-height: 31px;
    display: block;
    margin: 0 auto 10px;
}

.username {
    display: table;
    margin: 0 auto;
    font: 14px Calibri;
    color: #fff;
    text-decoration: none;
}

.username:hover, .logout:hover {
    text-decoration: underline;
}

.logout {
    display: table;
    margin: 8px auto 0;
    font: 12px Calibri;
    color: #84e5df;
    text-decoration: none;
}

.main-nav {
    margin: 15px 0 0 0;
    padding: 0;
    list-style-type: none;
}

.main-nav li {
    display: block;
}

.main-nav li:hover {
    background: #4d4d4d;
}

.main-nav li a {
    font: 14px/39px Calibri;
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    background: url(../img/paper-empty.png) left center no-repeat;
    padding-left: 30px;
    margin-left: 30px;
}

.main-nav li a.add {
    background: url(../img/paper-add.png) left center no-repeat;
}

.last-li {
    margin: 15px 30px 0;
    border-bottom: 1px solid #51504f;
}

.second-nav {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-height: 0px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: all .5s ease;
}

.second-nav li {
    display: block;
}

.second-nav li:first-child {
    margin-top: 15px;
}

.second-nav li:hover {
    background: #4d4d4d;
}

.second-nav li a {
    font: bold 16px/39px Calibri;
    color: #f5f5f5;
    text-decoration: none;
    display: block;
    padding-left: 30px;
}

.menu-side:hover .second-nav{
    max-height: 5000px;
    opacity: 1;
    visibility: visible;
    overflow: visible;
}

.social {
    margin: 30px 30px 0 30px; 
    padding: 0;
    text-align: center;
}

.social li {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px;
}

.social li a {
    vertical-align: middle;
}

.facebook a {
    background: url(../img/facebook-ico.png) center center no-repeat;
    display: block;
    width: 10px;
    height: 18px;
}

.vk a {
    background: url(../img/vk-ico.png) center center no-repeat;
    display: block;
    width: 24px;
    height: 14px;
}

.hidden-nav {
    width: 206px;
    height: 500px;
    position: absolute;
    top: 0;
    left: 290px;
    background: black;
}

and JsFiddle LINK

My sidebar must be 100% height and fixed, with overflow-y: auto May be I can do it with js, or any other solution? Please, help. Thanks.

Answer 1

I didn't use your css/html structure, but here is a rough idea of what you want:

1. Fixed position of vertical nav
2. Hover over the parent and get show the child ul
3. If the page is too short, the scrolling is auto so that both the parent and the child items can be accessed.

DEMO: http://jsbin.com/pudiy/1/edit

---

CSS (careful these are demo only css and are not specific)

html,
body {
    padding: 0;
    margin: 0;
    height: 100%;
}

nav {
    width: 300px;
   box-sizing:border-box;
   padding:20px 0;
    height: 100%;
    background: #000;
    position: fixed;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

li {
    padding: 0;
    margin: 0;
}

.main li a {
    color: #fff;
    display: block;
    padding: 8px 20px;
}

.main li:hover {
    background: red
}

.main ul {
    display: none;
}

nav:hover {
    overflow: auto;
    background: #000;
    z-index: 1000; /* this may not be necessary */
}

.main li:hover ul {
    top: 0;
    padding:20px 0;
     box-sizing:border-box;
    height:100%;
    display: block;
    position: fixed;
    left: 270px; /* if you put it at 300 the scrollbar will break the hover */
    width: 200px;
    overflow: auto;
    bottom: 0px;
    z-index: 99;
    background:#333;
}

---

HTML

 <nav>
    <ul class="main">
      <li><a href="#">Link</a></li>
      <li><a href="#">Hover Me 1</a>
      <ul>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child last</a></li>
       </ul>
     </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    <li><a href="#">Hover Me 2</a>
      <ul>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child</a></li>
      <li><a href="#">child last</a></li>
       </ul>
     </li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      </ul>
  </nav>

NOTES:

This is not responsive, you will need to set the min-widths and structure your mobile menu differently. The :hover is not recognized on touch. IOS will turn it into a click, but Andriod I don't know, I tend to use clicks for both touch and non touch devices so I can avoid pain.

Answer 2

HTML

<section id="container">
     <aside id="leftwrap"> 
         <section id="hovertest">hover over me</section>
         <section id="hoverbelow">something below</section>
    </aside>
    <main id="content">
        <section id="overlay"></section>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean iaculis quam in ullamcorper egestas. Maecenas aliquet tempus ligula, at vulputate libero mattis at. In

    </main>

<section>

Jquery

$('#hovertest').on('mouseenter',function(){
   $('#overlay').css('display','block');
});

$('#overlay').on('mouseleave',function(){
   $(this).hide();    
});

$('#hoverbelow').on('mouseenter',function(){
   $('#overlay').hide(); 

});

here's the Fiddle