Firefox WordPress Menu Dropdown Issue

  • Resolved ekdor

    (@ekdor)


    10 years, 5 months ago

    For some reason in FirFox on my Mac and PC and Explorer on my PC I always get the drop down menu appear on the edge of the screen as though it were floated.

    Ive had this issue for a while and worked on it several times. I can’t work out what the issue is. Does anyone have any solid ideas. I’ve tried a lot of css trial and error, tried different permutations of wp_nav_menu( array and Function code. The best I can do when messing with this is to cause all browsers to do it.

    I seems to be related to ul.dropdown ul { position: absolute; }

    I can’t provide you a link to the site shown in the screenshot bellow. But I can give you a link to a different site. This issue is occurring with all my sites.

    Website showing the issue

    Screenshot of the issue

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Assuming this theme is yours have you actually given the dropdown menu left/top/bottom/right positioning?

    Thread Starter ekdor

    (@ekdor)

    Yes it is mine. Built from scratch. Hmm can you have a look for me? I’ll do a reply with the full CSS I used. I ask because I’ve driven myself crazy going over my menu stylesheets.

    Thread Starter ekdor

    (@ekdor)

    .menu-bar {
	width: 1000px;
	height: 64px;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	text-align: center;
	padding-top: 21px;
	margin-top: -64px;
	margin-bottom: -21px;
	overflow: visible;
	border-radius: 1px;
	position: relative;
	z-index: 2;
}

.menu-bar a {
	text-transform: capitalize;
	color: rgba(0,0,0,0.75);
	font-size: 18px;
	font-weight: normal;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
}

.current-menu-item a {}

ul.dropdown {
	list-style: none;
	width: 100%;
}

ul.dropdown li {
	display: inline;
	position: relative;
}

ul.dropdown li:hover a {
	padding: 12px 15px 11px 15px !important;
}

ul.dropdown a {
	padding: 0px 15px 0px 15px;
}

ul.dropdown a:hover {
	color: rgba(0,0,0,0.75);
	background: linear-gradient(	#ffffff 0%,
											rgba(255,255,255,0) 100%	);
}

ul.dropdown li ul a {
	display: block;
	font-size: 14px;
	margin: 0px 0px 0px 0px !important;
}

/* I think the issue has something to do with this */

ul.dropdown ul {
	text-align: left;
	position: absolute;
	list-style: none;
	width: 250px;
	z-index: 500;
	margin: 0px 0px 0px 0px !important;
}

ul.dropdown li ul {
	background: url('images/menu-dropdown-bot.png') no-repeat bottom,
					url('images/menu-dropdown-top.jpg') no-repeat top,
					url('images/menu-dropdown-bkgrnd.png') repeat-y;
	margin: 8px 0px 0px 0px !important;
	box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.35);
	border-radius: 1px;
}

ul.dropdown ul ul {
	top: 0px;
	left: 100%;
}

ul.dropdown ul li {}

ul.dropdown li * a:hover {
	background: url('images/menu-dropdown-h.png') no-repeat;
	margin: 0px 0px 0px 0px !important;
	font-size: 14px;
}

ul.dropdown ul, ul.dropdown li:hover ul ul, ul.dropdown ul li:hover ul ul { display: none; }

ul.dropdown li:hover ul, ul.dropdown ul li:hover ul, ul.dropdown ul li ul li:hover ul { display: block; }
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Look at using left positioning https://developer.mozilla.org/en-US/docs/Web/CSS/position – Maybe you accidentally skipped a step in a tutorial for styling a menu?

    Thread Starter ekdor

    (@ekdor)

    It’s possible. The first one I did was based on a tutorial. All the others followed from what I did. Hence the propagation of the issue through my other sites.

    The position absolute used in the ul.dropdown ul style causes in most browsers puts it where I want it. But if I change or remove it all the other browsers act like FireFox and IE do. Makes me think FF and IE are not using it. I tried making it important but no change. I might be getting distracted by that tho. NOTE: I have trie trial and error removals to identify the differences. But this is the only thing that seems to visually splits the browsers.

    I might spend tonight starting it from scratch using my own understanding. Adding bit by bit keeping an eye on FF. Just hopping not to have to. Lots of other work to do.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t understand your reluctance to use the left position:

    ul.dropdown ul {
 left: 0;
}

    Thread Starter ekdor

    (@ekdor)

    It’s just that I didn’t understand. Sorry.

    Thread Starter ekdor

    (@ekdor)

    Great, thank you. That was what I needed. Fixed.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Firefox WordPress Menu Dropdown Issue’ is closed to new replies.