Question

I created a suckerfish drop down menu. Here is the link to my website

As you may notice there is a weird margin on the left of the drop down text that appears when hovering over a menu item. What is even weirder is that I tried to recreate the same error on jsfiddle but was unable to do so which leads me to believe that the error may not be with the drop-down.

Answer 1

In your website, margin is not issue insted just apply padding: 0; to parent ul element

#nav ul { 
   ....
   padding: 0; /* or what ever you need */
}

The issue was related to User Agent (browser) predefined stylesheet

W3 Org. quote:

Each User Agent (UA, often a “web browser” or “web client”) will have a default style sheet that presents documents in a reasonable — but arguably mundane — manner

So this means you can not rely on predefined stylesheet values. If it is ok in Firefox it may not be in IE (depends which browser you use for developement). My recommendation is to add at the top of your stylesheets (first to load in page) one of reset.css files which you can find on internet

Example: http://meyerweb.com/eric/tools/css/reset/