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!

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;

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..

    How to use css to crop images from left and right without knowing dimensions

    how to animate a div towards different direction and fade out using jquery

    How to make text appears alitter above using html and css

    How to do formatting using CSS to table

    How to use a full width image as border between content and footer

    How to create e-commerce website [closed]

    How to re-size an image inserted via tag?

    How do I stop a CSS layout from distorting when zooming in/out?

    How to Add external Javascript and CSS for CakePhp

    How to have a centered layout with border (background-image), and footer sticked to the bottom?

    how to set break for print page(div) using css?

    How to debug CSS/Javascript hover issues

    How to add a:hover css function to this code?

    how to use dialogClass option in jquery dialog with an external CSS file

    How to make website change its layout of image/text when the browser dimensions are changed?

    How to style easypiechart using CSS?

    How to select every 4th div inside another div CSS Selector [closed]

    how do I float a div over a background image in a different div

    A scrollbar showing within DIV. What CSS is causing this?

    How to create transparent text on non-transparent background

    How to dynamically scale images per height using pure CSS?

    How to draw heart using HTML/CSS table?

    How to toggle css visibility with Javascript

    How to create a loading image sprite using background position

    How to align two columns of text in CSS

    How to switch between css with jquery

    How to attach for every Array-Element in jQuery different Animationeffects? And animate one by one forwards and backwards with 2 Buttons(back&next)?

    How to override nth-child

    How to generate the following control using html and css

    How to align this CSS menu to the right of its containing div?