Better / Cleaner way to do this?

HTML & CSS
1

Hi,

I’m trying to work out a better way to do the following:


#menu ul,
#menu ul li ul,
#menu ul li ul li ul,
#menu ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul ,
#menu ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul,
#menu ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul li ul

{
	margin-left: 0;
	padding-left: 0;
	display: none; /* hide them to start with */
	list-style-type: none;
}

#menu li,
#menu li > li,
#menu li li li,
#menu li li li li,
#menu li li li li li,
#menu li li li li li li,
#menu li li li li li li li,
#menu li li li li li li li li,
#menu li li li li li li li li li,
#menu li li li li li li li li li li,
#menu li li li li li li li li li li li,
#menu li li li li li li li li li li li li,
#menu li li li li li li li li li li li li li,
#menu li li li li li li li li li li li li li li,
#menu li li li li li li li li li li li li li li li

 {
	padding-left: 27px; /* 18 */
	min-height: 30px;
}

Its for a sitemap feature I’ve written, and it can have up to 10 children inside each element (all whome need the same CSS applied to them). Is there a better way to do this?

TIA

Andy

2

BTW, very neat formatting…but WHY???

The C in CSS stands for cascading, selectors cascade rules down in order of specificity.

all you really need ( if in deed you are applying the same rule to all the LIs and all the UL within #menu) is this:


#menu ul{
	margin-left: 0;
	padding-left: 0;
	list-style-type: none;
}

#menu li {
	padding-left: 27px; /* 18 */
	min-height: 30px;
}

/* I would also do this since I think you are trying to make a drop down. if, for some reason,  you were trying to hide ALL ULs to start with  ( or if #menu  is the root UL) just put this declaration with the original UL rules*/
#menu li>ul{	display: none; /* hide them to start with */}

BTW, #menu li>li would never happen as an LI can only be a child of a UL or OL.

hope that helps

3

Hi,

Eugh, why didn’t that work the last time I tried it! Worked perfectly this time - thanks :slight_smile:

Regarding all the sub-elements… these don’t actually exist to start with (they are loaded into the page with an AJAX call… due to the fact there are gonna be thousands of pages that it needs to store, so it wouldn’t be practical to have them all loaded at the start.

Thanks again - maybe I should have taken my coffee break :wink:

Andy