MyBB Community Forums

Hello, I am trying to make a theme that is related to my store theme and I have come across a problem. I was messing around with little chunks of CSS and I just realized that the user dropdown menu thing is being weird. On the website (skyisles.com) when you log in and try to go to the user cp or private messages, you can't see the drop down because it is under everything else. How can I bring it up to the front? I tried setting the z-index to -1 and position to relative but when I do that, the dropdown just stops showing. Thanks!

.usermenu {
  	float: right;
  	position: relative;
  	list-style: none;
  	padding: 0;
  	margin: 0;
  	font-size: 14px;
}

.usermenu > li {
  	height: 48px;
}

.usermenu > li > a {
  	display: block;
  	height: 48px;
  	line-height: 48px;
  	color: #97B4CD;
  	padding: 0 15px;
  	text-shadow: 1px 1px 0 #467f01;
  	font-weight: bold;
	transition:.5s;
	line-height: 60px;
}

.usermenu > li > a:hover {
	color: #fff !important;
}

.usermenu > li > ul {
    z-index: -1; position:relative;
	box-shadow: 0 3px 3px rgba(0,0,0,.2);
  	display: none;
  	list-style: none;
  	width: 200px;
  	background: #FFF;
  	padding: 0;
  	border-radius: 3px 0 3px 3px;
  	border: 4px solid rgba(0, 0, 0, 0.05);
}

.usermenu > li > ul:before {
  	content: "";
  	width: 0;
  	height: 0;
  	border-style: solid;
  	border-width: 0 7.5px 10px 7.5px;
  	border-color: transparent transparent #ffffff transparent;
  	position: absolute;
  	top: -10px;
  	right: 11px;
}

.usermenu > li > ul > li > a {
  	text-align: left;
  	display: block;
  	padding: 7px;
  	border-bottom: 1px solid #e9e9e9;
  	font-weight: bold;
}

.usermenu > li > ul > li:last-child > a {
  	border-bottom: 0;
}

.usermenu:hover > li > ul {
  	display: block;
  	position: absolute;
  	right: 0;
  	top: 48px;
}

.usermenu:hover > li > ul > li > a:hover {
  	background: #cfd8dc;
}

.usermenu > li > ul > li:first-child a {
  	border-radius: 3px 3px 0 0;
}

.usermenu > li > ul > li:last-child a {
  	border-radius: 0 0 3px 3px;
}

set this way
z-index: 9999999999;

this way it will be in front

(2017-03-26, 05:52 PM)subzr1 Wrote: [ -> ]set this way
z-index: 9999999999;

this way it will be in front

That does not work.

pls give a test account so me or someone else have a look

(2017-03-26, 06:16 PM)subzr1 Wrote: [ -> ]pls give a test account so me or someone else have a look

Test account:
Username: test
Password: Skyisles1

(2017-03-26, 06:19 PM)fishpicklepaste Wrote: [ -> ]

(2017-03-26, 06:16 PM)subzr1 Wrote: [ -> ]pls give a test account so me or someone else have a look

Test account:
Username: test
Password: Skyisles1

ok
its a bit messy code there
its not on global.css
probably in header template 
search for this class

.navigation {
    background: #2f6a9c;
    height: 60px;
    border-bottom: 0px solid #607d8b;
    box-shadow: 2px 2px 3px rgba(0,0,0,.15);
    clear: both;
    border-radius: 3px;
    width: 1000px;
    margin: -29px auto 29px;
    position: relative;
    left: auto;
    right: auto;
    overflow: auto;
}

 delete the last line and, save it and it should be fine