0

I am working on a wordpress menus. my sub menu image is little bend to angle. I have attached the image for better understandings. My problem is concerned with sub menu.

enter image description here

background image enter image description here

I want the sub menu background image to expland according to content. I mean if I am having 2 sub menus menus then I dont want to show full heighted sub menu background

Please suggest how I can achieve this.

html

<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;
}

my subMenu class is having the sub menu background. I know this is not ideal code but I only wanted to know how to stick it to top according to content while background image is bend to an angle.

Sharmaji
  • 599
  • 2
  • 9
  • 23

1 Answers1

0

Remove the height specified for submenuMenu. Add height as auto

.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;
}

Make sure that your image is of 25-30px height and for the remaining space you can give background-color.

Sowmya
  • 26,684
  • 21
  • 96
  • 136
  • already tried the same. but background image is cutting . I want the background image bottom whichi is cutt at angle. you can see at the bottom of image. – Sharmaji Sep 17 '12 at 09:41
  • Please have a look at the edited question. my bacground image is bend with angle. – Sharmaji Sep 17 '12 at 09:45
  • your image has solid color so you can crop the bottom of the image for 30-35px of height ( to take the shadow effect). And add the css which is given in answer – Sowmya Sep 17 '12 at 09:48
  • yes you are right. but that image is coming at an angle. How can I repeat this angular image ? – Sharmaji Sep 17 '12 at 09:50
  • Crop the image as png image so the angle remains the same. Meaning basically you should crop as rectangular with transparent bg – Sowmya Sep 17 '12 at 09:51
  • If the bg color is visible through the png image then remove bg-color from the submenuMenu css and give that bg-color to the submenuMenu li – Sowmya Sep 17 '12 at 09:53
  • ohk..and what about the bottom of image. should i need to have another div and then pick another part of the image there as bg. will it match to the angle. – Sharmaji Sep 17 '12 at 09:54
  • You need not to change/add anything in html. If you can add the html and css both then I can help you through live demo – Sowmya Sep 17 '12 at 09:55
  • @Sowmya just make the live demo than OP will understand easily :-) – Shailender Arora Sep 17 '12 at 10:12