Css styling of unordered lists

<li class=“submenu”><a href=“#”>mysite</a>
<ul class=“level2”>(apply different style to this one)
<li><a href=“#”>toys</a></li>
<li><a href=“#”>cars</a></li>
<li><a href=“#”>trucks</a></li>
<li><a href=“#”>wagons</a></li>
</ul>
</li>

<li class=“submenu”><a href=“#”>cooks</a>
<ul class=“level2”>
<li><a href=“#”>toys3a</a></li>
<li><a href=“#”>cars4b</a></li>
<li><a href=“#”>trucks34d</a></li>
<li><a href=“#”>wagonsse</a></li>
</ul>
</li>

<li class=“submenu”><a href=“#”>campers</a>
<ul class=“level2”>(apply different style to this one)
<li><a href=“#”>toyssx</a></li>
<li><a href=“#”>cars12e</a></li>
<li><a href=“#”>trucks234s</a></li>
<li><a href=“#”>wagonssxzq</a></li>
</ul>
</li>

The unordered list above is generated by a category generator(php script) and results in a drop down menu,the class names can’t be changed and I would like to apply different styles to the ul’s using css, at the present my style is applied to all.Is there a way to do this?

Hi chas1. Welcome to SitePoint. :slight_smile:

Do you mean that you want each sub list to appear differently from the others? Or just all of the sub lists to be different from the main UL?

If the former, then you could perhaps try something like this:

li ul {} [styles for the first sub ul]
li + li ul {} [styles for the first sub ul]
li + li + li ul {} [styles for the third sub ul]

Won’t work on IE6, but who cares?

CSS3 will offer an even better way, but that’s too unreliable at this stage.

Thanks for the quick reply,the html for this menu is dynamicly generated by a php script and I have no access to the html to change or add a second class therefore any changes to the ul.level2 can only be made thru my stylesheet using css or jquery and I would like to stick with css option,the two ul’s I would like to change have a coment enclosed in brackets will your styles do this?

Yes, they provide a way to set styles for each sub ul. It’s not hugely efficient, but will work. Someone may have a better idea, though.

Ralph I will implement your suggestion and will get back to you with results asap and thanks very much for your interest and suggestions but most of all your quick and courteous replies.

.menu li ul.level2 {

margin:4px auto;  
position:absolute;  
left:-999em; /* Hides the drop down */  
text-align:left;  
padding:10px 5px 10px 5px;  
border:1px solid #777777;  
border-top:none;  

/* Gradient background */  
background:#F4F4F4;  
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  

/* Rounded Corners */  
-moz-border-radius: 0px 5px 5px 5px;  
-webkit-border-radius: 0px 5px 5px 5px;  
border-radius: 0px 5px 5px 5px;  

/* Drop Shadows */
-moz-box-shadow: 1px 2px 3px #727272;
-webkit-box-shadow: 1px 2px 3px #727272;
box-shadow: 1px 2px 3px #727272;
}

.menu li + li ul.level2 {

margin:4px auto;  
position:absolute;  
left:-999em; /* Hides the drop down */  
text-align:left;  
padding:10px 5px 10px 5px;  
border:10px solid #777777;  
border-top:none;  

/* Gradient background */  
background:#F4F4F4;  
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  

/* Rounded Corners */  
-moz-border-radius: 0px 5px 5px 5px;  
-webkit-border-radius: 0px 5px 5px 5px;  
border-radius: 0px 5px 5px 5px;  

/* Drop Shadows */
-moz-box-shadow: 1px 2px 3px #727272;
-webkit-box-shadow: 1px 2px 3px #727272;
box-shadow: 1px 2px 3px #727272;
}

This is css to target 2nd ul doesn’t work applies styling to all,I have also uesd this on test site at url:Zen Cart!, The Art of E-commerce. I also tried ul.level2: n-of-type(3) doesn’t work however if I use li:n-of-type(odd)border-bottom:1px dashed; I am able to apply style to odd li’s.what am I doing wrong?
Thanks
Charles

Hmm, yeah, my code was based on you having just three sub ULs. Otherwise it gets too messy.

OK, here’s an easier way you could target the second UL on the zen cart page:

