Drop Down Menu / Posts /

How to make full width sub menu


Can ddmenu be made to behave like http://www.sportsauthority.com?

So that all sub-menus will have the same width as the main menu, and also drop down from the same position of the main menu?

Main menu and sub-menus have the same width

Thomas  10 years ago   viewed: 45243    

6 Answers


A slight modification of the same question.

Can I create a menu which behaves like Vanderbilt's sports site?

See: http://screencast.com/t/JhsVkIGsviD  (http://vucommodores.com)

  9 years ago

Yes you can, as long as you know how to tweak the CSS styles.

Milo   9 years ago

Since ddmenu release v2014.11.20, it has a much easier solution. You just need to add class="full-width" to the <li> element.

Milo   9 years ago
I tried the solution above but to no avail. I just can't seem to set the dropdown width to a fixed px value. Here is the link.
Vincent   10 years ago
I found where your issue is. We also need to add !important after the 100%:
#ddmenu div.drop { position:absolute; width: 100%!important; /*Added*/ padding:0; ..... }
Milo   10 years ago

Good question!

Yes you can easily get the full span style demo by the following steps:

  • Download your demo from http://www.menucool.com/drop-down-menu
  • Open the ddmenu.css file with Notepad, and remove the line: 
        from the #ddmenu li { ... } block.
  • Add: width:100%!important; box-sizing:border-box; into the #ddmenu div.drop { ... }
    #ddmenu div.drop { ... width:100%!important; /* or: width:1200px!important;*/ box-sizing:border-box; }

That's it. Now the sub-menus will span across the full width of the main menu. 

Milo   10 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: