MyBB Community Forums

Forum: http://www.mysticdev.com/forum.php
Account: testaccount
Testing123

I'm trying to make links in #panel to float on the right hand side, be as tall as the #panel div, and flow well with the theme. I also want to have a drop down when hovering over certain links. If you log in, you can see that I have the drop down working, but it's not appearing as it should.

So you don't have to look for the code, here it is.

header_member template

<ul id="button_container">
		<li><a href="{$mybb->settings['bburl']}/private.php">Messages</a> {$mybb->user['pms_unread']}</li>

		<li>Actions
			<div id="actions_content" class="button_hide">
				<a href="{$mybb->settings['bburl']}/search.php?action=getnew">{$lang->welcome_newposts}</a>
				<a href="{$mybb->settings['bburl']}/search.php?action=getdaily">{$lang->welcome_todaysposts}</a>
			</div>
		</li>

		<li>User
			<div id="user_content" class="button_hide">
				<a href="#" onclick="MyBB.popupWindow('{$mybb->settings['bburl']}/misc.php?action=buddypopup', 'buddyList', 350, 350);">{$lang->welcome_open_buddy_list}</a>
				<a href="{$mybb->settings['bburl']}/usercp.php">{$lang->welcome_usercp}</a>
				{$modcplink}
				{$admincplink}
				<a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a>
			</div>
		</li>
	</ul>

global.css

#button_container {
        width: 320px;
        height: 100%;
        float: right;
}

#button_container li {
        display: inline;
        list-style: none;
}

.button_container li:hover {
	background: rgba(235, 235, 235, 0.95);
}

.button_hide {
	margin:4px auto;
	float:left;
	position:absolute;
	left:-999em;
	text-align:left;
	padding:10px 5px 10px 5px;
	border:1px solid #777777;
	border-top:none;
	background: rgba(235, 235, 235, 0.95);
	-moz-border-radius: 0px 5px 5px 5px;
	-webkit-border-radius: 0px 5px 5px 5px;
	border-radius: 0px 5px 5px 5px;
	width: auto;
}

#button_container li:hover #actions_content,
#button_container li:hover #user_content {
	left: -1px;
	top: auto;
}

bump.

bump.

bump.