How do I control the spacing between my child links in my CSS driven menu dropdown?


Tags: html,css,drop-down-menu,hover,spacing

Problem :

This discussion has already been great in helping me set my nav bar. But now, my child links have large spaces between and do not line up with the parent links.

My site can be seen here

Any ideas on how to align my child links (Los Angeles, San Diego Honolulu...etc.) with the parent link (Location)? Also, how do I reduce the space between the child links (Los Angeles, San Diego, Honolulu...)?

This is my CSS for quicker reference.

#mainNav {
/*font-size: 1.0em;    doesn't seem to do anything*/
/*height: 20px;      doesn't seem to do anything*/
margin-top: -10px;
position: absolute;
right: 5%;
top: 40%;
}
/*-------------------------------*/
/*----------Below is CSS for List of Parent Links---------------------*/
#mainNav ul {                               
list-style-type: none;
position: relative;
display: inline-table;
}
/*----------Below is CSS for List of Location Links---------------------*/
#mainNav ul ul{
list-style: none;
display: none;
}
/*----------Below is CSS for List of Location---------------------*/
#mainNav ul li {float: left;
text-decoration: none;
margin: 0 0 0 25px;
padding-top: 0;
float: left;
width: auto;
list-style: none outside none;
font-size: 0.90em;
text-transform: uppercase;}

#mainNav ul li a {display: block; text-decoration: none;}

#mainNav ul ul {
display: none; /*if this is block, it causes all the sub links to show at once!*/
position: absolute;
width: auto;
top: 35%;
}

#mainNav ul li:hover > ul { display: block;}
#mainNav ul ul li {width: 100%;}

#mainNav li li {
float: none;
width: auto;
}


Solution :

This code ended up doing it for me. I think you copied and pasted wrong Rohit!

li{
list-style: none;
display: inline-block;
/*width: 150px;*/
max-width: auto;
}

ul li a{
text-decoration: none;
display: block;
text-align: center;

padding: 10px; /*needed for spacing between LOCATIONS and LOS ANGELES*/
}

ul li ul li a{
padding-top: 5px;
margin-top: 5px;
float: left;
font-weight:bold;
}

ul ul{
position: absolute;
visibility: hidden;
}

#mainNav ul li:hover ul{
visibility: visible;
padding: 0;
}

ul li ul li{
display: block;
}

Click here for the latest.


    CSS Howto..

    Show required asterisk star after the text?

    How to make a sliding dashboard similar to medium.com? [closed]

    How can I remove comments on-fly from my static CSS files?

    How to add JS and CSS to all content parts in an Orchard module

    How can I prevent styles from applying to certain HTML snippets?

    How to fill a QTextBrowser with a single table in Qt?

    How to make image clipping in css

    How to create an div background that is not affected by page zoom with CSS

    How to trigger div visibility when hovering over list item in CSS?

    How to remove/add jQueryUI CSS theme from specific element?

    How to put the div at the center with css?

    how to make background css url dynamic using jquery

    how to apply css to a link within a particular div only?

    How to change scrollbar in textarea input?

    CSS: How to set up border radius cross browser (only IE8 and IE9 missing ?)

    How to edit itemprop in div class in CSS? (Wordpress)

    How to align
  • to the top when higher items are hidden via CSS
  • How i can make a dynamic css class without use of id?

    How to change the css of the div that i just created in code

    how to center text vertically in html using css only

    How can I use :nth-child() to select every other
    within ALL children?

    (CSS) How to Shorten CSS code

    How to give menu sub menu options

    How do I make a placeholder for a 'select' box?

    How to run a different html file when device width changes?

    How to use getElementId on and ID's Element

    Blogger Template: how to change the color of the border css

    CSS triangle over a div using :before and :after - weird offset, how to fix?

    How to make an element's position absolute in page, despite an ancestor having absolute position

    How can I set the Eclipse JS to edit a file as CSS