CODEWITHSUNDEEP
css
user2343997
user2343997

Reputation: 15

Dropdown moving all contents under it?

I have a dropdown that will show some content.

<ul class="menus" style="">
    <li>hey</li>
</ul>

And this is the css:

.menus {
    width: 607px;
    background-color: white;
    border-bottom: solid 1px #9f9f9f;
    border-left: solid 1px #9f9f9f;
    border-right: solid 1px #9f9f9f;
    bottom: 20px;
    margin: 0;
    position:relative;
}

.menus li {
    list-style: none;
    display: block;
    padding: 15px;
    border-bottom: solid 1px #d6d6d6;
}

.menus li:hover {
    background-color: #71bfdb;
    color: white;
    border-bottom: solid 1px #3fb7d3;
    border-top: solid 1px #3fb7d3;
    text-decoration: none;
}

.menus li a:hover {
    text-decoration: none;
}

Whenever the dropdown opens, All of the content moving to the bottom, depending on how long the list is.

Question

How can I prevent this? If I put position absolute, the whole dropdown will go crazy, like move positions, not like I wanted.

Upvotes: 0

Views: 1778

Answers (1)

Ennui
Ennui

Reputation: 10190

Use position: absolute to remove it from the flow of the page (relative means it is still in the page flow, which is what causes it to push content after it down).

You can change where an absolutely positioned element shows up by using the top, bottom, left and right css properties (i.e. top: 0px; left: 10px;). These pixel values are relative to the first parent element with position: relative, so if you relatively position the parent element it should be simple to get it displayed in the appropriate place on the page.

That should address your concern of absolute positioning causing it to 'go crazy' as you put it!

Upvotes: 2

Related Questions