• Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.
  • The forums have been upgraded with support for dark mode. By default it will follow the setting on your system/browser. You may override it by scrolling to the end of the page and clicking the gears icon.

Multiple <li> styles in one <ul>?

S

susanjohnyba

New Member
Joined
Jun 11, 2009
Messages
2 (0.00/day)
Hello,

I have been stumped working on this issue for about 2 days now, but havent been able to jump this hurdle:

transeca.com

My navigation is dynamically created in a loop:

<ul id="glossymenu">
<li>Category</li>
<li>sub category</li>
<li>sub category</li>
<li>Category</li>
<li>sub category</li>
</ul>

If you visit the page, the first <li> is 'Pet GPS' , this is a top level category. The next top level category is all the way at the bottom called 'Test'.

Basically Im trying to assign 2 different styles a 'Category' and 'sub category', my attempt at this is using an id on only the top level <li>'s:

<ul id="glossymenu">
<li id="maincat">Category</li>
<li>sub category</li>
<li>sub category</li>
<li id="maincat">Category</li>
<li>sub category</li>
</ul>

But I dont seem to be able to override the style in this manor:

#maincat li a{
background:#000000;
}

My stylesheet:
transeca.com/css/style.css

Any advice is deeply appreciated!
 
When you're using ID's, use them to identify an element uniquely. If you need to identify two or more elements, use "class". I know it works with id but it is not compliant with the W3C standards.

But to answer your problem:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title>Ul.Li</title>
  <style type="text/css">
    ul {
      background-color: gray;
      color: white;
      width: 200px;
      padding: 10px;
    }
    li {
      background-color: blue;
      color: white;
      width: 200px;
      border-bottom: 1px solid gray;
    }
    li a {
      color: white;
      text-decoration: none;
      width: 200px;
      padding: 10px;
      padding-left: 30px;
    }
    li a:hover {
      color: blue;
      background-color: lightblue;
    }
    li.main {
      background-color: green;
      color: yellow;
      width: 200px;
    }
    li.main a {
      color: white;
      text-decoration: none;
      width: 200px;
      padding-left: 10px;
    }
    li.main a:hover {
      background-color: lightgreen;
      color: green;
    }
  </style>
  </head>
  <body>
    <ul>
      <li class="main"><a href="#">Main 1</a></li>
      <li><a href="#">Sub 11</a></li>
      <li><a href="#">Sub 12</a></li>
      <li><a href="#">Sub 13</a></li>
      <li class="main"><a href="#">Main 2</a></li>
      <li><a href="#">Sub 21</a></li>
      <li><a href="#">Sub 22</a></li>
      <li><a href="#">Sub 23</a></li>
      <li class="main"><a href="#">Main 3</a></li>
      <li><a href="#">Sub 31</a></li>
    </ul>
  </body>
</html>
 
You must log in or register to reply here.
Back
Top