|
CSS - Problem With Horizontal List Menu
Heya!
I am really new to html - creating my first website for uni course now. My problem is with the menu I have created - it's basically 5 div's with list within list in them. so that the deeper list is a sub-menu, displaying on hover on the first one. The problem appears only in IE9 compatibility view, it works in IE9,8,7,firefox and chrome. this is the html: <div id="ourproject"> <ul> <li>OUR<br> PROJECT <ul> <li><a href="index.html">Project Overview</a></li> <li><a href="Introduction.html">Introduction</a></li> <li><a href="participants.html">Participants</a></li> </ul> </li> </ul> </div> and my css: #ourproject ul { position:relative; color: #FFF; text-decoration: none; width: 102px; top:0px; left:0px; height:86px; list-style:none; float:left; padding-left:20px; border-left-width: 3px; border-left-style: solid; border-left-color: #FFF; } #ourproject ul:hover { color:#FF9900; border-left-color: #F90; padding-left:20px; } #ourproject ul ul { position:relative; visibility:hidden; z-index:2000; background-color:#0E1221; font-size: 12px; width: 602px; display: inline-block; height: 45px; float: left; top:25px; left:-23px; } #ourproject ul li { display: inline-block; margin-right:30px; height: 25px; float: left; margin-top:4px; width: 125px; } #ourproject ul:hover ul { visibility:visible; } #ourproject ul ul li{ width:80px; padding: 0; text-align:left; } In IE9 compatibility view, the menu is distorted. I have tried playing with widths of the #ourproject ul, changed it to 50px and turned on overflow:hidden. It made the other divs jump in, but there is a weird blank space bwteen where the div is cut off bu overflow, and the place where next one starts. I have tried to put in links with photos, but forum does not allow me to. please if someone can help me, i will send them on e-mail or pm, if needed. I hope to get some answer soon! Please ask any more question if you need to- i will be happy to answer. Thanks in advance. Similar TutorialsHello All, I am trying to get a "horizontal menu" in CSS to properly center in my "#topbar" dev which is basically a header that is 100% width of the page. I have the website name, then the menu which is to be centered directly below it. I have searched google for hours and found one website (I guess cause i'm new it won't let me put the url in here) and it broke down each section of the CSS and it says that to horizontally position the menu just add text-align: center; to the #tabsE ul section, but that doesn't change anything at all. I have also tried replacing the float values with margin-left: auto; and margin-right: auto; (I've used those to center images before) and that just destroys the menu (it all shifts to the right side of the screen, and spaces out vertically). I am really kind of stuck here, I'm pretty new to CSS and most the basics are clicking, it seems to me that centering items so far has been one of the biggest pains yet. Here is the CSS: Code: /*- Menu Tabs E--------------------------- */
#tabsE {
width:100%;
background:#000;
font-size:93%;
line-height:normal;
}
#tabsE ul {
margin:0;
padding:10px 10px 0 0px;
list-style:none;
}
#tabsE li {
display:inline;
margin:0;
padding:0;
}
#tabsE a {
text-align: center;
background:url("tableftE.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsE a span {
text-align: center;
display:block;
background:url("tabrightE.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#000;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsE a span {float:none;}
/* End IE5-Mac hack */
#tabsE a:hover span {
color:#FFFFFF;
}
#tabsE a:hover {
background-position:0% -42px;
}
#tabsE a:hover span {
background-position:100% -42px;
}
#tabsE #current a {
background-position:0% -42px;
}
#tabsE #current a span {
background-position:100% -42px;
}
I tried to post the HTML (its just a standard <ul> with list </ul>) but it won't let me, because it contains url's so, I can e-mail you that if neccesary. I truly appreciate any help you can offer. Thanks, Chris Hi, I have a site with a horizontal menu bar that has a submenu that pops up with the top menu is hovered over. I've got everything working fine, except for one little thing; in Firefox the submenu is vertically aligned instead of horizontally. For once IE has gotten it right (or at least the way I want it) by positioning the sub menu horizontally. I can't for the life of me figure out how to get the sub menu to flow horizontally in FF. I've tried display: inline and float: left and all kinds of things but nothing seems to affect it. My site is here http://www.soton.ac.uk/~rollhock/new/index3.php And the css file http://www.soton.ac.uk/~rollhock/new/includes/style.css If anyone is able to help I will be eternally grateful! Thanks Let me start by saying I'm a PHP/MySQL guy, not a designer. I know enough CSS to get by, but my focus has been the data side, not the design side. Hell I usually just use tables so I don't have to mess with any of this crap. I guess it's come to the point where I need to update my design skills or be left in the dust (since you can outsource LAMP guys for $4 a friggin' hour now ) I'm using the pretty standard UL-LI menu set to display vertically. Now I've added a couple links and it's too big for one line if I want to maintain style at 800 x 600. I figured the easiest way was to let it wrap to 2 lines. It wraps fine, but everything is either left aligned or right. I'd like both of the rows to be centered. Is there an easy way to do this? Here's the general layout: PHP Code: // .main is the style for the container // #main is the positioning of this instance of main // .tree_menu_list is the vertical stuffs <div class="menu" id="main"> <ul class="tree_menu_list"> <li><a href="index.php">Home</a></li> <li><a href="index.php?p=vision">Vision</a></li> <li><a href="index.php?p=buying">Buying</a></li> <li><a href="index.php?p=renovation">Building</a></li> <li><a href="index.php?p=selling">Selling</a></li> <li><a href="index.php?p=payout">Payout</a></li> <li><a href="index.php?p=opportunities">Opportunities</a></li> <li><a href="index.php?p=services">Services</a></li> <li><a href="images.php">Photos</a></li> </ul> </div> I am a bit new to CSS and am currently in the process of converting a design over to CSS2 and have run into come difficulty. I've created a list based horizontal menu and I want elements to align to both the left and right ends. Simply by adding "float:left" to most of the elements and "float: right" to others, I was able to get it to work, but strangely only in Internet Explorer, not in Firefox. The latter seems to drop my right aligned image onto the next line. For the offending code, please see: http://www.forma3.com/stuff/css/top_menu_v1.html http://www.forma3.com/stuff/css/css/right_menu_v1.css Also, any suggestions on the code would be highly appreciated. I have no doubt its more verbose than needed. Hi, I have been developing my own website for some time now, and have asked a lot of questions, and checked other CSS resources to do a horizontal list. I have managed to create a horizontal list and it looks very good in my website. However I wish to improve this. At the moment I have to give a width for each element in my list. This means that if I have 5 elements in my list then I set the following CSS property in the ul li as follows: Code: div#header ul li {
width: 20%;
padding: 0px;
}
If the elements become four then I would set the width equals to 25% and so on. I would like to change this so that the list will still appear the same without me having to set the width. This would mean I do not need to change the CSS file each time I add a new element in my list. My list is inside a div tag. I would like to have the elements inside that list extend through the whole space of the div. I have checked other websites to see the examples they give, however they all seem to only provide an example with a width. Is this possible? Or I have to always set the width of the li element? I am sorry if I am not clear enough. Thanks for any suggestions. Regards, Sim085 here is the code that I have based my menu on, http://www*dynamicdrive*com/style/csslibrary/item/suckertree-menu-horizontal . What I changed was the ".suckertreemenu ul li a" style width to auto instead of 90px. I need the style to auto so that the width of each button is proportionate to the text in the button. My problem is that in IE6 each button stretches across the entire area. Does anyone have a hack for this? Any help is greatly appreciated. Thanks Hi I am trying to create a horizontal menu for my interface and am running into a problem. I created the menu and it seems to work fine, but after I try to move it to where I want it, it leaves a blank spot in my content area that I cant get ridd of. Here is the link www.isostudios.com Im a little new to css so dont be to hard on me Hi people. In need of some help with this horizontal navigation. IE7 positions everything correctly, but when testing in firefox, chrome and safari the issues then arise. Got two images of the working styled in IE7 which is the way I was planning on having it and then the non working menu in other browsers... Live example: please click here for live example Code Code:
/* Start Menu */
#topmenu {
height: 32px;
margin-bottom:20px;
background: #FFFFFF url(menu_bg.png) repeat-x top;
width: 100%;
overflow: hidden;
float: left;
}
#topmenu li {
border-left: 1px solid #dedbd1;
float: left;
line-height: 32px;
}
#topmenu li a {
color: #333333;
display: block;
margin: 0 1px 0 0;
padding: 0 15px;
}
#topmenu li a:hover, #topmenu li.active a {
color: #425775;
text-decoration: none;
}
#nav, #nav ul {
padding: 0;
float:left;
list-style: none;
}
#nav {
padding: 0;
}
#nav a {
display: block;
}
#nav li {
float: left;
line-height:32px;
}
#nav li a:hover {
background: none;
background: #FFFFFF url(menu_bgmo.png) repeat-x top;
}
#nav li ul {
position: absolute;
width: 100%;
left: -999em;
padding-top:1px;
overflow: hidden;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
z-index:1000;
}
#nav li ul li {
border-bottom:1px solid #dedbd1;
border-left:1px solid #dedbd1;
border-right:1px solid #dedbd1;
line-height:32px;
width: 100%;
overflow: hidden;
}
#nav li:hover, #nav li.hover {
position: static;
}
#nav li ul ul {
margin: -29px 0 0 100%;
overflow: hidden;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul {
left: auto;
}
#nav li:hover ul ul, #nav li:hover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul {
left: auto;
overflow: hidden;
}
/* Finish Menu */
Any help would be great. Thanks very much in advance! terra This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE. I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action: http://www.forma3.com/stuff/css/index-v1.2.html http://www.forma3.com/stuff/css/css/index-v1.2.css I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error. I am having a problem with a CSS Menu in which the sub menu items are disappearing before I am able to get my mouse over them. I have tried adjusting the padding for the nav items but it did not have any effect but to shift all of the menu elements. Here is the html: 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=utf-8" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<link rel="stylesheet" type="text/css" href="css/menu.css"/>
<!--<script src="javascript/javascript.js" type="text/javascript" language="javascript"></script>-->
<title>ACS Web Group - Administration Interface</title>
</head>
<body>
<div id="pageContainer">
<div id="header">
<div id="headerLeft">
<img src="images/acs_header.jpg" width="332" height="55" hspace="0" vspace="0" />
</div>
<div id="headerRight">
<a href="#"><img src="images/header_logout.jpg" width="60" height="55" hspace="0" vspace="0" border="0" /></a>
</div>
</div>
<div id="menu">
<ul id="navbar">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Menu 1 - Sub 1</a></li>
<li><a href="#">Menu 1 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu 2 - Sub 1</a></li>
<li><a href="#">Menu 2 - Sub 2</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Menu 3 - Sub 1</a></li>
<li><a href="#">Menu 3 - Sub 2</a></li>
</ul>
</li>
</ul>
</div>
<div id="body">
<div id="menuShade">
</div>
</div>
<div id="footer" align="center">
<a href="http://www.ACSWebGroup.com">www.ACSWebGroup.com</a> 905-827-7882
</div>
</div>
</body>
</html>
Here is the menu.css: Code: /* CSS Document */
#navbar {
margin: 0px;
padding: 0px;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #fff;}
#navbar li:hover ul {
display: block;
position: absolute;
margin: 0px;
padding: 0px; }
#navbar li:hover li {
float: none; }
#navbar li:hover li a {
/*background-color: #fff;*/
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #000; }
#navbar li li a:hover {
background-color: #fff; }
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0px;
padding: 0px; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
/*background-color: #fff;*/
border-bottom: 1px solid #000;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
color: #000; }
and here is the css.css: Code: /* CSS Document */
html{
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
}
body{
margin:0px;
padding:0px;
height:100%;
}
#pageContainer{
width:100%;
height:100%;
margin:0px;
padding:0px;
}
#header{
background-image:url(../images/header_background.jpg);
background-repeat:repeat-x;
height:55px;
margin:0px;
padding:0px;
padding-right:25px;
}
#headerLeft{
float:left;
margin:0px;
padding:0px;
}
#headerRight{
float:right;
margin:0px;
padding:0px;
}
#menu{
background-image:url(../images/menu_background.jpg);
background-repeat:repeat-x;
height:20px;
margin:0px;
padding:0px;
vertical-align:top;
overflow:hidden;
z-index:250;
}
#menuShade{
background-image:url(../images/menu_shading.png);
background-repeat:repeat-x;
position:relative;
top:0px;
left:0px;
height:9px;
margin:0px;
padding:0px;
}
#body{
overflow:auto;
margin:0px;
padding:0px;
height:100%;
width:100%;
position:absolute;
top:75px;
z-index:100;
}
#footer{
background-image:url(../images/footer_background.jpg);
background-repeat:repeat-x;
background-color:#003;
position:relative;
bottom:93px;
left:0px;
height:18px;
margin:0px;
padding:0px;
font-size:10px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#BFC0AD;
padding-top:2px;
}
Any help would be greatly appreciated. Thanks, LiquidBuRn Hi all! I'm trying to make a horizontal menu with vertical drop downs.. However, the dropdowns don't go where they're supposed to. The menu is more or less at hybrid between a horizontal menu and a drop-down menu, so it's probably all more or less messed up You can check out the site at: cleopatra.gebodesign.no The files are at: gebodesign.no/cleopatra/menu.php gebodesign.no/cleopatra/stylesheet.css Thanks for any input Hi, I am working on this website atm: www.powys.gov.uk I have a problem with the menu, the problem is when you scale the browser window and the menu links(on the left column) are forced to wrap, the indentation of the link isnt the same e.g: Code: My Menu Link Has been wrapped I want it to be like: Code: My Menu Link Has been Wrapped The problem only occurs in IE, it looks perfect in Mozilla, can anyone offer any help on how I might fix this? I am out of ideas. Regards, Graham Hello, I have a problem to display a List/Menu in IE. It cut off the text in the drop down list when I set the WIDTH of the drop down box shorter than the text. It works fine in FireFox. Here is the picture I captured to demonstrate what I'm talking about. Sorry the forum don't allow me to post url, please copy the link and paste it in your browser linklighthouse.com/dropdown_ie.html How do I fix this problem in IE? Please help! Thanks Hi all, I've got a horizontal menu that is working just fine in every browser but IE 6 and 7. In IE it's almost there, except that the submenus will only appear one level deep. The menu is created with nested lists. The :hover functionality is simulated via JavaScript for IE 6. The IE developer toolbar shows the 3rd level menu is correctly being changed to display: block when its parent is hovered, and the border the dev toolbar draws even puts it in the correct place, it just doesn't actually appear. You can find the page he http://www.perceptes.com/topdog/ The CSS and JS (uses jQuery) can be found he http://www.perceptes.com/topdog/css/screen.css http://www.perceptes.com/topdog/css/ie.css (loaded with a conditional comment) http://www.perceptes.com/topdog/js/tdps.js http://www.perceptes.com/topdog/js/ie.js (loaded with a conditonal comment) For a specific example of what I'm talking about, try hovering over the second item, Filters & Parts. This will give you another level with four choices. Each of those also has child elements, but when hovered over, the next level doesn't appear. Try it in something other than IE 6 or 7 to see how it's supposed to look. Thanks very much in advance! Ok, I know virtually nothing about css, but realized that that a css menu is better for SEO. Anyway I found this vertical menu that works the way I want it. But I also need a horizontal version of it with dropdown submenus. Can someone help with this? I have been trying a bunch of things but it just looks awful and doesn't work right. It has 3 basic componets; Html, Javascript, and css. Here they are below. drop_down.js: Code: // JavaScript Document
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
HTML: 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>
<title>Horizontal Drop Down Menus</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
@import "style2.css";
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">History</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Offices</a></li>
</ul>
</li>
<li><a href="#">Services</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Internet Marketing</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Domain Names</a></li>
<li><a href="#">Broadband</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">United Kingdom</a></li>
<li><a href="#">France</a></li>
<li><a href="#">USA</a></li>
<li><a href="#">Australia</a></li>
</ul>
</li>
</ul>
</body>
</html>
Style2.CSS: Code: body {
font: normal 11px verdana;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
}
li ul {
position: absolute;
left: 149px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover { color: #E2144A; background: #f9f9f9; } /* Hover Styles */
li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do. I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha. My HTML looks like this: Code: <li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub pos1">
<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="border b1"></div>
<div class="base div1">
<h4>August 2005</h4>
<p>August 29</p>
<p>New school division office will be in Weyburn</p>
<ul>
<li><a href="#url">Section 1</a></li>
<li><a href="#url">Section 2</a></li>
<li><a href="#url">Section 3</a></li>
</ul>
</div>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this: Code: #verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}
Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point. Hi ppl I'm trying to figure out how to do the following list, with CSS Is there any way that the boxes can accomodate themselves based on the width of their container's space? I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so... Thanks I think I have the basics down to making my ul navigation list display as a nav bar. The rules I am using are
Code:
div#navigation
{
background: #7799aa;
color: #ffffff;
margin: 4px 0 0 0;
}
div#navigation ul { list-style-type: none; margin: 0; padding: 8px; }
div#navigation ul li { margin-right: 50px; width: 200px; display: inline; }
div#navigation ul li a { color: #ffffff; width: 400px; }
div#navigation ul li a:hover { background: #255599; }
and the corresponding html Code:
<div id="navigation">
<ul>
<li><a href="/" title="The Company">Company</a></li>
<li><a href="/" title="Our Solutions">Projects</a></li>
<li><a href="/" title="What We Do">Services</a></li>
<li><a href="/" title="Contact Us">Contact</a></li>
<li class="last"><a href="/" title="What people are saying">Testimonials</a></li>
</ul>
</div> <!-- navigation -->
Now, the problem is that I am trying to make the links seem like "buttons" or blocks. I cannot get them to a) have a width; or b) expand to the width of the list item (which I cannot give a specified width to either). I am still working with the design in firefox so I haven't ventured into getting it to work in IE. The XHTML is completely valid as is the rest of the stylesheet. I can post more if necessary, but does anyone have a bone? Hi, I'm trying to make a horizontal list using li tags. I got the text to align horizontally but the bullet icons I want to use (or even when I try with the default bullets) don't appear. Can anyone help me out with this? Here's the code : Code:
#onlineToolsNav ul {
margin-top: 0px;
margin-bottom : 0px;
margin-left : 5px;
padding: 0px;
line-height: 25px;
white-space: nowrap;
display : inline;
}
#onlineToolsNav li {
display: inline;
list-style-image: url(onlineArrow.jpg);
list-style: url(onlineArrow.jpg);
}
#onlineToolsNav li:before {
content: url(onlineArrow.jpg);
}
#onlineToolsNav li.first:before {
content: " ";
}
<div id="onlineToolsNav">
<ul>
<li><a href="link1.html">link1</a></li>
<li><a href="link2.html">link2</a></li>
<li><a href="link3.html">link3</a></li>
<li><a href="link4.html">link4</a></li>
<li><a href="link5.html">link5</a></li>
<li><a href="link6.html">link6</a></li>
</ul>
</div>
Thanx Olografix |
|||||||