CSS - Help W/ :hover & Submenu Issue

Please visit this page -

http://www.brooksidetransmission.com

Put your mouse over the "Services" link to reveal a sub menu.

In FF it works fine in that you can access each of the links in the sub menu.

In IE7 though when you move the mouse around the sub menu links the who sub menu disappears.

Some background on this issue is that I am trying to incorporate two 3rd party resources into one, with one being the drop down menu, the other being a box with rounded corners.

Somewhere in my combining the two messed up the :hover for IE7

Any help would be appreciated.

Tom

Hi all,

I've had this issue for a while now and can't for the life of me get a clean fix/understanding of whats wrong. I've had a few other Designers/Developers look at it with no look either!

http://www.hoctordesign.com/csstest/test.html has the code and details. I'm mainly concerned with issue 1.

This is that i can't get control of the hover state text color. It currently inherits a color which is need in other areas of the site. I need to over ride this but can't!

The second issue is that I can't control the space between the tabs.

Can anyone help?

Thanks!
Denis

Hello All,

I have a left navigation bar that seems to be working perfectly in Firefox and Safari. However (I know, you've heard this before!), when I open the page in IE, there is no list appearing whatsoever. When I hover in a place outside of where the ul is supposed to be, I can find where the menu is, but it is not functioning well. Could someone please take a look and provide some insight? I have tried a few different things but they are mostly guesses as this is pushing my understanding of CSS a bit.

The menu is supposed to appear under the "Select a Tool" text...

029c92a.netsolhost.com/brushes.html

Best Regards,
Colin

I developed a drop down menu for the current site I'm working on. I used several on-line tutorials and the outcome was variable. Everything seems to work great in IE after the hack to fix the :hover elements, but I have never been able to get the drop downs to work in Firefox 3, Chrome, or Safari. Unfortunately I do not have the ability to test in a previous version of Firefox at the moment so I am unsure if it is just a version issue from when the tutorials were written.

The page in progress may be viewed at clcah.org.previewdns.com The specific CSS can be found in clc_common.css under the MENU section. Any insight would be greatly appreciated as I only anticipated trouble with IE.

Hi everyone,

I am having an issue with IE7 (imagine that) with a css drop down nav menu. On IE8 and Chrome the menus work flawlessly but in on IE7 the menu is behind the pictures on the page. The page is located at www.philadler.com/newlayout2.php.

At first I thought it may be a z-index problem but the nav bar is set to 1000 and 900 depending on the menu and the thumbnails are set to 100.

As of now the site validates on both css and xhtml 1.0 transitional.

I can list any code if needed.

Thanks for any help

Phil

Hi,
This renders ok in firefox but not in IE, it places extra space between the elements. Can someone correct it for me please, i cant see where im going wrong. Thanks.

the CSS:
Code:

#menu {
	margin: 0px;
	padding: 0px;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	
}
#menu ul {
	border: 0px;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	text-align: center;
}

#menu ul li {
	display: block;
	text-align: left;
	padding: 0px;
	margin: 0px;
}


#menu ul li a {
	border-top: none;
	border-bottom: 1px solid black;
	padding: 2px;
	margin: 0px;
	text-decoration: none;
	display: block;
}

#menu a:link, #menu a:visited {
	color: black;
	text-decoration: none;
}

#menu a:hover, #menu a:active {
	background-color: #fffed9;
}

the html:
Code:

<div id="menu">
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
    <li><a href="#">item 4</a></li>
    <li><a href="#">item 5</a></li>
  </ul>
</div>

plug this in and view it in ie and you'll see what i mean.

For some reason, when I hover over images in the #content div of my site firefox is adding a strange little box to the bottom right hand corner of the image. The color of the box is the same color as my text hyperlinks which makes it more interesting. You can see the issue on my site. Here is the code that deals with the images in the #content div:

Code:

#content img {
margin:2px 5px 0px 0px;
}

#content a img, #content a:visited img, #content a:active img {
border:2px solid #6FA6D9;
}

#content a:hover img {
border:2px solid #ffffff;
}

This issue is only happening on the images I insert from my wpg2 gallery. The images get one of the following classes applied to them:

Code:

.g2image_float_left {
display:block;
float:left;
}

.g2image_float_right {
display:block;
float:right;
margin-left:5px;
}

