locked
Stylesheet Question RRS feed

  • Question

  • User-1620310474 posted

    I have been testing the menu adapter but can't seem to get the stylesheet to work the way I want.   Granted my skills in CSS are lacking but I was hoping I could leverage the example stylesheet that comes with the tutorial.    Unfortunatley it has been taking many hours and I am guessing it is something very trivial that I am overlooking.   I have a pretty simple menu and accompanying stylesheet below.   The top menu works the way I would like but I would like to have the second and third tier drop down menus to have a beige background and each item hovered to be blue.   Basically just the opposite of the way it works now.   Would someone be able to point me in the right direction to get the formatting correct?   Thanks in advance.

    <div>

    <asp:Menu ID="NavMenu" runat="server" Orientation="Horizontal" CssSelectorClass="PrettyMenu">

    <Items>

    <asp:MenuItem Text="Portfolio" Value="Portfolio">

    <asp:MenuItem Text="My Audit Clients" Value="My Audit Clients"

    NavigateUrl="default.aspx" />

    <asp:MenuItem Text="All Companies" Value="All Companies"

    NavigateUrl="default.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Create a Portfolio" Value="Create a Portfolio">

    <asp:MenuItem Text="Standard" Value="Standard" NavigateUrl="default.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Custom" Value="Custom" NavigateUrl="default.aspx"></asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="Saved Portfolios" Value="Saved Portfolios">

    <asp:MenuItem NavigateUrl="test.aspx" Text="This is one of my saved portfolios"

    Value="This is one of my saved portfolios"></asp:MenuItem>

    <asp:MenuItem NavigateUrl="test.aspx" Text="This is another"

    Value="This is another"></asp:MenuItem>

    </asp:MenuItem>

    </asp:MenuItem>

    <asp:MenuItem Text="Company Look-Up" Value="Company Look-Up"

    NavigateUrl="lookup.aspx">

    </asp:MenuItem>

    <asp:MenuItem Text="My Alerts" Value="My Alerts" NavigateUrl="alerts.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Reports" Value="Reports" NavigateUrl="reports.aspx"></asp:MenuItem>

    <asp:MenuItem Text="Research" Value="Research" NavigateUrl="research.aspx"></asp:MenuItem>

    </Items>

    </asp:Menu>

    </div>

     

    Stylesheet

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* This style sheet is intended to contain OFTEN CHANGED rules used when the Menu control adapter is enabled. */

    /* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */

    /* whose class is AspNet-Menu-Vertical. */

    /* Note that the example menu in this web site uses relative positioning to force the menu to occupy */

    /* a specific place in the web page. Your web site will likely use a different technique to position your */

    /* menu. So feel free to change all the properties found in this CSS rule if you clone this style sheet. */

    /* There is nothing, per se, that is magical about these particular property value choices. They happen to */

    /* work well for the sample page used to demonstrate an adapted menu. */

    .PrettyMenu .AspNet-Menu-Vertical

    {

    position:relative;

    top: 3em;

    left: 0;

    z-index: 300;

    }

    /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */

    /* So, effectively says: style all tiers in the menu this way... */

    .PrettyMenu ul

    {

    background:#000066;

    }

    /* Top tier */

    .PrettyMenu .AspNet-Menu-Vertical ul.AspNet-Menu

    {

    width: 9em;

    }

    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */

    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */

    /* the topmost tier's appearance. */

    .PrettyMenu ul.AspNet-Menu ul

    {

    width: 10.5em;

    left: 8.9em;

    top: -1em;

    z-index: 400;

    }

    .PrettyMenu ul.AspNet-Menu ul ul

    {

    width: 11.5em;

    left: 10.4em;

    }

    /* The menu adapter generates a list item (li) in HTML for each menu item. */

    /* Use this rule create the common appearance of each menu item. */

    .PrettyMenu ul.AspNet-Menu li

    {

    background:#000066;

    }

    /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */

    /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */

    /* in each menu item. One comes from the CSS rule (above) governing the li tag that each menu item has. */

    /* The second image comes from this rule (below). */

    .PrettyMenu ul.AspNet-Menu li a,

    .PrettyMenu ul.AspNet-Menu li span

    {

    color: #ede8cb;

    padding: 4px 2px 4px 8px;

    border:1px solid #000066;

    border-bottom: 0;

    background: transparent url(../images/arrowblue.gif) right center no-repeat;

    font-family:Verdana;

    font-size: 12px;

    }

    /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span

    {

    background-image: none;

    }

    /* Not used presently. This is here if you modify the menu adapter so it renders img tags, too. */

    .PrettyMenu ul.AspNet-Menu li a img

    {

    border-style: none;

    vertical-align: middle;

    }

    /* When you hover over a menu item, this rule comes into play. */

    /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */

    /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */

    /* See MenuAdapter.js (in the JavaScript folder). */

    .PrettyMenu ul.AspNet-Menu li:hover,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover

    {

    background:#ede8cd;

    }

    .PrettyMenu ul.AspNet-Menu li:hover a,

    .PrettyMenu ul.AspNet-Menu li:hover span,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover span,

    .PrettyMenu ul.AspNet-Menu li:hover li:hover a,

    .PrettyMenu ul.AspNet-Menu li:hover li:hover span,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover span,

    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a:hover,

    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span.Asp-Menu-Hover,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a:hover,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span.Asp-Menu-Hover

    {

    color: #000066;

    }

    .PrettyMenu ul.AspNet-Menu li:hover ul a,

    .PrettyMenu ul.AspNet-Menu li:hover ul span,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover ul span,

    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul a,

    .PrettyMenu ul.AspNet-Menu li:hover li:hover ul span,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover li.AspNet-Menu-Hover ul span

    {

    color: #ede8cb;

    }

    /* While you hover over a list item (li) you are also hovering over a link or span because */

    /* the link or span covers the interior of the li. So you can set some hover-related styles */

    /* in the rule (above) for the li but set other hover-related styles in this (below) rule. */

    .PrettyMenu ul.AspNet-Menu li a:hover,

    .PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover

    {

    color: #000066;

    background: transparent url(../images/arrowbeige.gif) right center no-repeat;

    }

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover

    {

    background-image: none;

    }

     

    /* -------------------------------------------------------------------------- */

    /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */

    /* whose class is AspNet-Menu-Horizontal. */

    /* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */

    /* a specific place in the web page. Your web site will likely use a different technique to position your */

    /* menu. So feel free to change all the properties found in this CSS rule if you clone this style sheet. */

    /* There is nothing, per se, that is magical about these particular property value choices. They happen to */

    /* work well for the sample page used to demonstrate an adapted menu. */

    .PrettyMenu .AspNet-Menu-Horizontal

    {

    position:absolute;

    left: 9.5em;

    top: 0;

    z-index: 300;

    }

    /* This rule controls the width of the top tier of the horizontal menu. */

    /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */

    /* up from left to right. In other words, this width needs to be the width of the individual */

    /* top tier menu items multiplied by the number of items. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu

    {

    width: 45em;

    }

    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */

    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */

    /* the topmost tier's appearance. */

    /* Remember that only the topmost tier of the menu is horizontal. The second and third tiers are vertical. */

    /* So, they need a much smaller width than the top tier. Effectively, the width specified here is simply */

    /* the width of a single menu item in the second and their tiers. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul

    {

    width: 10.5em;

    left: 0;

    top: 100%;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

    {

    top: -0.3em;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

    {

    width: 11.5em;

    }

    /* Generally, you use this rule to set style properties that pertain to all menu items. */

    /* One exception is the width set here. We will override this width with a more specific rule (below) */

    /* That sets the width for all menu items from the second tier downward in the menu. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

    {

    width: 9em;

    text-align:center;

    }

    /* This rule establishes the width of menu items below the top tier. This allows the top tier menu items */

    /* to be narrower, for example, than the sub-menu items. */

    /* This value you set here should be slightly larger than the left margin value in the next rule. See */

    /* its comment for more details. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

    {

    text-align:left;

    width: 10.5em;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li

    {

    width: 11.5em;

    }

    /* Third tier menus have to be positioned differently than second (or top) tier menu items because */

    /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */

    /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */

    /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul

    {

    margin: -1.4em 0 0 10.35em;

    }

    Wednesday, January 30, 2008 1:06 AM

