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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts

    CSS Horizontal Drop Down Menu w/ Arrow

    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/)

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

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Just add the image tag after the list item.

    Code:
    <li><a href="#">Products <img src="images/more_arrow.png" alt="Arrow image" /></a>
    Last edited by dan-dan; 03-04-2012 at 08:25 PM.

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    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

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

  • #4
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I came up with this.

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

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

    jason_kelly (03-04-2012)

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    184
    Thanks
    140
    Thanked 0 Times in 0 Posts
    Worked like a charm.

    Thanks so much.

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

  • #6
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    We're all on a journey, and it's never easy

    Take a look at the last line of your CSS
    Code:
    #navMenu a:hover {
    color: red;
    {
    Your closing tag needs to take a 180 degree turn.


  •  

    Posting Permissions

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