Classes and IDs in CSS 1

[MrTBC]

I have an ID that I would like to convert into a Class. Here is my HTML:

<div id="example">
<ul class="menu">
<li class="expanded last">
<a href="/test" title="">Test1</a>
<ul class="menu">
<li class="leaf first">
<a href="/test" title="">Test2</a>
</li>
<li class="leaf">
<a href="/test" title="">Test3</a>
</li>
<li class="leaf last">
<a href="/test" title="">Test4</a>
</li>
</ul>
</li>
</ul>
</div>

I would like to convert the first line to:

<div class="example">

Here is the relevant section of the CSS file. I'm afraid I'm a complete CSS newbie, could someone advise me on what to do please?

/****************/
/* PRIMARY MENU */
/****************/

#example {                                   /* menu layout */
  display: block;
  float: right;
  font-family: Myriad Pro, Myriad Web Pro Regular, Lucida Grande, Geneva, Trebuchet MS, sans-serif;
  font-size: 1em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  position: relative;
  text-transform: uppercase;
}
  
#example ul.links li {                       /* text styling for the top (primary) menu */
}  

#example ul.links li.first {                 /* .first and .last classes applied to first and last menu & list items */
}
  
#example ul.links li.last {                  /* .first and .last classes applied to first and last menu & list items */
}
  
#example ul.links li a:link,
#example ul.links li a:visited {
}

#example ul.links li a:hover,
#example ul.links li a:active {
}  
  

/************************************/
/* PRIMARY MENU WITH DROPDOWNS      */
/* - used with menu_tree theming of */
/* $primary_links in page.tpl.php   */
/************************************/

#example ul.menu li {                        /* top item layout */
  background: transparent url('images/tab-left.png') no-repeat left 0;
  display: block;
  float: left;
  margin: 0 4px 0 0;
  padding: 0 0 0 0.833em;    /* 0 0 0 10px */
  position: relative;
  width:  auto;
}

#example ul.menu li:hover,
#example ul.menu li.hover,
#example ul.menu li.active-trail {
  background-position: left -29px;
}

#example ul.menu li a {
  background: transparent url('images/tab-right.png') no-repeat right 0;
  color: #154B70;
  display: block;
  padding: 0.416em 0.833em 0.083em 0;    /* 5px 10px 1px 0 */
  text-decoration: none;
}

#example ul.menu li a:hover,
#example ul.menu li:hover a,
#example ul.menu li.hover a,
#example ul.menu li.active-trail a {
  background-position: right -29px;
  color: #fff;
}

#example ul.menu li ul {
  background: transparent url('images/drop-bottom.png') no-repeat 0 bottom;
  left: -999em;
  opacity: 0.95;
  margin: 0 0 0 -10px;
  padding: 2px 0 4px;
  position: absolute;
  width: 144px;
  z-index: 2;
}
  
#example ul.menu li:hover ul,
#example ul.menu li.hover ul {
  display: block;
  left: auto;
}
  
#example ul.menu li ul li {
  background: #94CE18;
  border-bottom: 1px solid #83A638;
  float: left;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.916em;
  height: auto;
  margin: 0;
}

#example ul.menu li ul li.last {
  border-bottom: none
}

#example ul.menu li ul li a,
#example ul.menu li ul li a:link,
#example ul.menu li ul li a:visited {
  background: transparent;
  color: #154B6F;
  display: block;
  margin: 0;
  padding: 4px 0;
  text-transform: none;
  width: 135px;
}

#example ul.menu li ul li a:hover {
  color: #fff;
  display: block;
  margin: 0;
  padding: 4px 0;
  text-decoration: none;
}

#example ul.menu li ul li ul.menu {
  left: -999em;
  margin: 0 0 0 -14px;
  padding: 6px 0 4px;
}

#example ul.menu li ul li:hover ul.menu,
#example ul.menu li ul li.hover ul.menu {
  display: block;
  left: 154px;
  top: -6px;
}

#example ul.menu li ul li ul.menu li a {
  padding: 4px;
  width: 128px;
}

 

[jpadie]

without asking 'why' you want to do this, the answer is to substitute each reference to

#example

with a reference to

.example

the hash sign denotes an id, the dot denotes a class and the absence of either denotes a tag.

 

[MrTBC]

Thanks jpadie. It's so I can have multiple instances on the same page.

 

[jpadie]

that's what i thought. the css binds to all unordered lists within the div id example. so as long as all the ul's are inside a single set of div tags with the id of example, the code will work fine.

anyway, there is no harm in using classes unless you have to identify the relevant div tag in some form.