Awkward gap between menu items. How to fix?


Tags: php,html,css

Problem :

I am having trouble with the layout of a website I'm making. I'm not very good with CSS.

So the trouble I'm having is that I want to have a horizontal menu bar that I want to center in my website. This menu can have dropdown children.

The implementation is in jQuery. So this is the HTML code of my menu bar :

<ul class='dropdown'>
    <li><a href='index.php'>Home</a></li>
    <li><a href='#'>Incident</a>
        <ul class='sub_menu'>
            <li><a href='index.php?action=new'>New</a></li>
            <li><a href='index.php?action=edit'>Edit</a></li>
            <li><a href='index.php?action=manage'>Manage</a></li>
        </ul>
    </li>
    <li><a href='action_logout.php'>Log out</a></li>
</ul>

and this is the CSS that is being implemented :

*                                   { margin: 0; padding: 0; }
body                                { font: 14px Helvetica, Sans-Serif; margin: 15px; } 
a                                   { text-decoration: none; }
ul                                  { width: 800px; list-style: none; text-align: center; margin: auto; padding: 2px 2px;}
p                                   { margin: 15px 0; }
/* 
    LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { display: inline; font-weight: bold; background: #ccc; padding: 2px 2px; border-bottom: 1px solid #777; }
ul.dropdown a:hover              { color: #000; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: inline; padding: 2px 8px; border-right: 1px solid #777; border-bottom: 1px solid #777;
                                  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }
/* 
    LEVEL TWO
*/
ul.dropdown ul                      { width: 175px; visibility: hidden; position: absolute; top: 100%; left: 0; text-align: left; }
ul.dropdown ul li                   { font-weight: normal; background: #f6f6f6; color: #000; 
                                  border-bottom: 1px solid #ccc; float: none; }
                                /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a                 { border-right: none; width: 100%; display: inline-block; } 

An Example can be seen here.

I did manage to center my menu bar after all. However there seems to be a little gap between Home and Incident menus and I've no idea how to get rid of it.

Any ideas? Thank you in advance.



Solution :

How about this: http://dabblet.com/gist/2520870

Your code was a mess.

<style>
    * {
        padding: 0;
        margin:  0;
    }

    body {
        font-family: helvetica, serif;
        font-size:   14px;
    }

    ul {
        list-style-type: none;
    }

    .dropdown {
        text-align: center;
        font-size:  0;
        margin:     15px;
    }

    ul.dropdown ul {
        width:      220px;
        visibility: hidden;
        position: absolute;
        top: 1.8em;
        left: 0;
    }

    ul.dropdown ul li a {
        font-weight:   normal;
        background:    #f6f6f6;
        color:         #000;
        border-bottom: 1px solid #ccc;
        float:         none;
    }

    .dropdown > li {
        display:   inline-block;
        height:    1.2em;
        font-size: 14px;
        position: relative;
    }

    .dropdown li a {
        display:         block;
        background:      rgb(204, 204, 204);
        border-bottom:   rgb(119, 119, 119) 1px solid;
        border-right:    rgb(119, 119, 119) 1px solid;
        padding: 0.3em;
        color:           rgb(0, 0, 0);
        text-decoration: none;
        font-weight:     bold;
    }

    .dropdown li a:hover {
        background: rgb(243, 214, 115);
    }
</style>

<ul class='dropdown'>
    <li><a href='index.php'>Home</a></li>
    <li><a href='#'>Incident</a>
        <ul class='sub_menu'>
            <li><a href='index.php?action=new'>New</a></li>
            <li><a href='index.php?action=edit'>Edit</a></li>
            <li><a href='index.php?action=manage'>Manage</a></li>
        </ul>
    </li>
    <li><a href='action_logout.php'>Log out</a></li>
</ul>

Try this new code. Though I urge you to not try and implement someone else's code without understanding it first!


    CSS Howto..

    How to apply pseudo-element styling to specific class only?

    How to write a CSS selector that works on nested divs and selects the closest match?

    How to ensure both scale and slide up can occur for dynamic text using css and js?

    How to make a child div to grow to full screen using CSS?

    How to compile less css files using brunch

    Once I've designed a navigation bar using CSS & html — how can I put the html code in one place so it shows in each window? [duplicate]

    (jQuery) How to animate the elements inside a scrollable div when they come into sight on scroll?

    How to fade out after hover is done using CSS

    How to format a button with in Form tag, html?

    how to organize all js, css, php and html code?

    How to make a div 100% of page (not screen) height?

    Disable the centring image function in a slideshow plugin?

    How to keep text aligned with the middle of a textarea?

    how to select an anchor tag with a specific id inside a ul using css

    How to change CSS when it's ng-disabled?

    How to make a main div appear next to a sidebar

    how to set equal font size in table cells for mobile device html pages

    How to add multiple style rules to css pseudo elements using js?

    How to lessen CSS

    How to make this Header/Content/Footer/Menu layout using CSS?

    How to place something in a triangle-shaped box?

    How at least approximately imitate col-md-1.5?

    Jquery - 100% width slideshow whilst keeping the height propotional

    How to display an image from a dropdown menu selection?

    How to get different height html divs to float up

    How to access CSS on img tag

    How to change height of a dynamically embedded gist?

    How do I allow CSS files to be referenced from other domains?

    How do I add a CSS class to a BoundField, so I can find it with jQuery?

    gwt how to use setStyleName(String style, boolean add) - for a gwt standard widget