PDA

View Full Version : Horizontal Drop Down Menu (border question)



jason_kelly
Mar 4th, 2012, 07:24 PM
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.



<!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>

dan-dan
Mar 4th, 2012, 07:39 PM
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:


#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;.

dan-dan
Mar 4th, 2012, 07:53 PM
Here is the complete 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

jason_kelly
Mar 4th, 2012, 07:59 PM
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

dan-dan
Mar 4th, 2012, 08:13 PM
OK, no worries.

Here's the fixed main links:


<!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:


#navMenu > ul > li > a {
border-right: 0px;
}

jason_kelly
Mar 4th, 2012, 08:25 PM
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.

dan-dan
Mar 4th, 2012, 08:35 PM
By no means an expert.

Glad I could help though :)