Now I don't see how either of these could cause a problem but they have to be the issue considering this doesn't happen on images that don't have one of the above classes applied to them.

Any ideas what is causing this?

Thanks in advance.

Hi,
I am working on a submenu:
<ul class="subuls"> ...

How do I make "CANADA" to be positioned under "USA" ?
Code:

<style type="text/css">

#topNav{ background-color:#CCCC99;
	height:33px;
	margin:0px;
}

#topNav li{
	height:33px;
	list-style: none;
	float: left;
	position: relative;
	z-index: 1000;
	padding: 0;
	margin: 0;
}

#topNav li.topNavSep{
	height:33px;
	background-color:#FF0000;
	width:1px;
}

#topNav li ul.subuls {
	/*
	display: none;
	*/
	width:126px;
	position: absolute;
	top: 33px;
	left:0px;
	
	margin: 0; 
	padding: 0;
	border: 1px solid #0D458A;
}


#topNav li:hover ul, li.over ul { /* lists nested items */
	display: block;
}

</style>

</head><body>

<div id="topNav">

<li class="topNavTitle">&nbsp;<a href="" >Home</a>&nbsp;</li>

<li class="topNavSep"></li>

<li class="topNavTitle">&nbsp;<a href="" >FAQ</a>&nbsp;
		<ul class="subuls">
				<li><a href="">USA</a></li>
				<li><a href="">CANADA</a></li>
		</ul>
</li>

<li class="topNavSep"></li>

<li class="topNavTitle">&nbsp;<a href="" >Contact</a>&nbsp;</li>

</div>

Hi people. Have been trying to get this CSS Nav (for weeks) to when the user MouseOvers the 'link', a 'SubMenu' pops out with several (3) menus (links). Have got nowhere!!

Any help would be greatly appreciated!

Heres the main code so far.:

Code:

<style>
.buttonscontainer {width: 135px;}

.buttons a {color: #FFFFFF;
background-color: #6699CC;
padding: 2px;
padding-left: 3px;
display: block;
border-left: 10px solid #000000;
font: 11px Verdana, sans-serif;
font-weight: bold;
text-decoration: none;
text-align: left;
margin-top: 1px;}

.buttons a:hover {border-left: 10px solid #6699CC;
text-decoration: none;
background-color: #000000;}
</style>


<div class="buttonscontainer">
<div class="buttons">
<a href="#" onMouseOver="window.status='Jedburgh Gallary'; return true" onMouseOut="window.status=' '"; return true";>Jedburgh</a>
</div>
</div>

Thank alot people.

Jackson

This is driving me nuts! I've been trying to do the simplest thing for over 3 hours now. Any help would be greatly appreciated!

It's not allowing me to post a link to the site at hand. [myoviedolawyerDOTcom/index2.php]It seems to be working fine in Firefox and Safari, but IE is giving me troubles (as always).

Here is the CSS (sorry if it's a mess, I'm learning)

ul.MenuBarVertical
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 298px;
background-image: url(../images/PracticeAreas.gif);
z-index: 2;
}

ul.MenuBarActive
{
z-index: 1000;
}

ul.MenuBarVertical li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 298px;
}

ul.MenuBarVertical ul
{
margin: 0% 0 0 100%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 8.2em;
left: -1000em;
top: 0;
}

ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
left: 0;
}

ul.MenuBarVertical ul li
{
width: 302px;
background-color: #CCC;
border: 1px solid #A32B34;
z-index: 2;
}


ul.MenuBarVertical
{
border: 0px;
}

ul.MenuBarVertical ul
{
border: 0px;
}

ul.MenuBarVertical a
{
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #A32B34;
text-decoration: none;
}

ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
color: #FFF;
}

ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
color: #FFF;
}


ul.MenuBarVertical a.MenuBarItemSubmenu
{
background-image: url(../images/PracticeAreas.gif);
background-repeat: no-repeat;
background-position: left top;
background-attachment: fixed;
width: 298px;
}


ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: left top;
background-image: url(../images/Template_10_ro_10.png);
background-attachment: fixed;
width: 298px;
}


ul.MenuBarVertical iframe
{
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
}

@media screen, projection
{
ul.MenuBarVertical li.MenuBarItemIE
{
display: inline;
f\loat: left;
z-index: 2;
}
}




--------------------------------------------------------------

Any help would be greatly appreciated!

~cheers~

