背景圖片始終對齊頂部

我正在使用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

背景圖片始終對齊頂部

回答

相關問題