Subject: [css-d] List with mixed styles

From: work at cookiecrook.com (James Craig)
Date: Thu, 24 Apr 2003 10:40:48 -0500

> What you want to do is create a div for the sub-items and add styles for
> that specific div to your CSS. (Hat tip: Eric Meyer)
> 
> So, for example:
> <div id="menu">
> ITEM ONE
> <div class="subitems">
> Sub-item 1
> Sub-item 2
> </div>
> </div>

The nesting idea is correct, but keep it a list, not divs.

<ul class="menu">
   <li>Item 1
     <ul>
       <li>Sub-item 1</li>
       <li>Sub-item 2</li>
     </ul>
   </li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

ul.menu { /* top menu styles */ }
ul.menu li { /* top menu item styles */ }
ul.menu li ul { /* sub-menu styles */ }
ul.menu li ul li { /* sub-menu item styles */ }

Or, you could save a few bytes on the selectors.

.menu { /* top menu styles */ }
.menu li { /* top menu item styles */ }
.menu ul { /* sub-menu styles */ }
.menu li li { /* sub-menu item styles */ }

Good luck,
James Craig

-- 
http://www.cookiecrook.com/