JCWEBHOST
asked on
css
Hey guys a have a menu and want it to look like the iamge below. I have wrote the css code but the service link not working out.
i want to hover over the menu a just turn the colour of the font red but when i hover over the service the background colour must be red and font white and also the sub menu of service when i hover to maintain the red background and white font. please help..
css
aspx code
page source
i want to hover over the menu a just turn the colour of the font red but when i hover over the service the background colour must be red and font white and also the sub menu of service when i hover to maintain the red background and white font. please help..
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;
padding-right: 15px;
padding-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-WithChildren
{
}
.Menu .AspNet-Menu-ChildSelected
{
color: #ed1f24;
}
.Menu .AspNet-Menu-WithChildren
{
}
.Menu ul li ul
{
width: auto;
background-color: #ed1f24;
margin-left: -15px;
}
.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;
}
aspx code
<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="• Contract Management" Value="Contract Management" NavigateUrl="~/ContractManagement.aspx"></asp:MenuItem>
<asp:MenuItem Text="• Construction Management" Value="Construction Management" NavigateUrl="~/ConstructionManagement.aspx"></asp:MenuItem>
<asp:MenuItem Text="• Contract Administration" Value="Contract Administration" NavigateUrl="~/ContractAdministration.aspx"></asp:MenuItem>
<asp:MenuItem Text="• Engineering Solutions" Value="Engineering Solutions" NavigateUrl="~/EngineeringSolutions.aspx"></asp:MenuItem>
<asp:MenuItem Text="• EPCM Solutions" Value="EPCM Solutions" NavigateUrl="~/EPCMSolutions.aspx"></asp:MenuItem>
<asp:MenuItem Text="• Implementing Agents" Value="Implementing Agents" NavigateUrl="~/ImplementingAgents.aspx"></asp:MenuItem>
<asp:MenuItem Text="• 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>
page source
<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">
HOME</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="ContractManagement.aspx" class="AspNet-Menu-Link">
• Contract Management</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="ConstructionManagement.aspx" class="AspNet-Menu-Link">
• Construction Management</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="ContractAdministration.aspx" class="AspNet-Menu-Link">
• Contract Administration</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="EngineeringSolutions.aspx" class="AspNet-Menu-Link">
• Engineering Solutions</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="EPCMSolutions.aspx" class="AspNet-Menu-Link">
• EPCM Solutions</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="ImplementingAgents.aspx" class="AspNet-Menu-Link">
• Implementing Agents</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="ProjectDevelopment.aspx" class="AspNet-Menu-Link">
• Project Development</a>
</li>
</ul>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Projects.aspx" class="AspNet-Menu-Link">
PROJECTS</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Directors.aspx" class="AspNet-Menu-Link">
DIRECTORS</a>
</li>
<li class="AspNet-Menu-Leaf">
<a href="Contacts.aspx" class="AspNet-Menu-Link">
CONTACT US</a>
</li>
</ul>
</div>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER