CODEWITHSUNDEEP
csstwitter-bootstrap
George B.
George B.

Reputation: 312

Navigation hover in bootstrap

When I'm hover on second "li" I want to see some div. I see this hidden div on bottom, but I want to see it on right side, You can see on third screen what I want to do.

CSS:

#categories {
    display: none;
    left: 450px;
    top: 150px;
    height: 200px;
    width: 200px;
    background-color: red;
    clear: both;
}
.categories:hover #categories {
    display:block;

}

HTML:

<li class="categories">
<a href="#" class="menu"><img src="assets/img/icons/folders.svg" alt="" class="menu-icon"> მიმართულებები</a>
<div id="categories">some thing</div>
</li>

screen 1: before hover

screen 1: before hover

screen 2: on hover

screen 2: after hover

screen 3: what I want to see

screen 3: what I want to see

Thank you!

Upvotes: 0

Views: 27

Answers (1)

komal
komal

Reputation: 135

Through below given css code , you can achieve the desired results

#categories {
display: none;
height: 200px;
width: 200px;
background-color: red;
margin-left:26%;
margin-top:-4%;
}
.categories:hover #categories {
display:block;
}

link to its fiddle is http://jsfiddle.net/6d0n80mt/11/

Upvotes: 1

Related Questions