Home/ Questions/Q 3500734
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T12:46:16+00:00

This may be an easy one. I looked through previous questions (and other places

  • 0

This may be an easy one. I looked through previous questions (and other places on the web) but cannot find a good solution for my current problem.

I am trying to have a centered drop down menu with CSS based on a list. Nothing very complicated.

This one has a very simple solution for it, but I cannot find what I am doing wrong.

I have two problems at this point (it’s mostly in the first list, have not really looked at the links in the list yet) :
(1) I would like the list coming down to have a background as a large rectangle that encompass all the items in the sub-list
(2) the items in the sub-list are “truncated”, a new line is inserted so that the width does not exceed the width of the list title.

Thanks.

The CSS part

#navbar ul {
    text-align: center;
    width: 100%;
    font-variant: small-caps;
    padding: 5px 0;
    margin-top: 0;
    margin-left: 0;
    }
#navbar ul li {
    background-color: #ccc;
    margin-right: 2%;
    color: #069;
    text-decoration: none;
    position: relative;
    display: inline;
    padding: 5px 4px;
    }
#navbar li a {
    text-decoration: none; }
#navbar li ul {
    display: none; 
    }
#navbar li:hover ul, #navbar li.hover ul {
    display: block;
    position: absolute;
    text-align: left;
    margin: 8px 0 0 0;
    padding: 0;
    background-color: #eee; }
#navbar li:hover li, #navbar li.hover li {
    padding: 4px 0;
    clear: left;
    }
#navbar li:hover li a, #navbar li.hover li a {
    background-color: #eee;
    border-bottom: 1px solid #fff;
    color: #000; }
#navbar li li a:hover {
    background-color: #333; }

The HTML part

   <div id="navbar">
    <ul>
        <li>
            <a href="#" title="">Link 1</a>
        <ul>
                <li>item 1.1 and more</li>
                <li>item 1.2</li>
                <li>item 1.3</li>
                <li>item 1.4 truncated?</li>
                <li>item 1.5</li>
                <li>item 1.6</li>
        </ul>

        </li>
        <li>
            <a href="#" title="">Link 2</a>
            <ul>
                <li><a href="#" title="">Link 2.1</a></li>
                <li><a href="#" title="">Link 2.2</a></li>
                <li><a href="#" title="">Link 2.3</a></li>
                <li><a href="#" title="">Link 2.4</a></li>
                <li><a href="#" title="">Link 2.5</a></li>
                <li><a href="#" title="">Link 2.6</a></li>
            </ul>
        </li>
        <li>
            <a href="#" title="">Link 3</a>
            <ul>
                <li><a href="#" title="">Link 3.1</a></li>
                <li><a href="#" title="">Link 3.2</a></li>
                <li><a href="#" title="">Link 3.3</a></li>
                <li><a href="#" title="">Link 3.4</a></li>
                <li><a href="#" title="">Link 3.5</a></li>
                <li><a href="#" title="">Link 3.6</a></li>
        </ul>
    </li>
</ul>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1) It looks like you already have a background rectangle. Do you just want more padding?
    If so, add padding like so:

    #navbar li:hover ul, #navbar li.hover ul {padding:10px}

    2) As for truncating, try

    #navbar li:hover ul, #navbar li.hover ul {word-wrap: break-word;}

    I would however suggest you look take a look at this article, to help you with drop down menus: http://matthewjamestaylor.com/blog/centered-dropdown-menus

    EDIT: Unfortunately, word-wrap is a CSS3 property, and is not supported by all browsers. Additionally, word wrap with cross browser CSS does not appear to be trivial. This post word wrap in css / js has some more information.

    • 0