5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

How to I make my submenu wider?

by oliverjones
4 replies
  • WEB DESIGN
    • |
Hi

On my site you will see that the submenu of "Polls" is not showing on one line?

How can I make it that the submenu goes wider automatically to the width of the title?



I think the css I need to amend is

#nav1 ul.sf-menu li a {
color: #333333;
display: block;
position: relative;
float: left;
text-decoration: none;
padding: 0 29px;
cursor: pointer;
}
#nav1 ul.sf-menu li a:hover {
text-decoration: none;
background: #FEFEFE;
}
#nav1 ul.sf-menu li ul.sub-menu {
border: 1px solid #000000;
background: #272726 url(images/ul_children_bg.gif) repeat-y top right;
}
#nav1 ul.sf-menu li ul.sub-menu li {
background: url(images/ul_children_li_bg.gif) no-repeat bottom right;}
#nav1 ul.sf-menu li ul.sub-menu li a {
color: #bebebe;
text-decoration: none;
display:block;
}
#nav1 ul.sf-menu li ul.sub-menu li a:hover {
text-decoration: none;
background: none;
}
#nav1 ul.sf-menu li ul.sub-menu li ul.sub-menu {
border: 1px solid #000000;
border-left: none;
background: #272726 url(images/ul_children_ul_children_bg.gif) repeat-y top left;
}
#nav1 ul.sf-menu li ul.sub-menu li ul.sub-menu li {
background: url(images/ul_children_li_bg.gif) no-repeat bottom right;
}
#nav1 ul.sf-menu li ul.sub-menu li ul.sub-menu a {
color: #bebebe;
text-decoration: none;
}
#nav1 ul.sf-menu li ul.sub-menu
{
margin:5px 0 0 0;
}
#nav1 ul.sf-menu li ul.sub-menu ul.sub-menu
{
margin:-1px 0 0 27px;
}
#make #submenu #wider
  • Profile picture of the author Nathan K
    Change the following lines in your superfish.css file.

    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 12em; //remove this line
    }

    .sf-menu li {
    float: left;
    position: relative;
    white-space: nowrap; //add this line
    *white-space: normal; //add this line
    }
    {{ DiscussionBoard.errors[8492452].message }}
    • Profile picture of the author oliverjones
      Hi thanks very much I changed it to the following. It now is on one line but the black behind the text is not working quite right. Have I done something wrong?

      /* SUPERFISH STYLESHEET ---------------------------------- */
      .sf-menu, .sf-menu * { margin:0; padding:0; list-style:none }
      .sf-menu { line-height:1.0 }
      .sf-menu ul { position:absolute; top:-999em; width:12em; }

      /* fixes IE7 'sticky bug' */
      .sf-menu li:hover { visibility:inherit }

      .sf-menu li { float:left; position:relative;
      white-space: nowrap;
      *white-space; normal;
      }
      .sf-menu a { display:block; position:relative }

      .sf-menu li:hover ul,
      .sf-menu li.sfHover ul { left:0; top:2.4em; /* match top ul list item height */ z-index:99 }

      ul.sf-menu li:hover li ul,
      ul.sf-menu li.sfHover li ul { top:-999em }

      ul.sf-menu li li:hover ul,
      ul.sf-menu li li.sfHover ul { left:12em; top:-0.1em }

      ul.sf-menu li li:hover li ul,
      ul.sf-menu li li.sfHover li ul { top:-999em }

      ul.sf-menu li li li:hover ul,
      ul.sf-menu li li li.sfHover ul { left:12em; top:-0.1em }

      .sf-menu li:hover ul,
      .sf-menu li.sfHover ul {
      left: 0;
      top: 2.5em; /* match top ul list item height */
      z-index: 99;
      }
      ul.sf-menu li:hover li ul,
      ul.sf-menu li.sfHover li ul {
      top: -999em;
      }
      ul.sf-menu li li:hover ul,
      ul.sf-menu li li.sfHover ul {
      left: 10em; /* match ul width */
      top: 0;
      }
      ul.sf-menu li li:hover li ul,
      ul.sf-menu li li.sfHover li ul {
      top: -999em;
      }
      ul.sf-menu li li li:hover ul,
      ul.sf-menu li li li.sfHover ul {
      left: 10em; /* match ul width */
      top: 0;
      }
      {{ DiscussionBoard.errors[8492486].message }}
  • Profile picture of the author Nathan K
    You did not remove the width

    .sf-menu ul {
    position: absolute;
    top: -999em;
    width: 12em; //remove this line
    }
    {{ DiscussionBoard.errors[8492506].message }}
  • Profile picture of the author oliverjones
    Sorted thanks mate
    {{ DiscussionBoard.errors[8492558].message }}

Trending Topics