Multiple lists <ul>

HTML & CSS
1

Hey guys,

I’ve created a <ul> menu for my navigation and now I want to add another <ul> for bullet points but the <ul> bullet points are picking up the styles of the <ul> nav. I’ve tried giving the nav <ul> a style but it’s still not working?

THIS IS THE BULLET POINTS

<ul>
        <li class="leaf">List item 1</li>
        <li class="leaf">List item 2</li>
        <li class="leaf">List item 3</li>
</ul>

.custom li.leaf {
list-style-type: none;
background: url('http://www.techforluddites.com/images/leaf_icon.jpg') no-repeat top left;
height: 46px;
padding-left: 40px;
}

THIS IS THE NAV


<ul>	
    <li><a href="#" style="margin:0 18px 0 0px;"class="link1">Products</a> |
         <ul>
            <li>Purified Natural Allergens</li>
            <li>Recombinant Allergens</li>
            <li>Whole Allergen Extracts</li>
            <li>Antibodies</li>
         </ul>
  </li>
</ul>

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 0px 0px 0px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font-family: Century Gothic, arial, sans-serif;
  font: 13px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 11px 8px 9px 8px;
  background: #143863;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background:transparent;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 38px;
  left: -10px;
  width: 180px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li {
  background: #143863;
  display: block;
  color: #fff;
  text-transform:lowercase;
  text-shadow: 0 -1px 0 #000;
  font-size:12px;
  font-weight:100;
  background-color: rgba(20, 56, 99, 0.9);
  background: rgba(20, 56, 99, 0.9);
  color: #fff;
}
ul li ul li:hover { background: #4383c4; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}
2

It’s best to give the nav ul a class of its own, which you can then use to apply any styles that are unique to that element. At the moment, the nav styles are applied to all ULs, which is not what you want.

3

What you need to realize is that CSS declarations cascade

so a rule like UL LI {} affect ALL LIs within the first UL , not just the children. ( btw giving a class to each LI would work too, but it’s a bit heavy handed).

you can RESET the lower level elements like this .nav LI LI{ lower level rules…}

or
You can use the child selector UL.nav>LI { top level rules }

hope that helps

4

Thank you for your help.

So these would be the 2 different classes applied below?

CLASS ONE

.class_one ul {
  /* CSS here */
}
.class_one ul li {
  /* CSS here */
}
.class_one ul li:hover {
  /* CSS here */
}
.class_one ul li ul {
  /* CSS here */
}
.class_one ul li ul li {
  /* CSS here */
}
.class_one ul li ul li:hover {
/* CSS here */
}
.class_one ul li:hover ul {
  /* CSS here */
}

<ul class="class_one">
 <li><a href="#">HOME</a></li>
 <li><a href="#">ABOUT US</a></li>
 <li><a href="#">CONTACT US</a></li>
 <li><a href="#">SERVICES</a></li>
</ul>

CLASS TWO

.class_two ul {
 /* CSS here */
}


<ul class="class_two">
     <li>Bullet point</li>
     <li>Bullet point</li>
     <li>Bullet point</li>
</ul>
5

Yes, except that you’ve made a mistake. If you have this in your HTML:

<ul class="class_one">

then you target it like this:

ul.class_one {
  /* CSS here */
}

That targets a UL with a class of “class_one”. The way you were writing it, the class would have to be on a parent of the UL, rather than on the UL itself. So you need to change each example above.

6

Oh right! Thank you ralph.m. I’ll make those changes.

7

That worked perfectly thanks ralph.m :slight_smile:

8

You’re welcome. Glad it helped. :slight_smile:

9

Hi ralph.m,

I have another CSS question for you.

Again I am having an issue with classes [ I think ] I have an anchor at the bottom of the page which is a CSS image rollover - http://rossnaumov.com.au/clients/PPC/

THE CSS


.coffee {
display: block; width: 74px; height: 74px; background:url(images/coffee.png) bottom; text-indent: -99999px;
}
.coffee:hover {
background-position: 0 0;
}
.anchor { display: block; width: 56px; height: 56px; background: url(images/anchor.png) bottom; text-indent: -99999px;
}
.anchor:hover {
background-position: 0 0;
}
}

I am trying to use the same CSS image rollover effect for the menu but when I do it moves the coffee image outside of the menu div. I’m thinking it must be a class issue?

HTML


<div class="header-cont">
<a name="top" href="#footer"></a>
    <div class="header">
      <a class="coffee" href="#">Leaf</a>
      <img src="images/menu.png" border="0">
      <img src="images/location.png" border="0">
      <img src="images/pies.png" border="0">
      <img src="images/love.png" border="0">
      <img src="images/review.png" border="0">
      <img src="images/fb.png" border="0" />
    </div>
</div>

<a class="anchor" style="margin:0px 0 0 450px;" href="#top"></a>
10

Where do you want the coffee bit to be?

11

I’m wanting the coffee rollover to be in the main menu. I’m trying to make those menu images image rollovers.

12

No, I mean where EXACTLY do you want it positioned? ‘In the menu’ is too vague.

13

I actually want it in the “header” as below. See the <a class=“coffee” href=“#”>Leaf</a> within <div class=“header”> ? The CSS is below:

Hopefully this explains it better? http://rossnaumov.com.au/ross.png

<a name="top" href="#footer"></a>
    <div class="header">
      <a class="coffee" href="#">Leaf</a>
      <img src="images/menu.png" border="0">
      <img src="images/location.png" border="0">
      <img src="images/pies.png" border="0">
      <img src="images/love.png" border="0">
      <img src="images/review.png" border="0">
      <img src="images/fb.png" border="0" />
    </div>
</div>


.header {
height:74px; background:transparent; width:980px; margin:0px auto; text-align:center;
}

Thank you for your help!

14

Try this:

style.css (line 75)


.coffee {
    background: url("images/coffee.png") repeat scroll center bottom transparent;
    [color=blue]display: inline-block;
    vertical-align: top;[/color]
    width: 74px;
    height: 74px;
    text-indent: -99999px;
}
15

Thank you ronpat. That worked!

I noticed you added

repeat scroll center bottom transparent

and

display: inline-block; vertical-align: top;

It also works by just adding

display: inline-block; vertical-align: top;

Like

.coffee {
    background:url(images/coffee.png) bottom;
    display: inline-block;
    vertical-align: top;
    width: 74px;
    height: 74px;
    text-indent: -99999px;
}
16

FYI: That string of code
background: url("images/coffee.png") repeat scroll center bottom transparent;
was displayed by Firebug. Firebug includes the default properties that are being applied by the shorthand in addition to those that you have applied in your CSS. The significant part of my post was the added properties in blue.

Thanks for the feedback. Glad it worked!!!

17

That’s good to know re: firebug.

Thanks again ronpat and happy Monday.