Solved

css menu

Posted on 2011-09-14
11
365 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
ID: 36535924
url to view:

URL
0
 
LVL 30

Expert Comment

by:LZ1
ID: 36536117
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
ID: 36536142
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:LZ1
ID: 36536158
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
ID: 36536198
rendered HTML how do i c that?
0
 
LVL 30

Expert Comment

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

Author Comment

by:JCWEBHOST
ID: 36536219
i will host it live

check it out

url
0
 
LVL 30

Expert Comment

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

Author Comment

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

Accepted Solution

by:
LZ1 earned 500 total points
ID: 36536446
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
ID: 36548369
Thanks
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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/…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

756 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