positioning, block size and background in a CSS drop down menu

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>

---

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.