Applying styles to menu items has been a bit tricky for me. When I hover over the container, nothing seems to happen, even though the hover style is applied to the container. The action only takes place when I click on the text of the link. Stylesheet:
.staticItem:Hover
{
background-color:#FFFF66;
color:maroon;
width:105px;
width:100%;
padding-left:5px;
background-position:right;
background-repeat:no-repeat;
background-image:url('Images/Go_hover.png');
box-shadow:2px 3px 3px rgba(61,00,00,.5) inset;
border:1px #610000 solid;
padding-left:10px;
padding-right:19px;
}
.staticItem
{
background-color:maroon;
color:white;
font-size:18px;
font-family: "High Tower Text";
font-weight:bold;
padding-top:2px;
padding-bottom:2px;
padding-left:19px;
padding-right:10px;
width:100%;
background-position:left;
background-repeat:no-repeat;
background-image:url('Images/Go.png');
border:2px #610000 solid;
cursor:pointer;
border-radius:5px;
box-shadow:3px 3px 10px rgba(61,00,00,.8);
}
ASP code:
<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" OnMenuItemClick="Menu1_MenuItemClick">
<StaticMenuItemStyle CssClass="staticItem" />
<Items>
<asp:MenuItem Text="Inbox" Value="Inbox"
NavigateUrl="~/DataEntryOperator/Inbox.aspx">
</asp:MenuItem>
<asp:MenuItem NavigateUrl="~/DataEntryOperator/Outbox.aspx" Text="Outbox"
Value="Outbox"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/DataEntryOperator/Compose.aspx" Text="Compose"
Value="Compose"></asp:MenuItem>
<asp:MenuItem Text="Add Employee" Value="Add Employee"
NavigateUrl="~/DataEntryOperator/DEOAdd.aspx">
</asp:MenuItem>
<asp:MenuItem Text="Attendance" Value="Attendance"
NavigateUrl="~/DataEntryOperator/Employee Attendance.aspx"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/DataEntryOperator/Employee Salary.aspx"
Text="Salary Payment" Value="Salary Payment"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/DataEntryOperator/LeaveManager.aspx" Text="Leave Manager"
Value="Leave Manager"></asp:MenuItem>
<asp:MenuItem NavigateUrl="~/DataEntryOperator/Settings.aspx" Text="Settings"
Value="Settings"></asp:MenuItem>
<asp:MenuItem Text="Logout" Value="Logout"></asp:MenuItem>
</Items>
</asp:Menu>
I hope these images provide more clarity on the issue.
[When hovering inside the container but outside the text]
[When hovering inside the container but outside the text]
[When hovering inside the text]