Dropdown Ubermenu Issue

HTML & CSS
1

Hi Guys,

Having some issues with this Dropdown menu plugin.

I can’t seem to find out why the width of Living is so wide?

http://www.chapleaubrand.ca/2014/

Thanks,

Mike

2

You set up the menu weirdly. The dropdown <ul> actually is static content (not absolutely positioned) so it’s seen as a child of the <li> and it’s stretching to accomodate it. You probably copied code wrong. Or missed copying code.

3

It’s this line that’s causing it. The selector will match for both lists.

#navigation ul {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
	height: 40px;
	margin-left: 370px;
}

add this and it should give you what you want

#navigation ul ul {margin-left: 0px}
4

Thanks,

Got it solved now!

Another issue on this page…

http://www.chapleaubrand.ca/2014/living/

I have my widget class with a padding-bottom: 75px but for the Pages widget it doesnt give me the padding need some space after the Pages list and before the title of Recent News

Thanks,

Mike

5

Padding is working for me in Chrome. The 75px is defienitely applied and I see a clear space. Did you fix this already?

6

Yea got it fixed but having some issues working out the kinks.

Because its a list with a child list the border-bottom wasnt working so tried another way but didn’t seem to work. If I could get the Pages section to look like the Recent News that would be ideal.

Thanks

7

I think you’ve got some conflicting issues. You’ve got the text-decoration on the ul li ul li a (fyi ul ul a would work as well), and you’re putting a border on top and bottom. Either remove the text-decoration, or remove the borders. Pick one.

I’d also set the list-type-type to none for ul li and ul ul li

8

Hi Dave,

I’ve changed that now, so should look correct for the Recent News section now just need to figure out how to do the Pages section of the sidebar.

9

The only difference is that the extra borders on a few elements.

If that was what you wanted…then

    .page_item_has_children li:first-child {
border-top: 1px solid rgb(59,110,143)
}
ul.children li:last-child {
border-bottom: 0;
}

Those needed to be added in.

10

Your list is odd - you’ve got a sub-list in there for some reason. I think you actually want this:

<ul>
    <li class="page_item page-item-141 page_item_has_children current_page_item"><a href="http://www.chapleaubrand.ca/2014/living/">Living</a></li>
    <li class="page_item page-item-159"><a href="http://www.chapleaubrand.ca/2014/living/community/">Community</a></li>
    <li class="page_item page-item-163"><a href="http://www.chapleaubrand.ca/2014/living/education/">Education</a></li>
</ul>
11

[OffTopic]

list-style-type is inherited, so it only needs to be declared in the “ul”, unless you are overriding the “ul” setting.
[/OffTopic]

12

Hi @DaveMaxwell

Unfortunately can’t do that as its using Wordpress to create that list and Living is a parent of Community and Education.

@RyanReese thanks! Thats almost there just some spacing issues which I believe I can solve from here I hope.

13

@DaveMaxwell I found that odd too. I almost thought he was trying to do a dropdown at some point since he had that sub-list in there haha. Figured he knew what he was doing though so I ignored it

@mbond5 Come back if you have questions. You’re welcome.

14

Thanks guys! All is good now.