how to remove extra space on dropdown navigation

[gerah]

Good day!

how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas?

thanks a lot! Cheers!

neways heres my code

<div class="nav">		<ul>	            <li>Contacts</li>            <li>e-Book</li>            <li>Blog</li>            <li>Projects            	<ul>                	<li>On-going Projects List</li>                    <li>Completed Project List</li>                    <li>Project Gallery</li>                </ul></li>             <li><a href="services.html">Our Services</a>            	<ul>                	<li>Industrial Commercial Residential</li>            		<li>Supply and Installation</li>                </ul>            </li>            <li><a href="about.html">About Us</a>           		<ul>                	<li><a href="general.html">General Information</a></li>                	<li>Organizational Chart</li>                	<li>Executive Team</li>                	<li>Business Objective</li>                	<li>Affiliate</li>                	<li>Vehicles & Equipment</li>                    <li>Contractor Liscense</li>                    <li>Commendations</li>                    <li>Bonding Capability</li>                    <li>Location Map</li>                    <li>Career</li>                    <li>Testimonial</li>                </ul></li>            <li><a href="index.html">Home</a></li>		</ul>	</div>

.nav{	padding-top: 50px;	margin-right: 10%;	color:#666;	text-decoration: none;	} .nav ul li{	float:right;	display: inline-block;	text-decoration: none;	padding: 10px;	}.nav ul li a:link{	text-decoration:none;	color:#333;}.nav ul li:hover{	color:#fad814;	}.nav ul li a:active{	color: #fad814;}.nav ul li a:visited{	color: #666;}.nav ul ul {	visibility: hidden;	position: absolute;	top: 120px;	display: block;	background-color: #444;	border-radius:5px;	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	transition: all .2s ease-in-out;	padding-bottom:1px;	margin: 10px 0px 0px 0px;}.nav ul li:hover > ul  {	opacity: 1;	visibility: visible;	margin:0px;	z-index: 30;	display: block;		}.nav ul li ul li{	margin-left: 0px;	list-style:none;	text-decoration:none;	float:none;	display: block;	border: 0;	box-shadow: 0 1px 0 #111, 0 2px 0 #666;	color: white;}.nav ul li ul li:hover{	background-color:#FC0;	color:white;	}.nav ul li ul li a:visited{	color: white !important;}.nav ul li ul li:first-child{	border-top-right-radius:5px;	-moz-border-top-right-radius:5px;	-webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{	border-bottom-right-radius:5px;	-moz-border-bottom-right-radius:5px;	-webkit-border-bottom-right-radius:5px;	box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{    content: '';    position: absolute;    left: 30px;    top: -8px;    width: 0;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-bottom: 8px solid #444;}

 

[scout1idf]

Change this......

.nav ul li ul li{	margin-left: 0px;	list-style:none;	text-decoration:none;	float:none;	display: block;	border: 0;	box-shadow: 0 1px 0 #111, 0 2px 0 #666;	color: white;}

to this......

.nav ul li ul li{    margin:0px 0px 0px -40px;    list-style:none;    text-decoration:none;    float:none;    display: block;    border: 0;    box-shadow: 0 1px 0 #111, 0 2px 0 #666;    color: white;}

Adjust neg. left margin as needed.

 

 

EDIT:

For some reason it won't show the negative margin-left.

I tested it with a minus 40px left margin and it looked pretty good to me.......

Edited December 11, 2013 by scout1idf

[gerah]

@scout1idf

 

Thanks a lot!! it works

 

ur so great:)

CHEERS!

[Day]

That looks like default ul padding. Instead of a negative left margin. Try just setting the padding to 0 for the ul, Or at least the left padding.

 

edit:

 

Just tested and confirmed. This will fix the problem.

.nav ul li:hover > ul  {	opacity: 1;	visibility: visible;	margin:0px;	z-index: 30;	display: block;	padding: 0;}

Edited December 21, 2013 by Day