Jump to content
gerah

how to remove extra space on dropdown navigation

Recommended Posts

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;}

 

post-168965-0-63373200-1386734108_thumb.png

Share this post


Link to post
Share on other sites

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 by scout1idf
  • Like 1

Share this post


Link to post
Share on other sites

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 by Day

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...