Okay, I have a navigation and one link, "SERVICES" has a sub-menu. The submenu looks good in Firefox, Safari, and Netscape for the Mac. Also Firefox for the PC, but not IE7 for the PC.

Here's the site: http://www.caillouette.com/Villere_dynamic2/rentals.php

Please rollover, "SERVICES" in IE.

Here's the style sheet (*note: I created it Dreamweaver using Spry. I am only including the code of interest)
Code:

/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 9pt;
	font-weight: bold;  
	color: #FFFFFF; /*text color*/
	padding: 0px 0 0 12px;
	text-decoration: none;
	z-index: 1020;
	cursor: default;
	width: 8.2em;
	position: absolute;
	left: -1000em;
	display:block;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: 100%pt;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: auto;
	top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers  */
ul.MenuBarHorizontal ul
{
	border: 0px;
	background-color: #AEB0B3;
}



/*  status for the new colors  */
ul.MenuBarHorizontal ul a
{
	border: 0px;
	color:#FFFFFF;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}
ul.MenuBarHorizontal ul a:hover
{
	border: 0px;
	color:#444343;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}

/*  end new colors  */





ul.MenuBarHorizontal a.MenuBarItemSubmenuHover,  ul.MenuBarHorizontal a.MenuBarSubmenuVisible{
	text-size:9pt;
	font-weight:normal;
	/* background-color: #AEBOB3; */
	color: #9dba44;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
*/
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
/*ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
*/
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
		display: inline;
		f\loat: left;
		background: #FFF;
	}
	ul.MenuBarHorizontal ul aIE
{
	border: 0px;
	color:#FFFFFF;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}
ul.MenuBarHorizontal ul a:hoverIE
{
	border: 0px;
	color:#444343;
	background-color: #AEB0B3;
	padding: 0 30px 0 0;
}
}

thanks

Hello,
I have tried to design a vertical menu with sub-menu's popping out to the right.
I have used this onMouseOver and onMouseout events.
Here is the html for the menu
Code:

 <div id="menu">
  <ul>
    <li><a href="#">About Swamiji</a></li>
    <li id="m1" onMouseOver="showsub('m1')" onMouseOut="hidesub('m1')">
      Ashramams
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;ashramam@dowaleshwaram</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;ashramam@hyderabad</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;ashramam@vishakapatnam</a></li>
      </ul>  
    </li>
    <li><a href="#">Temples</a></li>
    <li id="m2" onMouseOver="showsub('m2')" onMouseOut="hidesub('m2')">
      Wings of Organization
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Satsang Groups</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Mathru Mandali</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Youth Wing</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Seva Samithi</a></li>
      </ul>
    </li>  
    <li><a href="#">Articles</a></li>
    <li><a href="#">Swamiji's Monthly letter</a></li>
    <li><a href="#">Photo Gallery</a></li>
    <li id="m3" onMouseOver="showsub('m3')" onMouseOut="hidesub('m3')">
      Store
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Books [in Telugu]</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Books [in English]</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Audio CD's</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Video CS's</a></li>
      </ul>
    </li>
    <li><a href="#">Swamiji's Darshan Timings</a></li>
    <li id="m4" onMouseOver="showsub('m4')" onMouseOut="hidesub('m4')">
      Giridhari [Monthly Magazine]
      <ul>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Subscribe</a></li>
        <li class="hide"><a href="#">&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;Read Sample Magazines</a></li>
       </ul> 
    </li>
    <li><a href="#">Swamiji's Itinerary</a></li>
    <li><a href="#">Programmes</a></li>
    <li><a href="#">Donations</a></li>
  </ul>  
  </div>
 

Here is the css for the menu
Code:

div#menu{
	background-color:#ffcccc;
	border-top:thin red solid;
	border-bottom:thin red solid;
	clear:left;
	display:block;
	width:100%;
	float:left;
	font:bold .75em helvetica;
}

div#menu ul{
	padding:0;
	margin:0;
	list-style-type:none;
}



div#menu a{
	margin:0;
	text-decoration:none;
}

div#menu li{
	border:1px #cfc solid;
	background-color:#ffcccc;
	position:relative;

}

div#menu ul * li{
	background-color:#ff6666;
}

div#menu a:hover{
	background-color:#ffffcc;
}

Here are the javascript functions for showing and hiding the sub-menu's
Code:

