Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts

    Horizontal Drop Down Menu (border question)

    Hello,

    I need your help and expertise, from the experts on these boards.

    With the help of Youtube, I was able to piece together a functional horizontal drop down menu, however, when I scroll down into each of the sub menu's I dont seem to find the 2pixel border between each of the sub menu items all that appealing. Given the code below, how could one modify it such that it would only be 1 pixel border between each of the sub menu items? (similar look to the top boxes)?

    Thanks for everyones help.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <style type="text/css">
    
    #navMenu {
    	margin:				0;
    	padding:			0;
    }
    
    #navMenu ul {
    	margin:				0;
    	padding:			0;
    	line-height:		30px;
    }
    
    #navMenu li {
    	margin:				0;
    	padding:			0;
    	list-style:			none;
    	float:				left;
    	position:			relative;
    	background:			#FFFFFF;
    }
    
    #navMenu ul li a {
    	text-align:			center;
    	font-family:		Segoe UI, Arial, Verdana;
        font-weight:		normal;
        font-size:			10pt;
        text-decoration:	none;
        height:				30px;
        width:				150px;
        display:			block;
        color:				black;
        border-left:			1px solid #C2C2C2;
    	border-bottom:			1px solid #C2C2C2;
    	border-right:			1px solid #C2C2C2;
    	border-top:				1px solid #C2C2C2;
    }
    
    #navMenu ul ul {
    	position:			absolute;
    	visibility:			hidden;
    	top:				31px;
    }
    
    #navMenu ul li:hover ul {
    	visibility:			visible;
    }
    
    /******************************************************************/
    
    #navMenu li:hover {
    	background:			#DCDCDC;
    }
    
    #navMenu a:hover {
    	color:				red;
    {
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="wrapper">
    <div id="navMenu">
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    </div>	<!-- end navMenu 	-->
    </div>	<!-- end wrapper div 	-->
    
    
    
    </body>
    
    </html>

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    It's because you've specified a 1px border around 'every' a of every list item.

    Add this to your CSS to rid the top border of your sub menu items:
    Code:
    #navMenu ul li ul li a {
    	border-top:	0px;
    }
    Edit:
    If the top sub-items missing border bothers you, you could just add a class to those top items and add border-top: 1px solid #C2C2C2;.
    Last edited by dan-dan; 03-04-2012 at 06:45 PM.

  • Users who have thanked dan-dan for this post:

    jason_kelly (03-04-2012)

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Here is the complete code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <style type="text/css">
    
    #navMenu {
    	margin:				0;
    	padding:			0;
    }
    
    #navMenu ul {
    	margin:				0;
    	padding:			0;
    	line-height:		30px;
    }
    
    #navMenu li {
    	margin:				0;
    	padding:			0;
    	list-style:			none;
    	float:				left;
    	position:			relative;
    	background:			#FFFFFF;
    }
    
    #navMenu ul li a {
    	text-align:			center;
    	font-family:		Segoe UI, Arial, Verdana;
        font-weight:		normal;
        font-size:			10pt;
        text-decoration:	none;
        height:				30px;
        width:				150px;
        display:			block;
        color:				black;
        border-left:			1px solid #C2C2C2;
    	border-bottom:			1px solid #C2C2C2;
    	border-right:			1px solid #C2C2C2;
    	border-top:				1px solid #C2C2C2;
    }
    
    #navMenu ul li ul li a {
    	border-top:	0px;
    }
    
    .top-border {
    border-top: 1px solid #C2C2C2 !important;
    }
    
    
    #navMenu ul ul {
    	position:			absolute;
    	visibility:			hidden;
    	top:				31px;
    }
    
    #navMenu ul li:hover ul {
    	visibility:			visible;
    }
    
    /******************************************************************/
    
    #navMenu li:hover {
    	background:			#DCDCDC;
    }
    
    #navMenu a:hover {
    	color:				red;
    {
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="wrapper">
    <div id="navMenu">
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#" class="top-border">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#" class="top-border">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#" class="top-border">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    </div>	<!-- end navMenu 	-->
    </div>	<!-- end wrapper div 	-->
    
    
    
    </body>
    
    </html>
    
    jason_kelly is online now   	Reply With Quote
    Reply

  • Users who have thanked dan-dan for this post:

    jason_kelly (03-04-2012)

  • #4
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts
    Wow!...Just wow! That's genious Dan.

    Thanks so much for your help.

    Now that the sub menus are done, thanks to your awesome help.

    I just noticed that the top menu links have a 2 px border between them.

    How could I also modify that, such that they are only 1 pixel border between them as well?

    Cheers,

    J,

    -new html'er

  • #5
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    OK, no worries.

    Here's the fixed main links:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>New Page 1</title>
    
    <style type="text/css">
    
    #navMenu {
    	margin:				0;
    	padding:			0;
    }
    
    #navMenu ul {
    	margin:				0;
    	padding:			0;
    	line-height:		30px;
    }
    
    #navMenu li {
    	margin:				0;
    	padding:			0;
    	list-style:			none;
    	float:				left;
    	position:			relative;
    	background:			#FFFFFF;
    }
    
    #navMenu ul li a {
    	text-align:			center;
    	font-family:		Segoe UI, Arial, Verdana;
        font-weight:		normal;
        font-size:			10pt;
        text-decoration:	none;
        height:				30px;
        width:				150px;
        display:			block;
        color:				black;
        border-left:			1px solid #C2C2C2;
    	border-bottom:			1px solid #C2C2C2;
    	border-right:			1px solid #C2C2C2;
    	border-top:				1px solid #C2C2C2;
    }
    
    #navMenu ul li ul li a {
    	border-top:	0px;
    }
    
    #navMenu > ul > li > a {
    	border-right:	0px;
    }
    
    .top-border {
    border-top: 1px solid #C2C2C2 !important;
    }
    
    #right-border {
    border-right: 1px solid #C2C2C2 !important;
    }
    
    
    #navMenu ul ul {
    	position:			absolute;
    	visibility:			hidden;
    	top:				31px;
    }
    
    #navMenu ul li:hover ul {
    	visibility:			visible;
    }
    
    /******************************************************************/
    
    #navMenu li:hover {
    	background:			#DCDCDC;
    }
    
    #navMenu a:hover {
    	color:				red;
    {
    
    </style>
    
    
    </head>
    
    <body>
    
    <div id="wrapper">
    <div id="navMenu">
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#" class="top-border">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    <ul>
    <li><a href="#">Products</a>
    <ul>
    <li><a href="#" class="top-border">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    <ul>
    <li><a href="#" id="right-border">Products</a>
    <ul>
    <li><a href="#" class="top-border">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    <li><a href="#">Link Item</a></li>
    </ul>	<!-- end inner UL 	-->
    </li>	<!-- end main LI	-->
    </ul>	<!-- end main UL 	-->
    
    </div>	<!-- end navMenu 	-->
    </div>	<!-- end wrapper div 	-->
    
    
    
    </body>
    
    </html>
    
    jason_kelly is online now   	Reply With Quote
    Reply
    Notice that with these main links you need to explicitly state what items need to be effected otherwise the sub-links will be effected too.
    ie:
    Code:
    #navMenu > ul > li > a {
    	border-right:	0px;
    }
    Last edited by dan-dan; 03-04-2012 at 07:16 PM.

  • Users who have thanked dan-dan for this post:

    jason_kelly (03-04-2012)

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    182
    Thanks
    139
    Thanked 0 Times in 0 Posts
    Wow....that's crazy perfection to me!

    Thanks so much for your help.

    Glad there are experts like you out there.

    Works like a charm.

    Case closed,

    Cheers and many thanks again.

    J.

  • #7
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    By no means an expert.

    Glad I could help though


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •