Solved

css for menu

Posted on 2011-09-11
3
491 Views
Last Modified: 2012-05-12
Hey guys i have an menu and css friendly to convert to ul and li, my probelm is setting the select item colour in the menu.

here my code:

<div class="Menu" id="ctl00_Menu">
      <div class="AspNet-Menu-Horizontal">
                  <ul class="AspNet-Menu">
                        <li class="AspNet-Menu-Leaf  AspNet-Menu-Selected">
                              <a href="Default.aspx" class="AspNet-Menu-Link  AspNet-Menu-Selected">
                                    Profile</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                              <a href="javascript:__doPostBack('ctl00$Menu','bAbout Us')" class="AspNet-Menu-Link">
                                    About Us</a>
                        </li>
                        <li class="AspNet-Menu-WithChildren">
                              <a href="javascript:__doPostBack('ctl00$Menu','bServices')" class="AspNet-Menu-Link">
                                    Services</a>
                              <ul>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="#" class="AspNet-Menu-Link">
                                                • Deceased Estates</a>
                                    </li>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="#" class="AspNet-Menu-Link">
                                                • Civil & Criminal Litigation</a>
                                    </li>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="#" class="AspNet-Menu-Link">
                                                • Family Law</a>
                                    </li>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="#" class="AspNet-Menu-Link">
                                                • Law of Persons</a>
                                    </li>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="#" class="AspNet-Menu-Link">
                                                • Criminal Law</a>
                                    </li>
                              </ul>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                              <a href="#" class="AspNet-Menu-Link">
                                    Support Staff</a>
                        </li>
                        <li class="AspNet-Menu-Leaf">
                              <a href="Contacts.aspx" class="AspNet-Menu-Link">
                                    Contacts</a>
                        </li>
                  </ul>
 
      </div>



here my css

/* MENU --------------------------------------------------------*/

.Menu
{
}

.Menu ul li
{
      background-position: right;
      font-family: 'Century Gothic';
      font-size: 14px;
      height: 38px;
      font-weight: normal;
      line-height: 38px;
      padding-left: 20px;
      padding-right: 40px;
      background-image: url(  '../images/dots.jpg' );
      background-repeat: no-repeat;
}

.Menu ul li a
{
      color: #FFFFFF;
}

.Menu ul li a:hover
{
      color: #fec054;
}

.Menu ul li AspNet-Menu-Leaf  AspNet-Menu-Selected
{
      color: #fec054;
}


.Menu ul li ul
{
      margin-top: -3px;
}

.Menu ul li ul li
{
      padding: 0;
      z-index: 2;
      background-color: #49191c;
      background-image: url(       '../images/red_bg.jpg' );
      background-repeat: repeat;
      line-height: 25px;
      width: 170px;
}

.Menu ul li ul li a
{
      font-family: Arial;
      font-size: 12px;
      color: #FFFFFF;
      font-style: italic;
      padding-right: 10px;
      padding-left: 10px;
}

.Menu ul li ul li a:hover
{
      background-color: #582427;
      color: #FFFFFF;
}

here c# code to set the select couse the menu is in the materpage


    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            Menu menu = (Menu)(this.Master.FindControl("Menu"));
            menu.FindItem("Profile").Selected = true;
        }
    }
0
Comment
Question by:JCWEBHOST
  • 2
3 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36521131
when i hover on the 'Deceased Estates', its background color changes.
Is that not the color you wanted to change?
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 36521146
I guess the problem is this
.Menu ul li AspNet-Menu-Leaf  AspNet-Menu-Selected
{
      color: #fec054;
}

should be replace by

.Menu ul li .AspNet-Menu-Leaf, .Menu ul li .AspNet-Menu-Selected
{
      color: #fec054;
}
0
 

Author Closing Comment

by:JCWEBHOST
ID: 36521147
thanks
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question