1. Welcome to TechPowerUp Forums, Guest! Please check out our forum guidelines for info related to our community.

Multiple <li> styles in one <ul>?

Discussion in 'Programming & Webmastering' started by susanjohnyba, Jun 11, 2009.

  1. susanjohnyba New Member

    Joined:
    Jun 11, 2009
    Messages:
    2 (0.00/day)
    Thanks Received:
    0
    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!
  2. Sihastru

    Sihastru

    Joined:
    Apr 26, 2009
    Messages:
    354 (0.19/day)
    Thanks Received:
    67
    Location:
    You are here.
    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>
    

Currently Active Users Viewing This Thread: 1 (0 members and 1 guest)

Share This Page