WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] Space to left of <li>s in my drop down menu

Reply
  Thread Tools Display Modes
Old 12th June 11, 08:47 PM   #1
jmayoff
WLC Member
 
Join Date: Jun 2011
Posts: 16
Default Space to left of <li>s in my drop down menu

I'm trying to create a menu with drop down sub-menus, using the Menus tool in Wordpress. I don't have a problem creating the menu, but I do have a problem styling it. My problem is that there's a space to the left of each sub-menu item that I am having a hard time getting rid of.

Here's what it looks like:


I've tried every combination of margin-left:0; and padding-left:0; and text-align: left; and float: left; that I can come up with. I've tried setting negative left margins and paddings. You name it, I've tried it.

Of note: when I tried negative left margins and/or paddings I got things like this:



Oh, and I also tried adding a list-style-type: none; to couple of the elements, thinking there may be an invisible bullet somewhere.

Here's the CSS for the menu. (I may have left some extraneous left-margins and things in the CSS that don't do anything.)

Code:
ul#menu-new-main  {
 float:right;	
 position: relative;
 width: 900px;
 height: 30px;
 padding: 0 8px;
 #border-top: 1px solid #000000;
 #border-bottom: 1px solid #000000;
}


ul#menu-new-main li  {
 display: block;
 float: right;
 height: 25px;
 width: 110px;
 overflow: hidden;
 list-style-type: none;
 #background-color: #efefff;

}

ul#menu-new-main li a {
 display: block;
 width: 110px;
 height: 20px;
 margin-top: 0px;
 font: normal 14px Verdana, Geneva, sans-serif;
 text-align: center;
 text-decoration: none;
 color: #000000;
 border-left: 1px solid #000000;
 #background-color: #ffffaa;
}

ul#menu-new-main li:last-child a {
 border: none;
}

ul#menu-new-main li:hover {
 overflow: visible;
}

ul#menu-new-main ul.sub-menu {	
 width: 150px;
 margin-top: 5px;
 padding: 10px 0;
 margin-left: 0;
 background-color: #dfdfdf;
 border-top: 1px solid #000000;
 border-right: 1px solid #000;
 overflow: hidden;
 float: left;
 text-align: left;

}

ul#menu-new-main ul.sub-menu li {
 height: 15px;
 font: normal 11px Verdana, Geneva, sans-serif;
 background-color: transparent;


}

ul#menu-new-main ul.sub-menu li a {
 display: block;
 padding-left: 0;
 padding-top: 2px;
 width: 150px;
 height: 15px;
 margin-top: 0;
 margin-left: 0;
 font: normal 11px Verdana, Geneva, sans-serif;
 text-align: left;
 text-decoration: none;
 color: #000000;
 background-color: transparent;
 border: none;
 float:left;

}


ul#menu-new-main ul.sub-menu li a:hover {
 text-decoration: underline;
}
If you'd like to, you can see the page here live.

Last edited by meesa; 13th June 11 at 01:07 AM. Reason: Language
jmayoff is offline   Reply With Quote
Old 13th June 11, 01:06 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: Space to left of <li>s in my drop down menu

You need to cancel out the float on the child UL LI. Remember that all of your LI children get the properties of the LI parent unless changed out.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 13th June 11, 04:56 PM   #3
jmayoff
WLC Member
 
Join Date: Jun 2011
Posts: 16
Default Re: Space to left of <li>s in my drop down menu

The problem wasn't in the CSS of the menu itself, but was a problem in some CSS that came previously. It was a combination of a text-align: right and a font size that was too large.

In the end, I decided rather than pursue the problem, to take the navbar from WPs Twenty-Ten theme and modify it for my needs.
jmayoff is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:23 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.