Answers

  • User-1620310474 posted

    sorry, forgot to paste my latest style sheet...

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */

    /* So, effectively says: style all tiers in the menu this way... */

    .PrettyMenu ul

    {

    background:#000066;

    }

    /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */

    /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */

    /* in each menu item. One comes from the CSS rule (above) governing the li tag that each menu item has. */

    /* The second image comes from this rule (below). */

    .PrettyMenu ul.AspNet-Menu li a,

    .PrettyMenu ul.AspNet-Menu li span

    {

    color: #ede8cb;

    padding: 4px 2px 4px 8px;

    border:1px solid #000066;

    border-bottom: 0;

    /* background: transparent url(../images/arrowbeige.gif) right center no-repeat; */

    font-family:Verdana;

    font-size: 12px;

    }

    /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span

    {

    background-image: none;

    }

    /* Not used presently. This is here if you modify the menu adapter so it renders img tags, too. */

    .PrettyMenu ul.AspNet-Menu li a img

    {

    border-style: none;

    vertical-align: middle;

    }

    /* When you hover over a menu item, this rule comes into play. */

    /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */

    /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */

    /* See MenuAdapter.js (in the JavaScript folder). */

    .PrettyMenu ul.AspNet-Menu li:hover,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover

    {

    background:#ede8cd;

    }

    /* When hovering over the submenu, leave top menu text color blue */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li:hover a

    {

    color: #000066;

    }

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover

    {

    background-image: none;

    }

     

    /* -------------------------------------------------------------------------- */

    /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */

    /* whose class is AspNet-Menu-Horizontal. */

    /* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */

    /* a specific place in the web page. Your web site will likely use a different technique to position your */

    /* menu. So feel free to change all the properties found in this CSS rule if you clone this style sheet. */

    /* There is nothing, per se, that is magical about these particular property value choices. They happen to */

    /* work well for the sample page used to demonstrate an adapted menu. */

    .PrettyMenu .AspNet-Menu-Horizontal

    {

    position:absolute;

    left: 9.5em;

    top: 0;

    z-index: 300;

    }

    /* This rule controls the width of the top tier of the horizontal menu. */

    /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */

    /* up from left to right. In other words, this width needs to be the width of the individual */

    /* top tier menu items multiplied by the number of items. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu

    {

    width: 45em;

    }

    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */

    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */

    /* the topmost tier's appearance. */

    /* Remember that only the topmost tier of the menu is horizontal. The second and third tiers are vertical. */

    /* So, they need a much smaller width than the top tier. Effectively, the width specified here is simply */

    /* the width of a single menu item in the second and their tiers. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul

    {

    width: 10.5em;

    left: 0;

    top: 100%;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

    {

    width: 11.5em;

    top: -0.3em;

    }

    /* Generally, you use this rule to set style properties that pertain to all menu items. */

    /* One exception is the width set here. We will override this width with a more specific rule (below) */

    /* That sets the width for all menu items from the second tier downward in the menu. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

    {

    width: 9em;

    text-align:center;

    }

    /* This rule establishes the width of menu items below the top tier. This allows the top tier menu items */

    /* to be narrower, for example, than the sub-menu items. */

    /* This value you set here should be slightly larger than the left margin value in the next rule. See */

    /* its comment for more details. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

    {

    text-align:left;

    width: 10.5em;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li

    {

    width: 11.5em;

    }

    /* Third tier menus have to be positioned differently than second (or top) tier menu items because */

    /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */

    /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */

    /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul

    {

    margin: -1.4em 0 0 10.35em;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover,

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li.AspNet-Menu-Hover

    {

    background-color: #000066;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover a

    {

    color: #ede8cb;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

    {

    text-align:left;

    width: 10.5em;

    background-color: #ede8cb;

    }

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 30, 2008 10:20 AM

All replies

  • User478895623 posted

    I've never used this before, but I think it will work:

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
    {
    text-align:left;
    width: 10.5em;
    background-color: (your beige color);
    }
    .Menu_H_Txt .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover,
    .Menu_H_Txt .AspNet-Menu-Horizontal ul.AspNet-Menu ul li.AspNet-Menu-Hover
    {
    background-color: (your blue color);
    }

     
    Wednesday, January 30, 2008 4:21 AM
  • User-1620310474 posted

    Thanks Paul - that helped a ton.   My last stumbling block is the third tier.  The background of the menu is beige but the text is beige too.   How would I initially set the third tier text color to blue (just like the second tier)?

    Wednesday, January 30, 2008 9:56 AM
  • User478895623 posted

    Create these additional two classes:

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li
    {
      text-align:left;
      width: 10.5em;
      background-color: (your beige color);
    }
    .Menu_H_Txt .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li:hover,
    .Menu_H_Txt .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li.AspNet-Menu-Hover
    {
     background-color: (your blue color);
    }

    Wednesday, January 30, 2008 10:07 AM
  • User478895623 posted

    Oops, think I misread your post. Try adding 'color' properties to the classes already declared:

    PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li
    {
      text-align:left;
      width: 10.5em;

      color: (whatever color you want);
      background-color: (your beige color);
    }
    .Menu_H_Txt .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover,
    .Menu_H_Txt .AspNet-Menu-Horizontal ul.AspNet-Menu ul li.AspNet-Menu-Hover
    {

     color: (whatever color you want);
     background-color: (your blue color);
    }

    Wednesday, January 30, 2008 10:10 AM
  • User-1620310474 posted

    sorry, forgot to paste my latest style sheet...

    .foo {} /* W3C CSS validator likes CSS files to start with a class rather than a comment. Soooooo.... */

    /* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */

    /* So, effectively says: style all tiers in the menu this way... */

    .PrettyMenu ul

    {

    background:#000066;

    }

    /* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */

    /* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */

    /* in each menu item. One comes from the CSS rule (above) governing the li tag that each menu item has. */

    /* The second image comes from this rule (below). */

    .PrettyMenu ul.AspNet-Menu li a,

    .PrettyMenu ul.AspNet-Menu li span

    {

    color: #ede8cb;

    padding: 4px 2px 4px 8px;

    border:1px solid #000066;

    border-bottom: 0;

    /* background: transparent url(../images/arrowbeige.gif) right center no-repeat; */

    font-family:Verdana;

    font-size: 12px;

    }

    /* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span

    {

    background-image: none;

    }

    /* Not used presently. This is here if you modify the menu adapter so it renders img tags, too. */

    .PrettyMenu ul.AspNet-Menu li a img

    {

    border-style: none;

    vertical-align: middle;

    }

    /* When you hover over a menu item, this rule comes into play. */

    /* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */

    /* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */

    /* See MenuAdapter.js (in the JavaScript folder). */

    .PrettyMenu ul.AspNet-Menu li:hover,

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover

    {

    background:#ede8cd;

    }

    /* When hovering over the submenu, leave top menu text color blue */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li:hover a

    {

    color: #000066;

    }

    .PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover

    {

    background-image: none;

    }

     

    /* -------------------------------------------------------------------------- */

    /* When the Menu control's Orientation property is Horizontal the adapter wraps the menu with DIV */

    /* whose class is AspNet-Menu-Horizontal. */

    /* Note that the example menu in this web site uses absolute positioning to force the menu to occupy */

    /* a specific place in the web page. Your web site will likely use a different technique to position your */

    /* menu. So feel free to change all the properties found in this CSS rule if you clone this style sheet. */

    /* There is nothing, per se, that is magical about these particular property value choices. They happen to */

    /* work well for the sample page used to demonstrate an adapted menu. */

    .PrettyMenu .AspNet-Menu-Horizontal

    {

    position:absolute;

    left: 9.5em;

    top: 0;

    z-index: 300;

    }

    /* This rule controls the width of the top tier of the horizontal menu. */

    /* BE SURE TO MAKE THIS WIDE ENOUGH to accommodate all of the top tier menu items that are lined */

    /* up from left to right. In other words, this width needs to be the width of the individual */

    /* top tier menu items multiplied by the number of items. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu

    {

    width: 45em;

    }

    /* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */

    /* In other words, this rule can be used to style the second and third tiers of the menu without impacting */

    /* the topmost tier's appearance. */

    /* Remember that only the topmost tier of the menu is horizontal. The second and third tiers are vertical. */

    /* So, they need a much smaller width than the top tier. Effectively, the width specified here is simply */

    /* the width of a single menu item in the second and their tiers. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul

    {

    width: 10.5em;

    left: 0;

    top: 100%;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul

    {

    width: 11.5em;

    top: -0.3em;

    }

    /* Generally, you use this rule to set style properties that pertain to all menu items. */

    /* One exception is the width set here. We will override this width with a more specific rule (below) */

    /* That sets the width for all menu items from the second tier downward in the menu. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li

    {

    width: 9em;

    text-align:center;

    }

    /* This rule establishes the width of menu items below the top tier. This allows the top tier menu items */

    /* to be narrower, for example, than the sub-menu items. */

    /* This value you set here should be slightly larger than the left margin value in the next rule. See */

    /* its comment for more details. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

    {

    text-align:left;

    width: 10.5em;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul ul li

    {

    width: 11.5em;

    }

    /* Third tier menus have to be positioned differently than second (or top) tier menu items because */

    /* they drop to the side, not below, their parent menu item. This is done by setting the last margin */

    /* value (which is equal to margin-left) to a value that is slightly smaller than the WIDTH of the */

    /* menu item. So, if you modify the rule above, then you should modify this (below) rule, too. */

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu li ul li ul

    {

    margin: -1.4em 0 0 10.35em;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover,

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li.AspNet-Menu-Hover

    {

    background-color: #000066;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li:hover a

    {

    color: #ede8cb;

    }

    .PrettyMenu .AspNet-Menu-Horizontal ul.AspNet-Menu ul li

    {

    text-align:left;

    width: 10.5em;

    background-color: #ede8cb;

    }

     

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 30, 2008 10:20 AM
  • User1747825156 posted

     I came across this post and hoped to use it as a base for editing my own menu control but it doesn't apply to my XML datasource. Is it possible to edit the style in a css file when taking XML Data to populate then menu?

    Thursday, July 17, 2008 5:02 AM