Drop Down menu not positioning properly when installed in blogger

[DDS]

1) Script Title: Drop Down Tabs (5 styles)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I have installed the above menu on my blogger. I included the CSS in the template via Designer->Advanced->Add CSS. I hosted the js file on yourjavascript.com (I tried with dropbox first but it didn't work, any suggestions how to use dropbox to properly host js files?) and the images uploaded in a post. I added the menu as a html/Javascript widget on the homepage.
It works!!!
It only needs a bit of tweaking:
1) biggest problem: the dropdown menu isn't connected to the toolbar, is moved to the right and shows lower on the page. I tried in Safari, Chrome, Opera and Firefox and it is the same. I am on a Mac and can't test it on IE (if someone else can, I would appreciate!) When I look at the file from deamweaver it looks fine. I am assuming it has to do with blogger, but I do not know how to fix it. Any suggestions?
2) Can I center the tabs on the page?
3) It doesn't remember what tab it is on; I know this is mentioned at the end of the instructions but I do not know how to do this in blogger.

The link: http://www.mayaserghi.com


Many thanks!

DDS

[djr33]

Mod's note: DDS, your post was flagged by our automatic spam filtering system (which is sometimes over-protective-- you didn't do anything wrong), but it has now been approved. It's unclear exactly what triggered it, but if it happens again (if you reply and don't see the post) then that means the filter caught it again-- and one of the mods will approve it as soon as we see it. Thanks for your patience, and now someone will be able to answer your question.

[Beverleyh]

I'm not sure about point 1 and I can't do much to investigate at the moment due to being on iPhone, but I might be able to help on points 2 and 3.

Point 2 - You should be able to change the tabs ul margin CSS to "margin:0 auto;" - that's the usual way of centering. If that doesn't work, put that line back to "margin:0;" and try manipulating the container glowmenu div instead - give it this CSS;
display:table;
margin:0 auto;its a technique that is described here : http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

Point 3 - As far as I can tell, there is no "remember-last-open-tab" cookie feature to the current script. I think what you're referring to is the rudimentary auto tab open feature based on the page URL. That will attempt to open the correct tab based on the page that is currently in view but not remember the last tab viewed. If that's a feature you want, might I suggest the Tab Content Script v2.2 instead : http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm
Once you remove the surrounding border it will look just like the other tab menu you've used but the features seem more in line with what you describe.

[vwphillips]

<div style="position:relative;left:200px;top:200px;width:300px;" > <!-- nest the main menu in a DIV to make positioning easier -->

<div id="colortab" class="ddcolortabs" style="width:300px;" > <!-- best to give this a controlled width -->
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>
</ul>
</div>

<div class="ddcolortabsline" style="width:300px;">&nbsp;</div> <!-- best to give this a controlled width -->

</div>



I will need to see your page to help more