Home/ Questions/Q 8288703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T12:19:49+00:00

My problem: if the name of a main nav item in my dropdown menu

  • 0

My problem: if the name of a main nav item in my dropdown menu increases in character length, my dropdown menu breaks (see attached imageTwo). messed up layout when characters are increased in nav item name

I’m using relative units of measure (ems mostly) in hopes that would give some responsiveness to my design and adjust the layout in case of an increase in character length of the main nav items but it didn’t work.

My main menu is relatively positioned and the sub-menus are absolutely positioned. These sub-menus, rather than dropdown vertically as is standard, instead expand horizontally in parallel to the main menu above it (see attached imageOne). how the menu should look

My goal now is to figure out how to correct code so that, in case of an increase or decrease in number of characters for the nav items in the main menu a) my main nav menu can readjust it’s width appropriately and b) my sub-menu will readjust it’s positioning to appear directly beneath the main menu above it.

My thought is, I will need to use some jQuery to do this but I wondered if it was possible using only CSS.

I’ve posted my CSS below; please let me know if more information is needed.

#navigation {
  background: rgb(102,102,102); 
  max-height: 3.34em;
  padding: 0;
  position: relative;
  max-width: 48.5em;
  border-radius: 0;
}

#navigation .child-menu, #navigation .child-menu2 {
  display: none;
}

#navigation li.hover #admin-submenu  {
  left: -405px;
}

#navigation li.hover .child-menu {
  background: #47766c;
  display: block;
  position: absolute;
  width: 80em;          
  z-index: 250;
  top: 39px;
  left: -334px;
}

#navigation ul li ul li:hover .child-menu2 {
  background: #47766C;
  display: block;
  left: 0;
  position: absolute;
  top: 40px;
  width: 110px;
  z-index: 250;
}

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #navigation ul li ul {
    position:absolute;
    min-width:100%;
    height:40px;
    margin:0px;
    padding:0px;
    left:0px;
    top:40px;
}
#navigation ul li ul li {
   float:left;
   height:40px;
   display:block;
   padding-left:15px;
   padding-right:15px;
}

    You have to set the min-width of the submenus ul tag to 100% or same width as the page. Then its left:0px; Then the top is 40px or same as the parent menu height.

    • 0