CODEWITHSUNDEEP
htmlcss
Fizor
Fizor

Reputation: 1530

In a bit of a CSS Pickle

I am in the process of making a CSS drop down menu and CSS has just thrown me a curve ball.

Problem:

When I hover over my "Tools" section, the submenu is a few pixels off my main menu.

Problem CSS:

#menubar ul li {
    font:bold 12px/18px sans-serif;
    display:inline-block;
    position:relative;
    padding:10px 35px;
    /*Change this to 15px 35px;and it will work*/
    background:#666;
    cursor:pointer;
    color:#fff;
    -webkit-transition:all 0.2s;
    -moz-transition:all 0.2s;
    -ms-transition:all 0.2s;
    -o-transition:all 0.2s;
    transition:all 0.2s;
}

I have broken it for the purpose of this question (And because I do not want to use 15px padding, I want to use 10px)

Here is a FIDDLE so you can see exactly what I am talking about if I did not explain this correctly.

I have tried Margin, Top with negative values, all sorts of other things and cannot get this to stay glued to the main menu.

Please guide me in fixing this...

EDIT Thank you ALL... This has been solved! :) +1 for all.

Upvotes: 2

Views: 103

Answers (5)

Ishan Jain
Ishan Jain

Reputation: 8171

In to CSS class #menubar ul li ul you define top:48px;.

#menubar ul li ul {
    top:48px;
}

try to set top:38px;. 

#menubar ul li ul {
    top:38px;
}

Upvotes: 1

Moob
Moob

Reputation: 16184

Just set top to 100% then it doesn't matter how big the parent is and will cope if the user resizes the text:

#menubar ul li ul {
    padding:0;
    position:absolute;
    top:100%;
    ...
}

http://jsfiddle.net/65ZAv/6/

Upvotes: 1

Albzi
Albzi

Reputation: 15609

Fiddle

In this CSS rule, you have this:

#menubar ul li ul {
    top:48px;
}

However, you should have this:

#menubar ul li ul {
    top:38px;
}

That should fix it with the existing code you have and not create any new code.

Alternatively, set it to 100% instead, as it will take the % of the ul above it, pushing it always the correct height if you change the ul's design in future.

Upvotes: 4

Rohit
Rohit

Reputation: 324

I think the problem is in following code

#menubar ul li ul {
    padding:0;
    position:absolute;
    top:48px;    //Change this value and it will glued to upper menu

......

Upvotes: 1

SaturnsEye
SaturnsEye

Reputation: 6499

add top:-10px; to #menubar ul li

EXAMPLE

Upvotes: 1

Related Questions