Стилизация элемента управления меню диска данных в 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>

0 ответов

Другие вопросы по тегам