PDA

View Full Version : CSS Horizontal Drop Down Menu w/ Arrow



jason_kelly
Mar 4th, 2012, 09:09 PM
Hi There,

How would I go about adding a drop down arrow to horizontal drop menu on each of the following top menus given the following code below? (similar to whats on the website: http://office.microsoft.com/en-us/)



<!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;
font-weight: normal;
font-size: 9pt;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: black;
border: 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>


Thanks for everyones time and help in advance,

Cheers,

J

dan-dan
Mar 4th, 2012, 09:21 PM
Just add the image tag after the list item.



<li><a href="#">Products <img src="images/more_arrow.png" alt="Arrow image" /></a>

jason_kelly
Mar 4th, 2012, 10:20 PM
Thanks very much for this Dan.

I got the arrow to fire, now, what i'd like to do is center the text on the main tabs and align the sub menu text 15px away from the left side of the box:

Ie.

Main Heading
Item 1
Item 2
Thanks for all your 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: jusitfy;
font-family: Segoe UI;
font-weight: normal;
font-size: 9pt;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: black;
border: 1px solid #C2C2C2;
}

#navMenu > ul > li > a {
background-image: url(images/arrow.gif);
background-position: 85% 50%;
background-repeat: no-repeat;
border-right: 0px;
}

#navMenu ul li ul li a {
border-top: 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: #FFFFFF;
}

#navMenu a:hover {
color: #00CC00;
{

.indent1 {
padding-left: 25px;
}

</style>


</head>

<body>

<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">IMTS</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>

dan-dan
Mar 4th, 2012, 11:06 PM
I came up with this.



<!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;
text-align: left;
}

#navMenu ul li ul li a .text-shift {
position: relative;
left: 15px;
}

#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 <img src="images/more_arrow.png" /></a>
<ul>
<li><a href="#" class="top-border"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></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"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></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"><span class="text-shift">Link Item</a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></a></li>
<li><a href="#"><span class="text-shift">Link Item</span></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, 11:18 PM
Worked like a charm.

Thanks so much.

I still have so much to learn about the many wonders of CSS .... =\

dan-dan
Mar 4th, 2012, 11:42 PM
We're all on a journey, and it's never easy ;)

Take a look at the last line of your CSS

#navMenu a:hover {
color: red;
{


Your closing tag needs to take a 180 degree turn.