C#Menu Control放置一个超出菜单项的箭头

时间:2014-11-26 18:15:06

标签: c# css menu

我创建了一个菜单控件。有主菜单项,然后是静态项。菜单控件放置一个指向右侧的默认箭头。我想改变方向,指向下方,而且,似乎默认菜单控件为箭头的放置创建了一个单独的td。我不喜欢这个,因为这实际上将箭头放在菜单项之外。

所以我禁用了默认箭头并添加了我自己的箭头。

// Create a new Menu control.
    _MainNav = new Menu();
    _MainNav.StaticEnableDefaultPopOutImage = false;
    _MainNav.DynamicEnableDefaultPopOutImage = false;
    _MainNav.StaticPopOutImageUrl = "~/App_Themes/Images/Arrow.png";
    _MainNav.DynamicPopOutImageUrl = "~/App_Themes/Images/Arrow.png";

这固定了箭头的方向。从指向右边,现在指向下方。

然而,箭头仍然放在一个新的td ....菜单项和箭头之间有一个间隙,表明有子项目。在视觉上看起来,其中一个菜单项的箭头位于下一个菜单项的开头。

enter image description here

这是我的css: -

div.nav
{
    border: 1px solid #fff;
    width: 960px;
    border-bottom-width: 2px;
    clear: both;
}

.menu
{
    padding: 0;
    margin: 0;
    width: 960px;
    background-color: #71cd7b;
    display: inline-block;
    border-bottom: 1px solid white;
    font-size: 15px;
}
.menu tr
{
    text-align: left;
    padding: 0;
    margin: 0;
    list-style: none;
    float: left;
}
.menu td
{
    float: left;
    padding: 0;
    margin: 0;
    white-space: nowrap;
}
.menu td a
{
    float: left;
    width: 134px;
    height: 25px;
    padding-top: 10px;
    text-indent: 15px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    background-image: url(Images/divider.jpg);
    background-position: right;
    background-repeat: repeat-y;
}
.menu td a:hover
{
    background-color: #7156a4;
    font-size: 15px;
}
.menu td a.active
{
    background-color: #7156a4;
    font-size: 15px;
}


.subMenu
{
    border:1px double Black;   
    border-width: thin;
}

.subMenuItem
{
    background-color : white;
    width: 160px;
    margin-left:5px;
    margin-top:2px;
    margin-bottom:5px;
    font-family:@Arial Unicode MS;
    color:Black;
}

.subMenuItem:hover
{
    background-color :#7156a4;   
    margin-left:5px;
    margin-top:3px;
    margin-bottom:2px;
    margin-right:5px;
    font-weight:bold;
    color:White;
}

我的HTML: -

<div id="nav" class="nav">
            <asp:PlaceHolder ID="MenuPlaceHolder" runat="server" />
        </div>
        <div class="body_block">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>

如何将箭头向后移动一点点,使其落在菜单的同一部分而不是下一部分的开头。

0 个答案:

没有答案