我创建了一个菜单控件。有主菜单项,然后是静态项。菜单控件放置一个指向右侧的默认箭头。我想改变方向,指向下方,而且,似乎默认菜单控件为箭头的放置创建了一个单独的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 ....菜单项和箭头之间有一个间隙,表明有子项目。在视觉上看起来,其中一个菜单项的箭头位于下一个菜单项的开头。
这是我的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>
如何将箭头向后移动一点点,使其落在菜单的同一部分而不是下一部分的开头。