Loading ...
Sorry, an error occurred while loading the content.

Re: [ydn-javascript] Can't Style First Menu Item

Expand Messages
  • Todd Kloots
    Hi Will, The first menu item in each YUI Menu will have a class named first-of-type appended to it. This class is designed to mimic the CSS3 pseudo class
    Message 1 of 2 , Dec 30, 2006
    • 0 Attachment
      Hi Will,

      The first menu item in each YUI Menu will have a class
      named "first-of-type" appended to it. This class is
      designed to mimic the CSS3 pseudo class and should
      give you the hook that you need. "first-of-type" and
      all of the other CSS classes used by YUI Menu are
      documented on the YUI Menu landing page:

      http://developer.yahoo.com/yui/menu/#cssref

      I hope that helps you.

      - Todd

      --- diehardcc <diehardcc@...> wrote:

      > I made a simple horizontal menu with no submenus (no
      > levels). I'm
      > trying to style it to look like Microsoft Office XP.
      > I'm having
      > trouble putting a border around the "first menu
      > item" when you hover
      > over with your mouse. I followed the "menu.css" file
      > from YUI. I'm having
      > trouble applying style on the "first menu item" even
      > though it should
      > inherit the same style from other menu items.
      >
      > Please help.
      >
      > Thanks,
      > Will
      >
      > Markup code:
      > <div id="navigationmenu-top" class="yuimenubar"><div
      > class="bd">
      > <ul>
      > <li class="yuimenubaritem"><a href="#">User</a></li>
      > <li class="yuimenubaritem"><a
      > href="#">Roles</a></li>
      > <li class="yuimenubaritem"><a
      > href="#">Permissions</a></li>
      > <li class="yuimenubaritem"><a
      > href="#">Category-Codes</a></li>
      > </ul>
      > </div></div>
      >
      > Custom Css code:
      > #navigationmenu-top { border:1px solid #C4C4BE; }
      > div.yuimenubar {
      > background:#f6f6f6;
      > }
      > div.yuimenubar li.yuimenubaritem {
      > border:1px solid #f6f6f6;
      > border-width:1px 1px 1px 1px;
      > }
      > div.yuimenu li.selected,
      > div.yuimenubar li.selected {
      > background:#E0E3EF;
      > border:1px solid #636F9F;
      > }
      > div.yuimenu li.selected a.selected,
      > div.yuimenubar li.selected a.selected {
      > text-decoration:none;
      > }
      > div.yuimenu li.selected a.selected,
      > div.yuimenu li.selected em.selected,
      > div.yuimenubar li.selected a.selected {
      > color:#000;
      > }
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      > (Yahoo! ID required)
      >
      > mailto:ydn-javascript-fullfeatured@yahoogroups.com
      >
      >
      >
      >
      >
      >
    Your message has been successfully submitted and would be delivered to recipients shortly.