CODEWITHSUNDEEP
htmlcss
joschuck
joschuck

Reputation: 413

css dropdown menu at wrong position

I have a problem with the positioning of a pure css dropdown menu. You can find the website at: link to website

When you hover of "Tutorials" (im not really doing any but it is for learning) and "Blog", you see that the dropdown menu position is not directly under the tab, it is moved to the right.

How can I place the dropdown menu under the tab? Thanks for the help in advance.

Upvotes: 2

Views: 4127

Answers (3)

Marcio Mazzucato
Marcio Mazzucato

Reputation: 9295

Try to edit the file "main.css", change this:

ul#nav li ul{
position:absolute;
display:none;
}

For this:

ul#nav li ul{
position:absolute;
display:none;
padding:0;
margin:0;
}

I think it will solve your position problem.

Upvotes: 2

topoftheforts
topoftheforts

Reputation: 339

It happens because your browser automatically adds custom CSS to some elements, like "ul" tags in this case. I'm using Chrome and I see this style for all the sub-lists: -webkit-padding-start: 40px; So just add this css:

ul#nav li ul{
padding-left:0;
}

Upvotes: 0

Moin Zaman
Moin Zaman

Reputation: 25445

You need to reset the browser defaults for margin's, padding's etc. on elements.

The minimum you could do at the top of your CSS is:

html,body,ul,li,p { margin:0;padding:0 }

Look up http://cssreset.com for more options.

Upvotes: 0

Related Questions