CODEWITHSUNDEEP
htmlcsslistmenu
Roman Sobol
Roman Sobol

Reputation: 75

Menu dropdown list is too long

Drop-down menu on my website (at a resolution of 1366x768) has too many items, and goes beyond the boundaries of the logo. How can I make the restriction on the number of items in the css (not to go beyond the logo, just to transfer on the next line)?

Site: http://womab.com.ua/en/for-authors/ (active item: Infromation for contributors, see submenu list below).

Now in CSS:

menu ul.submenu {
  position: absolute;
  left: 0;
  width: 93%;
  text-align: right;
  padding: 0 7% .8em 0;
  margin: 0;
}

Thanks in advance!

Upvotes: 4

Views: 3743

Answers (3)

wkucewicz
wkucewicz

Reputation: 1

Convert your one-column submenu into two columns using div tags.

<div style="float: left; width: 50%;"> </div>

Place half your list between the div tags and the other half between another set of div tags. No other code changes are needed. The submenu will automatically become double wide.

By changing the width percentage you can add even more columns (e.g., 33% for three columns, 25% for four columns).

Upvotes: 0

Vinith Almeida
Vinith Almeida

Reputation: 1471

menu ul.submenu {
    margin: 0;
    padding: 0 7% 0.8em 0;
    position: absolute;
    right: 20%;
    text-align: right;
    width: 50%;
}

Use media queries with different values on the right and width property to make it work on smaller layouts.

Upvotes: 3

Dan Jay
Dan Jay

Reputation: 871

also you could try these;

  menu ul.submenu {
    position: absolute;
    left: 0px;
    width: 87%;
    text-align: right;
    padding: 0px;
    margin-left: 176px;
    font-size: 15px;
}

but also recommend media queries.

Upvotes: 1

Related Questions