16 replies [Last post]
AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

I am working on a horizontal menu that will have some sub menus. I would like each link, regardless of whether it has a sub menu or not, to have some padding all the way around the link to make a larger hotspot for the user to click. However, if I place the padding on the li, then it does not carry over to the li a (only the text is clickable). What can I do to make them appear in the straight line (as seen in the example), but still have equal padding around each link?

Sample site with horizontal nav - http://66.147.240.163/~iatlcom/content.php

Code:

<ul id="nav">
<li><a href="content.php?page=Company">COMPANY</a></li>
<li>LABORATORY SERVICES
  <ul>
      <li style="border-top:1px solid #316565;"><a href="content.php?page=Asbestos+Laboratory&amp;parent=2">Asbestos Laboratory</a></li>
      <li><a href="content.php?page=Environmental+Lead&amp;parent=2">Environmental Lead</a></li>
      <li><img src="images/nav_bottom.gif" alt="" /></li>
  </ul>
</li>
</ul>

css:

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav li{
	font-size:14px;
  	float: left;
 	position: relative;
	top:-7px;
	color:#FFF;
	list-style: none;
	vertical-align:middle;
	padding:10px;
}
#nav li a{
	display:block;
	height:100%;
	text-decoration: none;
	color:#FFF;	
}
#nav li a:hover, #nav li:hover, #nav li.active, #nav li.active a{
	text-decoration: none;
	color:#e7e7e7;
}

Thanks in advance for your help.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Take the padding off the LI

Take the padding off the LI and put it on the A.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Removing the padding from

Removing the padding from the LI and putting it on the li a generates the correct padding around the a, but now the li with the sub nav doesn't have any padding...

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

The place whatever padding

Place whatever padding is required on "#nav li li"

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

That's what I had - the

That's what I had - the padding on #nav li, but doing so does not add the padding to #nav li a. If I ALSO add padding to #nav li a then the two nav items become off-set.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Not "#nav li", "#nav li li"

Not "#nav li", "#nav li li" (and "#nav li a")

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Hmm. Not sure how padding on

Hmm. Not sure how padding on the #nav li li (which is the sub nav dropdown) would affect the padding around the main nav (#nav li), but I placed the padding in the #nav li li and #nav li a as you asked and the only thing it did was add that 10 pixels of padding around the sub nav items, which is not what I am looking for. Have a look at the links now with this setup.

Also, here is the code with the padding in the new place:

#nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#nav li{
	font-size:14px;
  	float: left;
 	position: relative;
	top:-7px;
	color:#FFF;
	list-style: none;
	vertical-align:middle;
 
}
#nav li a{			
        padding:10px;	
        height:100%;
	text-decoration: none;
	color:#FFF;	
}
#nav li a:hover, #nav li:hover, #nav li.active, #nav li.active a{
	text-decoration: none;
	color:#e7e7e7;
}
	/***************************************************************
	******************** SUB NAV ***********************************
	***************************************************************/	
	#nav li ul {
	        display: none;
		position: absolute; 
		left:12px;
		background:none;
		padding-top: 16px; /* ALIGNS THE SUB NAV UNDER THE BAR AND ALLOWS THE CURSOR TO DROP INTO THE SUB NAV WITHOUT IT DISAPPEARING */
		/*background-image:url(../images/nav_bottom.gif);
		background-position:inherit;
		background-repeat:no-repeat;*/
	}
	#nav li li{
	/* This clears the parent's padding */
		padding:10px;	/* NEW PADDING. USED TO BE 0px */
		line-height:26px;
		width:193px;
	}

Thanks,

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Ah, I see now. Wrap the

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Yes, I knew that the lack of

Yes, I knew that the lack of an was throwing off the padding, but I really didn't want to go the route of having the main nav item clickable if it had a sub menu. However, I will certainly look into the content and consider doing so.

Wrapping the list item that has the sub nenu with a separate span style did the job - thank you for your patience.

.nav_with_sub, #nav li a{
	padding:18px 12px 18px 12px;
}
<li>
  <span class="nav_with_sub">LABORATORY SERVICES</span>
  <ul>
    <li style="border-top:1px solid #316565;"><a href="content.php?page=Asbestos+Laboratory&amp;parent=2">Asbestos Laboratory</a></li>
    <li><a href="content.php?page=Environmental+Lead&amp;parent=2">Environmental Lead</a></li>
  </ul>
</li>

However, the alignment is thrown off in IE7. What fix do I need in addition to the ones I have below?

#nav li{
 	position: relative;
	top:-1px;
}
.nav_with_sub{	
	height:100%;
}	
#nav li a{ 
	display:block;
	height:36px;
	height:100%;
}

Thanks.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Where do you see the

Where do you see the alignment difference?

Aside, rather than use left:19px on the #nav ul, wouldn't it be easier to cancel the margin-left: -20px coming from the generic "li li" rule by using #nav li li { margin-left: 0; } - then you can use left:0 which is easier to understand when investigating the page.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Ah, I appreciate the margin

Ah, I appreciate the margin fix. This makes it a whole lot easier to understand. I couldn't figure out why I needed to use that arbitrary number because I thought that the margin:0; in #nav ul would carry all the way down. I suppose that the margin needs to be reset for each new ul?!