function showsub(elm)
{

  menumain=document.getElementById(elm);
  subm=menumain.getElementsByTagName("li");
  for (i=0;i<subm.length;i++)
  {
    subm[i].className='show';
  }

}  

function hidesub(elm)
{

  menumain=document.getElementById(elm);
  subm=menumain.getElementsByTagName("li");
  for (i=0;i<subm.length;i++)
  {
    subm[i].className='hide';
  }

}  

Here is the css only for hiding
.hide{
visibility:hidden;
display:none;
}

With this css for showing
.show{
visibility:visible;
display:block;
}
, I am getting this menu1.
With this css for showing
.show{
visibility:visible;
display:block;
position:absolute;
top:0;
width:100%;
margin:0 0 0 100%;
}
I am getting the menu as in menu2 image.
I would like the sub-menu to pop out as in menu2 image without blank space that is appearing at the bottom of the main menu item.
If I am not wrong , problem is setting the position of the sub-menu which is a css issue.
What should I do to get it right?
Thank you.

Hi there... I have a friend that wants me to help them out with the menu on their site.

here is the link of the template they bought.

uniquedealz dot com/2020 (I hope it's okay I did it like that?)


Under "Product" I need to add 4 items then under one of those items/links I am adding 20 more items/links.

I found out in the source code I need to use the ul code to create the actual names of the links but I am getting confused with the css class part.

Any help would be great. Should I include the style.css and layout.css?

Thank you
Julie

Hi ,
I followed this tutorials (http://matthewjamestaylor.com/blog/centered-dropdown-menus) and was successfully able to create a dynamic menu . At the moment the menu displays just one drop down and not multi submenus drop-downs. Can anybody tell me what can i add to implement something like ?

Tab1 Tab2
Link 1 > Link1.1
Link1.2
Link2 .

My css code is :-


body{behavior:;}
body{behavior:url(cssHoverFix.htc);}




/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
border-bottom:1px solid #000; /* black line below menu */
width:100%;
font-family:Verdana, Geneva, sans-serif; /* Menu font */
font-size:90%; /* Menu text size */
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
}

/* Top menu items */
#centeredmenu ul {
margin:0;
padding:0;
list-style:none;
float:right;
position:relative;
right:50%;
}
#centeredmenu ul li {
margin:0 0 0 1px;
padding:0;
float:left;
position:relative;
left:50%;
top:1px;
}
#centeredmenu ul li a {
display:block;
margin:0;
padding:.6em .5em .4em;
font-size:1em;
line-height:1em;
background:#ddd;
text-decoration:none;
color:#444;
font-weight:bold;
border-bottom:1px solid #000;
}
#centeredmenu ul li.active a {
color:#fff;
background:#000;
}
#centeredmenu ul li a:hover {
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}
#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
background:#36f; /* Top menu items background colour */
color:#fff;
border-bottom:1px solid #03f;
}

/* Submenu items */
#centeredmenu ul ul {
display:none; /* Sub menus are hidden by default */
position:absolute;
top:2em;
left:0;
float:left;
right:auto; /*resets the right:50% on the parent ul */
width:10em; /* width of the drop-down menus */
}
#centeredmenu ul ul li {
left:auto; /*resets the left:50% on the parent li */
margin:0; /* Reset the 1px margin from the top menu */
clear:left;
float:left;
width:100%;
}
#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
font-size:.8em;
font-weight:normal; /* resets the bold set for the top level menu items */
background:#eee;
color:#444;
line-height:1.4em; /* overwrite line-height value from top menu */
border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
float:left;
width:100%;
}
#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
background:#36f; /* Sub menu items background colour */
color:#fff;
float:left;
}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
left:auto; /* reset left:0; value */
right:0; /* Set right value instead */
}
#centeredmenu ul ul.last li {
float:right;
position:relative;
right:.8em;
}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
display:block; /* Show the sub menus */
}


Html Code is :--

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<html>
<LINK REL=StyleSheet HREF="nat.css" TYPE="text/css" MEDIA=screen>

<body>
<div id="centeredmenu">


<ul>
<li><a href="#">Tab one</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li class="active"><a href="#" class="active">Tab two</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five is a long link that wraps</a></li>
</ul>
</li>
<li><a href="#">Long tab three</a>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
<li><a href="#">Tab four</a>
<ul class="last">
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</li>
</ul>
</div>



</body>



</html>


Regards,
Umair