how to maximize the list to consume max space using css

Question

list this a list for menu purposes i want to maximize the space on the right to match the space on the left but when i increase padding or margin the last menu goes down that should i do for this to match the menu on the left here is my code

css:

    #headermenu {
    /*outline: 1px solid red;*/
}
#headermenu ul {

}
#headermenu ul ul {
    display: none;
}

    #headermenu ul li:hover > ul {
        display:inline-block;
    }
#headermenu ul {
    background: #f69b58; 
    /*background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);  
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);*/
    padding: 0 20.05px;
    list-style: none;
    position: relative;
    display: inline-block;
}
    #headermenu ul:after {
        content: ""; 
        clear: both; 
        display: block;
    }   

    #headermenu ul li {
        float: left;
    }
    #headermenu ul li:hover {
        background: #3eaee9;
        /*background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);*/
    }
        #headermenu ul li:hover a {
            color: #fff;
        }

    #headermenu ul li a {
        display: block; 
        padding: 15px 63.9px;
        color: #552f01; 
        text-decoration: none;
    }   
#headermenu ul ul {
    background: #f69b58; 
    border-radius: 0px; 
    padding: 0;
    position: absolute; 
    top: 100%;
}
    #headermenu ul ul li {
        float: none; 
        /*border-top: 1px solid #6b727c;
        border-bottom: 1px solid #575f6a;*/
        position: relative;
    }
        #headermenu ul ul li a {
            padding: 15px 63.9px;
            color: #fff;
        }   
            #headermenu ul ul li a:hover {
                background: #3eaee9;
            }   
    #headermenu ul ul ul {
        position: absolute; 
        left: 100%; 
        top:0;
    }

list:

<ul id="menu">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Town Office</a>
                            <ul class="submenu">
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 3</a>
                                    <ul class="submenu">
                                        <li><a href="#">SubMenu1</a></li>
                                        <li><a href="#">SubMenu2</a></li>
                                        <li><a href="#">SubMenu3</a></li>
                                        <li><a href="#">SubMenu4</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Sub Menu 4</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">Business</a>
                            <ul class="submenu">
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 3</a></li>
                                <li><a href="#">Sub Menu 4</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">Residents</a>
                            <ul class="submenu">
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 3</a></li>
                                <li><a href="#">Sub Menu 4</a></li>
                            </ul>
                        </li>
                        <li ><a href="#">Tourists</a>
                            <ul class="submenu">
                                <li><a href="#">Sub Menu 1</a></li>
                                <li><a href="#">Sub Menu 2</a></li>
                                <li><a href="#">Sub Menu 3</a></li>
                                <li><a href="#">Sub Menu 4</a></li>
                            </ul>
                        </li>
                    </ul>

using this approach... any help is appreciated... what causes the extra space in the image in the black circle

over

same problem how you remove the space at the end of the list and why does it have that space — , Jul 10 '14 at 06:40

score 1 · Answer 1 · answered Jul 08 '14 at 10:36

1

One of the simplest ways is to use a table-cell layout...no, not an actual table but...

JSfiddle

CSS

#menu ul {
    padding: 0 3px;
    display: table;     /* add this */
    width:100%;     /* add this */
}
#menu-list li {
    height: 45px;
    //width: 180px;     /* remove this */
    list-style: none;
    background-color: #f69b58;
    //float: left;     /* remove this */
    display:table-cell; /* add this */ 
    text-align: center;
    font-family: arial;
    font-size: 14px;
    margin-right: 2px;
}
#menu-list li a {
    display: block;
    padding: 13px;
    color: #ffffff;
    text-decoration: none;
}
}
#menu-list li:active {
    color:black;
    background-color: #3EAEE9;
}
#menu-list li:hover {
    background:#3eaee9;
}
#menu-list li.current {
    background-image: -webkit-linear-gradient(top, rgb(7, 80, 158), rgb(6, 101, 243));
    background-color: #3EAEE9;
}

answered Jul 08 '14 at 10:36

Paulie_D

107,962
13
142
161

is there a way i can maximize the space without using table cell i kinda need my approach to work.. – Giant Jul 10 '14 at 06:22
Javascript can calculate these widths for you or you can just count the number of list items and set their width as a percentage of the total. – Paulie_D Jul 10 '14 at 07:03
i tried using % but the problem is the last item goes down..and i wont work because i have another list when on hover and it affects that list as well when i change size to % – Giant Jul 10 '14 at 07:07
you mean to say the only way is to adjust the width nothing more?thank you for clearing this out mate i appreciate it happy coding – Giant Jul 10 '14 at 07:16

Vladimir Shevchuk · Answer 2 · 2014-07-08T11:07:43.743

1

You should change #menu-list li {display: inline-block;} #menu ul {text-align: center;}, delete float: left and change width of li

See Fiddle

but I would advise use display:table, display: table-cell properties;

See Fiddle

edited Jul 08 '14 at 11:07

answered Jul 08 '14 at 10:42

Vladimir Shevchuk

75
2
9

is there a way i can maximize the space without using table cell i kinda need my approach to work.. – Giant Jul 10 '14 at 06:20
1

@Hak Hak I can offer solution with li {display: inline-block} and ul { white-space: nowrap;} http://jsfiddle.net/dosandk/tLHW4/ – Vladimir Shevchuk Jul 10 '14 at 08:23
its working really nice but i need to make it in float left because im planning to put another list on hover if i user your code when i hover the menu in the the next level is not looking really nice – Giant Jul 10 '14 at 08:33
@Hak Hak Can you share code with second level menu? – Vladimir Shevchuk Jul 10 '14 at 09:03

how to maximize the list to consume max space using css

2 Answers2

Linked