Sorry that you didn't see the issue because I found a hack by troubleshooting to fix the issue (see #nav li .nav_with_sub below). This probably isn't idea and I do not understand why it works:

#nav li{
	list-style-type:none;
 	position: relative;
	top:-1px;
}
#nav li .nav_with_sub{	
	display:block;	/* Fix for aligning items */
}	
#nav li a{ 
	display:block;
	height:36px;
	height:100%;
}
	#nav li ul {
		padding-top:3px;	
	}
	#nav li li a{
		height:26px;
		height:100%;
	}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Probably because you already

Probably because you already had display:block in the "#nav li a" rule. padding works a little differently on inline elements compared to block elements.

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

ok, so it is fine to leave

ok, so it is fine to leave it as is?!

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Is there a way to test if a

Is there a way to test if a sub menu is at a certain left position (relative) and force it to stay on the page? Notice how the sub menu for the right-most link (Request Info) on http://66.147.240.163/~iatlcom goes off the page. Since the navigation is generated dynamically from a database, should I do a count and change the left position for the last nav item?

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 4 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Only with javascript. You

Only with javascript.

You can set the submenu for the last or last few menuitems to be right aligned rather than left. Its the sort of thing you (as a designer) are more likely to notice as a discrepancy rather than a user browsing the site.

deepu8
deepu8's picture
Offline
newbie
Last seen: 11 years 32 weeks ago
Joined: 2009-03-07
Posts: 7
Points: 0

This is inside the head

This is inside the head

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
 
ul.dropdown {
 position: relative;
 z-index: 597;
 float: left;
}
 
ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}
 
ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}
 
ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}
 
ul.dropdown ul li {
 float: none;
}
 
ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}
 
ul.dropdown li:hover > ul {
 visibility: visible;
}

inside the head
/*-------------------------------------------------/
 * @section		Base Style Extension
 */
 
ul.dropdown li a {
 display: block;
 padding: 7px 10px;
}
 
 
/*-------------------------------------------------/
 * @section		Base Style Override
 */
 
ul.dropdown li {
 padding: 0;
}
 
 
/*-------------------------------------------------/
 * @section		Base Style Reinitiate: post-override activities
 */
 
ul.dropdown li.dir {
 padding: 7px 20px 7px 10px;
}
 
ul.dropdown ul li.dir {
 padding-right: 15px;
}
 
 
/*-------------------------------------------------/
 * @section		Custom
 */
 
ul.dropdown ul a {
 width: 129px;
}
 
ul.dropdown ul a:hover {}
 
ul.dropdown ul a.dir {
 width: 124px;
}

inside the body
<body>
 
<h1>Horizontal Advanced Drop-Down Menu Demo</h1>
 
<ul id="nav" class="dropdown dropdown-horizontal">
	<li><a href="./">Home</a></li>
	<li class="dir">About Us
		<ul>
			<li><a href="./">History</a></li>
			<li><a href="./">Our Vision</a></li>
 
			<li class="dir">The Team
				<ul>
					<li><a href="./">Brigita</a></li>
					<li><a href="./">John</a></li>
					<li><a href="./">Michael</a></li>
					<li><a href="./">Peter</a></li>
					<li><a href="./">Sarah</a></li>
 
				</ul>
			</li>
			<li><a href="./">Clients</a></li>
			<li><a href="./">Testimonials</a></li>
			<li><a href="./">Press</a></li>
			<li><a href="./">FAQs</a></li>
		</ul>
 
	</li>
	<li class="dir">Services
		<ul>
			<li><a href="./">Product Development</a></li>
			<li><a href="./">Delivery</a></li>
			<li><a href="./">Shop Online</a></li>
			<li><a href="./">Support</a></li>
 
			<li><a href="./">Training &amp; Consulting</a></li>
		</ul>
	</li>
	<li class="dir">Products
		<ul>
			<li><a href="./" class="dir">New</a>
				<ul>
 
					<li><a href="./">Corporate Use</a></li>
					<li><a href="./">Private Use</a></li>
				</ul>
			</li>
			<li><a href="./" class="dir">Used</a>
				<ul>
					<li><a href="./">Corporate Use</a></li>
 
					<li><a href="./">Private Use</a></li>
				</ul>
			</li>
			<li><a href="./">Featured</a></li>
			<li><a href="./">Top Rated</a></li>
			<li><a href="./">Prices</a></li>
		</ul>
 
	</li>
	<li><a href="./">Gallery</a></li>
	<li><a href="./">Events</a></li>
	<li><a href="./">Careers</a></li>
	<li><a href="./" class="dir">Contact Us</a>
		<ul>
			<li><a href="./">Enquiry Form</a></li>
 
			<li><a href="./">Map &amp; Driving Directions</a></li>
			<li><a href="./">Your Feedback</a></li>
		</ul>
	</li>
</ul>
 
</body>

AndersStudio
AndersStudio's picture
Offline
Enthusiast
Yardley, PA
Last seen: 9 years 49 weeks ago
Yardley, PA
Timezone: GMT-5
Joined: 2005-11-09
Posts: 91
Points: 6

Cool. I just did a count and

Cool. I just did a count and did an IF statement to see if the number of nav items equals the total nav items. If they are equal, then I set the left position so that the sub nav does not go off of the page.

Thank you,