背景图片始终对齐顶部

我正在使用wordpress菜单。我的子菜单图像很少弯曲到角度。为了更好的理解，我附上了图片。我的问题与子菜单有关。背景图片始终对齐顶部

enter image description here

背景图像 enter image description here

我想要的子菜单背景图片，以根据内容expland。我的意思是，如果我有2个子菜单菜单，那么我不想显示完整的高度子菜单背景

请建议我如何实现这一目标。

<ul id="menu" class="nav-main"> 
<li><a href="<?php bloginfo('url'); ?>">HOME</a></li> 
<li> <a href="<?php bloginfo('url'); ?>/">Menu 1</a> 
    <ul class="nav-sub submenuMenu1"> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    </ul> 
</li> 
<li> <a href="<?php bloginfo('url'); ?>">Menu 2</a> 
    <ul class="nav-sub submenuMenu2"> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    </ul> 
</li> 
<li> <a href="<?php bloginfo('url'); ?>">Menu 3</a> 
    <ul class="nav-sub submenuMenu3"> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    </ul> 
</li> 
<li> <a href="<?php bloginfo('url'); ?>/fundraise/">Menu 4</a> 
    <ul class="nav-sub submenuMenu4"> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    <li><a href=""></a></li> 
    </ul> 
</li> 






#menu { 
    width: 550px; 
    height: auto; 
    float: left; 
    margin: 23px 0 0 62px; 
} 
#menu li { 
    margin: 0 0 0 0; 
    list-style-type:none; 
} 
#menu a { 
    font-size: 14px; 
    font-weight: bold; 
    padding: 0 0 0 23px; 
    text-decoration: none; 
    text-shadow: 0.1em 0.1em #666; 
} 
ul.main-nav, ul.main-nav li { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
.main-nav { 
    z-index: 597; 
} 
.main-nav li:hover > ul { 
    visibility: visible; 
} 
.main-nav li.hover, .main-nav li:hover { 
    z-index: 599; 
    cursor: pointer; 
} 
.main-nav li { 
    float:left; 
    display:block; 
} 
.main-nav li a { 
    float: left; 
    display:block; 
    margin: 0!Important; 
} 
ul.nav-sub { 
    visibility: hidden; 
    position: absolute; 
    padding:0; 
    top: 0; 
    left: 0; 
    z-index: 598; 
} 
ul.nav-sub li { 
    list-style:none; 
    display:block; 
    padding: 0; 
    float: left; 
    padding: 5px; 
} 

ul.nav-sub li a { 
    font-size: 12px!important; 
    font-weight: bold; 
    text-shadow: 0.1em 0.1em #666; 
    text-transform:uppercase; 
} 

ul.nav-sub a:hover { 
    text-decoration: underline!Important; 
} 
.submenuMenu{ 
    width: 649px; 
    height: 264px; 
    float: left; 
    margin: 39px 0 0 3px; 
    padding: 11px 0 0 0!important; 
    background: url(../img/bg_submenu.png) -1px 0 no-repeat; 
} 

.submenuMenu li { 
    width: 300px!important; 
    margin: 0!Important; 
    padding: 5px 200px 5px 117px!important; 
}

我的子类，具有子菜单的背景HTML。我知道这不是理想的代码，但我只想知道如何根据内容将其粘贴到顶部，而背景图像弯曲成角度。

来源

2012-09-17 Sharmaji

你可以添加你的代码（HTML＆CSS） – Sowmya

请现在看看。我的subMenu类具有子菜单背景。我知道这并不理想，但我只想知道如何在背景图像弯曲到某个角度时将其粘贴到顶部。 – Sharmaji

html ?? .......... – Sowmya

删除为子菜单指定的高度。自动添加高度

.submenuMenu{ 
    width: 649px; 
    height: auto; 
    float: left; 
    margin: 39px 0 0 3px; 
    padding: 11px 0 0 0!important; 
    background: url(../img/bg_submenu.png) left bottom no-repeat, #f4bfd5; 
}

确保图像的高度为25-30像素，剩下的空间可以给背景颜色。

来源

2012-09-17 09:39:09 Sowmya

已经尝试过了。但背景图像正在切割。我想要在背景图像底部切角的角度。你可以看到图像的底部。 – Sharmaji

检查已编辑的答案 – Sowmya

请查看已编辑的问题。我的背景图像与角度弯曲。 – Sharmaji

背景图片始终对齐顶部

回答

相关问题