Adding dropdown to the top menu

[razec]

I've been trying to integrate a dropdown to the top menu (the section "Welcome, user Notifications My Profile ... etc). I've added a dropdown successfully to the navbars on my site, but the one I'm trying to add to this section doesn't seem to format properly. The link itself looks ok, but when the submenu expands the spacing on the cells is all out of whack. I'm doing this in my header template, and this is an excerpt (including my latest attempt to get the menu working):

<div class="above_body"> <!-- closing tag is in template navbar -->
<div id="header" class="floatcontainer doc_header">
	{vb:raw ad_location.ad_header_logo}
	<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>
	<div id="toplinks" class="toplinks">
		<vb:if condition="$show['member']">
			<ul class="isuser">
				<li><a href="login.php?{vb:raw session.sessionurl}do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}" onclick="return log_out('{vb:rawphrase sure_you_want_to_log_out}')">{vb:rawphrase log_out}</a></li>
				<vb:if condition="$show['registerbutton']">
				<li><a href="register.php{vb:raw session.sessionurl_q}" rel="nofollow">{vb:rawphrase register}</a></li>
				</vb:if>				
				<li><a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase control_panel}</a></li>
				<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>
				<!-- NEW MENU -->
				<li class="popupmenu nonotifications" id="userforms">
					<a href="javascript://" class="popupctrl">{vb:rawphrase user_forms_menu_title}</a>
					<ul class="popupbody popuphover">
						<li><a href="{vb:rawphrase user_forms_first}">{vb:rawphrase user_forms_title_first}</a></li>
						<li><a href="{vb:rawphrase user_forms_second}">{vb:rawphrase user_forms_title_second}</a></li>
						<li><a href="{vb:rawphrase user_forms_third}">{vb:rawphrase user_forms_title_third}</a></li>
					</ul>
				</li>
				<!-- END NEW MENU -->
				<vb:if condition="$notifications_total">
				<li class="popupmenu notifications" id="notifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}: <span class="notifications-number"><strong>{vb:raw notifications_total}</strong></span></a>
					<ul class="popupbody popuphover">
						{vb:raw notifications_menubits}
					</ul>
				</li>
				<vb:else />
				<li class="popupmenu nonotifications" id="nonotifications">
					<a class="popupctrl" href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase your_notifications}</a>
					<div class="popupbody popuphover">
						<p>{vb:rawphrase no_new_messages}</p>
						<p><a href="private.php{vb:raw session.sessionurl_q}">{vb:rawphrase inbox}</a></p>
					</div>
				</li>
				</vb:if>
				<li class="welcomelink">{vb:rawphrase welcome_x_link_y, {vb:raw bbuserinfo.username}, {vb:link member, {vb:raw bbuserinfo}}}</li>
			</ul>

Now I'm pretty sure that the ID I specified on the <li> tag is probably part of the problem, but I'm not sure where all of this stuff goes back to and what else I'd have to edit/add to make this work. I tried searching around for information on this but I didn't have any luck. Any recommendations on how I can do this properly?

[MrMister]

I spent about 30 minutes working on this last night and was able to get a dropdown, and it all looked good, but it was out of alignment when it opened. I edited vbulletin css and chrome css as well as the header template.

If anyone has a good solution I would love to see it as well.

[razec]

MrMister: How did you get the content of your dropdown to look good? Mine's out of alignment as well as having the dropdown contents look like crap.

[MrMister]

I copied all of the css for the classes: popupmenu & nonotifications and made my menu point to my new CSS. I did not save it as it did not work 100%.

[MrMister]

Here is a simple solution for this:

Find in header template:

<li><a href="{vb:link member, {vb:raw bbuserinfo}}">{vb:rawphrase your_profile}</a></li>

Under that paste in:

<li class="popupmenu nonotifications" id="Site_Switcher">
					<a class="popupctrl" href="usercp.php">Switch Site</a>
					<div class="popupbody popuphover" style="margin-left:100px;">
						<p><a href="http://nyspeed.sagemind.net">NYSpeed.com</a></p>
						<p><a href="http://son240.sagemind.net">SON240sx.org</a></p>

					</div>
</li>

Adjust the "margin-left" value to get your drop down aligned properly, and change the id to whatever you want it to be.

Here is what this produces:

[razec]

That works perfectly, thanks.