Dropdown navigation

  • Hi,

    I’m using the magazine basic theme. But have a problem with my dropdowns.

    Navigation contains 5 links, 4 have a dropdown, with another dropdown inside.
    So the first dropdown appears below the main navigation, and the deeper level to the right of the first dropdown.
    That’s perfect, but for the last of the main navigation, I need the deepest level dropdown appear on the left side. Otherwise it goes partially out of screen.

    I tried this:

    #site-navigation li:last-child li li {
	right: 463px;
	}

    This bring the whole list at the position I want it to be, left side, but the background stays on the right side.

    Unfortunately I’m testing on MAMP, so I can not provide an URL.

    Basically, I need the “ul ul ul” of the last item to appear on the other side.
    Anyone an idea what I’m doing wrong?

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter andreasTypo

    (@andreastypo)

    EDIT: SCREENSHOT EXAMPLE

    Hey. Could you perhaps provide a screenshot and highlight the drop down menu you are referring to?

    Edit: You read my mind. ??

    Thread Starter andreasTypo

    (@andreastypo)

    Just posted it

    Thanks ??

    Thread Starter andreasTypo

    (@andreastypo)

    btw, this is the code snippet for the entire ul

    #site-navigation ul ul ul {
		opacity: 0;
		position: absolute;
		left: -9999px;
		width: 245px;
		z-index: 99999;
		background: url(library/images/subnav_sub_bg.png) no-repeat top left;
		-moz-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
		-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
		box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
		}

    Hey, sorry for the late reply. Try targetting the <ul> as follows:

    #site-navigation ul li:last-child li:hover > ul {
left: 15%;
}

    Think you’ll have to position it using left in order to override the original CSS.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Dropdown navigation’ is closed to new replies.