Solved

css menu

Posted on 2011-09-14
11
362 Views
Last Modified: 2012-05-12
Hey guys i have a asp menu and have convert the menu to ul li using css friendly

my problem is the child parent, i want the background red and font colour white

here my current image:

 current
my current css

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

.Menu
{
	margin-left:0px;
	background-color: #FFFFFF;
}

.Menu ul li
{
	font-family: 'Century Gothic';
	font-size: 15px;
	height: 34px;
	font-weight: normal;
	line-height: 34px;
	margin-right: 15px;
	margin-left: 15px;
}

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

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

.Menu .AspNet-Menu-Selected
{
	color: #ed1f24;
	font-weight: bold;
}

.Menu .AspNet-Menu-ChildSelected
{
	color: #ed1f24;
}

.Menu .AspNet-Menu-WithChildren
{

}

.Menu ul li ul
{
	width: auto;
	background-color: #ed1f24;
}

.Menu ul li ul li
{
	margin: 0px 0px 0px 15px;
	padding: 0;
	z-index: 2;
	line-height: 25px;
	white-space: nowrap;
	width: 187px;
	display: block;
}

.Menu ul li ul li a
{
	font-family: 'Arial';
	font-size: 13px;
	color: #FFFFFF;
}

.Menu ul li ul li a:hover
{
	font-family: 'Arial';
	font-size: 13px;
	color: #FFFFFF;
	font-weight: bold;
}

Open in new window


my aspx page

 
<asp:Menu ID="Menu" runat="server" Orientation="Horizontal" CssSelectorClass="Menu">
                                    <Items>
                                        <asp:MenuItem Text="HOME" Value="HOME" NavigateUrl="~/Default.aspx"></asp:MenuItem>
                                        <asp:MenuItem Text="SERVICES" Value="SERVICES">
                                            <asp:MenuItem Text="&#8226; Contract Management" Value="Contract Management" NavigateUrl="~/ContractManagement.aspx"></asp:MenuItem>
                                            <asp:MenuItem Text="&#8226; Construction Management" Value="Construction Management" NavigateUrl="~/ConstructionManagement.aspx"></asp:MenuItem>
                                            <asp:MenuItem Text="&#8226; Contract Administration" Value="Contract Administration" NavigateUrl="~/ContractAdministration.aspx"></asp:MenuItem>
                                            <asp:MenuItem Text="&#8226; Engineering Solutions" Value="Engineering Solutions" NavigateUrl="~/EngineeringSolutions.aspx"></asp:MenuItem>
                                            <asp:MenuItem Text="&#8226; EPCM Solutions" Value="EPCM Solutions" NavigateUrl="~/EPCMSolutions.aspx"></asp:MenuItem>
                                            <asp:MenuItem Text="&#8226; Implementing Agents" Value="Implementing Agents" NavigateUrl="~/ImplementingAgents.aspx"></asp:MenuItem>
                                            <asp:MenuItem Text="&#8226; Project Development" Value="Project Development" NavigateUrl="~/ProjectDevelopment.aspx"></asp:MenuItem>
                                        </asp:MenuItem>
                                        <asp:MenuItem Text="PROJECTS" Value="PROJECTS" NavigateUrl="~/Projects.aspx"></asp:MenuItem>
                                        <asp:MenuItem Text="DIRECTORS" Value="DIRECTORS" NavigateUrl="~/Directors.aspx">
                                        </asp:MenuItem>
                                        <asp:MenuItem Text="CONTACT US" Value="CONTACT US" NavigateUrl="~/Contacts.aspx">
                                        </asp:MenuItem>
                                    </Items>
                                </asp:Menu>

Open in new window


all i want is when i hover over the service the background to go red and the font to go white, and also when i hover over the sub menu of service the background colour red and font white.

can it be done?

i will post a image of how i want it to look, the problem is that my a:hover is turning the font red.

 menu to be
0
Comment
Question by:JCWEBHOST
  • 6
  • 5
11 Comments
 

Author Comment

by:JCWEBHOST
Comment Utility
url to view:

URL
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
It looks like the text is white and the background is red on hover. When I hovered it just bolded the text.
0
 

Author Comment

by:JCWEBHOST
Comment Utility
i have pasted this code but i never host it live

 
.Menu .AspNet-Menu-WithChildren
{
}

.Menu .AspNet-Menu-WithChildren a:hover
{
	color: #FFFFFF;
	background-color: #ed1f24;
}

Open in new window



problem is when i hover over the child node exsample project management the css for

.Menu .AspNet-Menu-WithChildren a:hover

do not work
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Can you view the source of the menu and paste the rendered HTML?
The class you have .Menu .AspNet-Menu-WithChildren is not correct, as this is the code that produces the menu, not what is rendered.
0
 

Author Comment

by:JCWEBHOST
Comment Utility
rendered HTML how do i c that?
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 30

Expert Comment

by:LZ1
Comment Utility
When your looking at it in your browser, just view source.
0
 

Author Comment

by:JCWEBHOST
Comment Utility
i will host it live

check it out

url
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
Your CSS is working fine. From the link you just provided everything looks good.
0
 

Author Comment

by:JCWEBHOST
Comment Utility
but when i hover on the sub nodes it goes away
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
Comment Utility
OH, I see what your talking about now.  I'm very sorry, I misunderstood you.  

Try adding this to your StyleSheet.css
.Menu ul li a:hover, ul.AspNet-Menu li.aspNet-Menu-WithChildren a, ul.AspNet-Menu li:hover {
    color: #FFF;
    background: #ED1F24;
}

Open in new window

0
 

Author Closing Comment

by:JCWEBHOST
Comment Utility
Thanks
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now