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

Can't Style First Menu Item

Expand Messages
  • diehardcc
    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
    Message 1 of 2 , Dec 27, 2006
    • 0 Attachment
      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;
      }
    • 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 2 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.