CODEWITHSUNDEEP
htmlcss
Julez
Julez

Reputation: 1369

When i hover css menu horizontal scrollbar appears

Like the title says.

I made a css hover menu in the <body>, and i always want it in the top right corner of the browser. But when i hover the menu the horizontal scrollbar appears down in the browser.

Someone know why ?? and how to solve it ?

Here a link with a example: http://jsfiddle.net/pdbYz/24/

Upvotes: 2

Views: 1876

Answers (4)

matsolof
matsolof

Reputation: 265

In the HMTL code on http://jsfiddle.net/pdbYz/24/, if you change the line

<div class="drop_down_block" id="sub_menu">

to

<div class="drop_down_block" id="sub_menu" style="position:fixed; right:0px;">

the scrollbar will not show when you hover over Menu.

You still need to figure out where to put the added CSS in your CSS file, but I guess you can do that pretty easily. If not, let me know and I will try and add more info.

Upvotes: 1

Sven
Sven

Reputation: 13296

div#sub_menu div.sub_menu_top {
    width:250px;
    height:13px;
    background-image:url(../images/arrow_up.png);
    background-repeat:no-repeat;
    background-position:109px bottom;
    position:absolute;
    top:-13px;
}

Remove position:absolute; and the scrollbar disappears.

Upvotes: 1

pwolaq
pwolaq

Reputation: 6381

it's because of submenu's box-shadow, you have to clip it somehow

EDIT: it is because of <div class="sub_menu_top"></div>, you have to set it's position to right:0

Upvotes: 2

mika
mika

Reputation: 1451

Your overflowing your dirty sub menu... try that :

div#sub_menu div.sub_menu_top {
    width:150px;
}

http://jsfiddle.net/pdbYz/25/

Upvotes: 3

Related Questions