[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

Dynamic Hover Style doesn't work.

Posted on 2010-04-07
3
Medium Priority
?
809 Views
Last Modified: 2013-11-26
I have a basic web site that I've developed in VS 2008.  I've placed a menu control on it which I'm trying to style.  For the most part the styling is working however when the mouse hovers over the dynamic menu items their backgrounds should turn black but they don't.  Below is the style sheet and HTML for the page as well as the web.sitemap that the menu is based on.  Any suggestions would be greatly appreciated.
body
{
	margin: 0;
}

#divPageWrapper
{
	width: 1000px;
	background-color: #C0D0DF;
}

#divHeaderOne
{
	background-color: #7CC1EE; /* Medium Blue*/
	height: 50px;
	font-weight: bold;
	font-size: 45px;
	color: #2D6797; /* Dark Blue*/
}

#divHeaderOne img
{
	margin-left: 10px;
	width: 59px;
	height: 36px;
}

#divMenu
{
	background-color: #2D6797; /* Dark Blue*/
}

.MainMenu
{
	width: 1000px;
}

.StaticMenuItemStyle
{
	/* Defines the look of main menu items. */
	color: white;
	font-size: 16px;
	font-weight: bold;
	border-left: solid 1px white;
	text-align: center;
}

.StaticHoverStyle, .StaticSelectedStyle
{
	/* Defines the look of hover main menu items */
	background-color: silver;
}

.DynamicMenuItemStyle
{
	/* Defines the sub menu items */
	color: white;
	font-size: 16px;
	font-weight: bold;
	background-color: silver;
	padding: 4px 2px 4px 3px;
}

.DynamicHoverStyle
{
	/* Defines the hover style of sub menus Currently does nothing.*/
	background-color: Black;
	color: White;
}

.DynamicHoverStyle a
{
	/* Removes the underline from links in the sub menus Currently does nothing.*/
	text-decoration: none;
}

#divHeaderTwo, #divHeaderThree
{
	width: 500px;
	font-weight: bold;
	font-size: 35px;
	float: left;
	border-bottom: solid 2px Gray;
}

#divHeaderTwo
{
	text-indent: 7px;
}

#divHeaderThree
{
	text-align: right;
}

#divHeaderThree .RecordsFor
{
	margin-right: 9px;
}

#divSideBar
{
	background-color: #2D6797; /* Dark Blue*/
	width: 102px;
	min-height: 537px;
	float: left;
	border-top: solid 6px #C0D0DF;
	border-left: solid 6px #C0D0DF;
}

#divSideBar a
{
	font-size: 18px;
	color: yellow;
	margin-left: 10px;
	margin-top: 10px;
	display: block;
}

#divMainContent
{
	width: 890px;
	min-height: 549px;
	float: left;
}

#divFooter
{
    background-color: black;
	text-align:center;
    clear: both;
}

.Button
{
	font-size: medium;
	font-weight: bold;
}

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.Master.vb" Inherits="Client_Track_3._5.Primary" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Site Master Page</title>
	<link href="~/Styles/SiteMaster.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
		<div id="divPageWrapper">
			<div id="divHeaderOne">
				<asp:Image ID="PeopleLogo" runat="server" AlternateText="People Inc Logo" ImageUrl="~/Images/PeopleIncLogoSmallBlack.jpg"/>
				Client Track
			</div>
			<div id="divMenu">
				<asp:Menu ID="MasterMenu" runat="server" CssClass="MainMenu" 
					DataSourceID="SiteMapDataSource1" Orientation="Horizontal" 
					StaticEnableDefaultPopOutImage="False">
					<StaticMenuItemStyle CssClass="StaticMenuItemStyle" ItemSpacing="0px" />
					<StaticHoverStyle CssClass="StaticHoverStyle" />
					<DynamicHoverStyle CssClass="DynamicHoverStyle" />
					<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
				</asp:Menu>
			</div>
			<div id="divHeaderTwo">
				Form Title
			</div>
			<div id="divHeaderThree">
				Records For <asp:DropDownList ID="ddlRecordsFor" runat="server" Width="150px" CssClass="RecordsFor"></asp:DropDownList>
			</div>
			<div id="divSideBar">
				<asp:HyperLink ID="LogOff" runat="server">Log Off</asp:HyperLink>
				<asp:HyperLink ID="SpellCheck" runat="server">Spell Check</asp:HyperLink><br /><br />
				<asp:HyperLink ID="YouAre" runat="server">You Are</asp:HyperLink>
				<asp:HyperLink ID="YouCan" runat="server">You Can</asp:HyperLink>
				<asp:HyperLink ID="WhoCan" runat="server">Who Can</asp:HyperLink>
				<asp:HyperLink ID="HowCan" runat="server">How Can</asp:HyperLink>
			</div>
			<div id="divMainContent">
				<asp:ContentPlaceHolder ID="MasterContentPlaceHolder" runat="server">
				</asp:ContentPlaceHolder>
			</div>
			<div id="divFooter">
				<asp:Button ID="Button1" runat="server" Text="Button" CssClass="Button" />
			</div>
		</div>
		<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
    </form>
</body>
</html>

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
	<siteMapNode url="" title="Main Node" description="Main Node">
		<siteMapNode url="" title="Behavioral" description="Behavioral">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
      <siteMapNode url="" title="Test" description="Test" />
    </siteMapNode>
		<siteMapNode url="" title="Day Hab" description="Day Hab">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Family Care" description="Family Care">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Family Ed and Training" description="Family Ed and Training">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="ICF" description="ICF">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="IRA" description="IRA">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="ISE" description="ISE">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Pre-Voc" description="Pre-Voc">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Respite" description="Respite">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Service Coordination" description="Service Coordination">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Supported Employment" description="Supported Employment">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
		<siteMapNode url="" title="Waiver" description="Waiver">
			<siteMapNode url="" title="Home" description="Go to the homepage" />
		</siteMapNode>
	</siteMapNode>
</siteMap>

Open in new window

0
Comment
Question by:leskelly
  • 2
3 Comments
 
LVL 8

Expert Comment

by:Altin Bardhi
ID: 30094255
I didn't dive deeply into your application. If you need to style the sidebar menu then you can do the following.

#divSideBar a:hover
{
background:#999999;
}

If you meant the <siteMap> it may be another reference matter.
I did not find any class for .DynamicHoverStyle within your code. If you are trying to style an element using CSS than you have to give it an ID or CLASS name.

Hope this helps a little.

Regards

0
 

Author Comment

by:leskelly
ID: 30112929
I am styling the side bar and that works fine.  It's the DynamicHoverStyle of the menu that the problem is with.

If you look at line 64 your'll see the DynamicHoverStyle and if you look at line 162 you'll see the CssClass name.

0
 

Accepted Solution

by:
leskelly earned 0 total points
ID: 30151406
I also posted this in the CSS zone and got a solution.  The ID for the post is 25752354.
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month8 days, 21 hours left to enroll

590 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