a[href*="Path=1"] + ul.level2 {
     
}

So, you target it based on a portion of the URL of the <a> element just before the UL.

So on your other page, pick a subsection of the <a> link before the UL and put that in place of Path=1.

<a href=“http://localhost/cart4/index.php?main_page=index&amp;cPath=13&amp;zenid=rp7jv3hq8eqh85tpde3imj3cs2”>Golf Clubs</a>

a[href*=“Path=1”] + ul.level2 {

}

If I understand, I can include “Golf Clubs” instead of “Path1”
or “cpath=13”
Thanks for all your help
Charles

No. For the rule I posted, it has to find something unique within the actual URL itself, which is:

[noparse]http://localhost/cart4/index.php?main_page=index&amp;cPath=13&amp;zenid=rp7jv3hq8eqh85tpde3imj3cs2[/noparse]

As each link had a unique Path=x, that seemed the most logical thing to choose.

Ralph
Got it,thanks will work on it and get back to you,I am sorry to bother you but I would like to find away to solve this using css.
Charles

No worries, Charles. It’s not a bother at all, but an interesting question, so please do post back to let us know how it goes. :slight_smile:

Ralph
I don’t seem to be able to apply rules correctly to this part(.menu ul.level2 li:a[href*=“cPath=19”] + ul.level2 {}) cpath =19 is the first li a under Golf Clubs.

(this works in Firefox and applys a red background behind the first li a of the ul’s)
.menu ul.level2 li:nth-of-type(1) a{
height: 30px;
display: block;
background-color:#ff0000;
}

(this doesn’t work, shouldn’t point to the 1st li a of the ul Golf Clubs?)
.menu ul.level2 li:a[href*=“cPath=19”] + ul.level2 {

margin:4px auto;
position:absolute;
left:-999em; /* Hides the drop down */
text-align:left;
padding:1px 5px 10px 5px;
border:1px solid #777777;
border-top:none;

/* Gradient background */  
background:#F4F4F4;  
background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  

/* Rounded Corners */  
-moz-border-radius: 0px 5px 5px 5px;  
-webkit-border-radius: 0px 5px 5px 5px;  
border-radius: 0px 5px 5px 5px;  

/* Drop Shadows */
-moz-box-shadow: 1px 2px 3px #727272;
-webkit-box-shadow: 1px 2px 3px #727272;
box-shadow: 1px 2px 3px #727272;

}

Charles

Ralph
False alarm maybe,I rearranged css rule and seems to be working,will post all after I finish and you can view the fruits of your labor on my test website.

.menu li a[href*=“cPath=14”] + ul.level2 {
border:10px solid #777777;
} this is what I used and it selects any of the dropdowns so for…
Thank you
Charles

Ralph
If you like visit Zen Cart!, The Art of E-commerce ,I have been able to apply rules to the dropdowns,however using xampp on my local machine,the width’s of 400px are correctly applied to Apparel but on website all widths are the same, I suspect a different ver of php on the website is the cause I will check.I know the stylesheet for the header menu needs to be cleaned up but if you will look at the bottom you will see changes.
Again thanks and please leave this thread for others that might have same problem,by the way I checked it in IE and Firefox doesn’t seem to have an problems but a through check is neccesary.
Charles

I don’t see any setting of 400px. Perhaps the style changes didn’t upload?

EDIT: ah, I see the styles are there, but the line before starts with //, which doen’t work in CSS, so it may be cancelling out the rest of the style sheet. To comment something out in CSS, you need

/* hidden styles */

Indeed! :slight_smile: I gave up worrying about that garbage browser long ago.

Ralph
Yes my bad,I made the correction still the same.I will check out the php version ,I think its 2.17.
Charles

Ralph

All is well, the problem was cPath reference’s are different in mySql db on host server than local machine charge it to "not paying close attention"If you like visit website Zen Cart!, The Art of E-commerce and you will see the fruits of your labor.

Thanks for all your help
Charles

Ralph
Is there a method to hide the path to stylesheet when the page source code is viewed,
I would like to demo menu but not allow the stylesheet to be viewed.
Thanks
Charles

Glad it worked out, Charles. Best wishes. :slight_smile: