Стилизация элемента управления меню диска данных в asp.net
Управляемый данными элемент управления asp.net, который я успешно создал в:
Проблема при создании меню, управляемого данными в asp.net
Теперь нужно стилизовать с помощью CSS, я применил CSS, ссылаясь на следующую ссылку:
http://www.codeproject.com/Tips/526004/Database-driven-dynamic-Menu-Control
и он отлично работает в IE 8. Но почему-то я не чувствую удовлетворения от его внешнего вида и хочу более интерактивно выглядящее меню.
Итак, я прошу дизайнеров дать мне ссылку или код в css, чтобы стилизовать мое меню.
(PS код, который будет передан, будет начального уровня, так как я новичок в разработке asp.net, но имею базовые знания CSS)
Ниже мое изображение того, как мое меню выглядит в IE 8:
и CSS моего меню выглядит так:
.MenuBar { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; }
.StaticMenuItem
{
background-color: #1999cf; -moz-border-radius: 1px;
-webkit-border-radius: 1px; font: 14pt calibri;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
margin: auto; vertical-align: middle; background-repeat: repeat-x;
height: 70px; text-align: center; color: white; padding: 5px;
}
.StaticMenuItemStyle { color: #ffffff; padding: 20px; }
.StaticHoverStyle { background-color: #b6e390; color: #5f5f5f; }
.StaticSelectedStyle { background-color: #ffe99f; color: #5f5f5f; }
.DynamicMenuItemStyle
{
background-color: #bdeafe; border-width: 1px; border-style: solid;
border-color: #000000; -moz-border-radius: 1px; -webkit-border-radius: 1px;
font: 13pt calibri; margin: auto;border-left: 0px solid #c1c1c1;
border-right: 0px solid #c1c1c1; border-top: 0px solid #c1c1c1;
border-bottom: 1px solid #c1c1c1; border-spacing: 0px;
vertical-align: middle; background-repeat: repeat-x;
height: 50px; text-align: left; color: #5f5f5f; padding: 5px;
}
.DynamicHoverStyle { background-color: #eca74c; color: #ffffff; }
и код для моего меню управления, как под:
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%" MaximumDynamicDisplayLevels="10">
<StaticMenuStyle CssClass="StaticMenuItem" />
<StaticMenuItemStyle CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<StaticSelectedStyle CssClass="StaticSelectedStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>