|
CSS - Trying To Center The Typical Css Drop-down Menu Within A Div
I'm simply trying to center a horizontal menu with a drop down.
The two methods I know of to align the list items in the top menu are 1) Code: li { float: left; }
and 2) Code: li { display: inline; }
. The first method is needed for absolute positioning of the drop down list, but it left aligns the top menu. The second method centers the menu (desired affect) but throws off the drop down placement because the it lacks the containing block. Works, but left aligned: http://www.highgatecross.com/develo...ered_menu1.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>Centered</title>
<style type="text/css" title="style" media="all">
#navigation {
position: relative;
margin: 0 auto;
width: 800px;
height: 30px;
background: #9E9670 }
a {
font: 11px verdana, sans-serif;
color: #54503B;
text-decoration: none }
#menu {
position: relative;
margin: 0 auto;
padding: 0;
width: 600px;
border: 1px solid #c00;
text-align:center }
#menu li {
float: left;
list-style: none }
#menu li a {
display: block;
padding: 7px 25px }
#menu li a:hover {
color: #F4E9AD }
#menu li ul {
position: absolute;
left: -1000em;
z-index: 10 }
#menu ul {
float: left;
width: 100px;
list-style: none;
padding: 0 }
#menu ul li a {
display: block;
padding: 7px 10px;
background-color: #C7BE8D;
width: 100px }
#menu ul li a:hover {
background: #F4E9AD;
color: #54503B }
#menu li:hover ul {
left: auto }
</style>
</head>
<body>
<div id="navigation">
<ul id="menu">
<li class="top"><a href="Home">Home</a></li>
<li class="top"><a href="About">About</a></li>
<li class="top"><a href="Training">Training</a>
<ul>
<li><a href="Overview">Overview</a></li>
<li><a href="Training_Schedule">Schedule</a></li>
<li><a href="Training_Contact">Contact</a></li>
</ul>
</li>
<li class="top"><a href="Events">Events</a></li>
<li class="top"><a href="Contact">Contact</a></li>
</ul>
</div>
</body>
</html>
Centers, but drop down is in the wrong place: http://www.highgatecross.com/develo...ered_menu2.html Code:
#menu li {
display: inline; /* float: left */
list-style: none }
#menu li a {
display: block; /* delete this line */
padding: 7px 25px }
Note: I normally have my closing } flush left, but trying to keep it clean for the forum. And yes, this is not IE compatible. Question: How to I center the top menu and have the drop down placed correctly? Thanks. Similar TutorialsHello everyone, I have a drop-down menu that is currently working well. The only change I need to make is to have the right edge of the drop-down menu to align with the right edge of the parent menu. When you hover over the menu, it currently "drops" down and to the right, with the left edges aligned. I want the menu to "drop" down and to the left, so the right edges are aligned. I have tried fiddling with floats and absolute/relative positioning. I'm not sure what needs to be changed. Any help you can provide is greatly appreciated! I'm learning via "cut and paste", so please go easy on any terminology you may use. Thank you! Here is the page: http://www.littlebuddymedia.com/site05/012.html The menu currently drops like this (aligned along the left edge): http://www.justskins.com/wp-content/uploads/2008/12/drop-down-menu.gif I want the menu to do this (align along the right edge; see how "Artists" is aligned under "Music" along the right edge): http://artatm.com/wp-content/uploads/2009/11/mtvmenu.JPG Here is my code: Code:
.chromestyle{
width: 100%;
font-weight: bold;
float: left;
height: 29px;
}
.chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.chromestyle ul{
border: 0px solid #BBB;
width: 100%;
background: url(chromebg.gif) center center repeat-x; /*THEME CHANGE HERE*/
padding: 4px 0;
margin: 0;
text-align: right; /*set value to "left", "center", or "right"*/
}
.chromestyle ul li{
display: inline;
}
.chromestyle ul li a{
color: #000000;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-left: 1px solid #DADADA;
}
.chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
background: url(chromebg-over.gif) center center repeat-x; /*THEME CHANGE HERE*/
}
/* ######### Style for Drop Down Menu ######### */
.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #BBB; /*THEME CHANGE HERE*/
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}
.dropmenudiv a{
width: auto;
display: block;
text-indent: 3px;
border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
padding: 2px 5px;
text-decoration: none;
font-weight: bold;
color: black;
}
* html .dropmenudiv a{ /*IE only hack*/
width: 100%;
}
.dropmenudiv a:hover{ /*THEME CHANGE HERE*/
background-color: #0000ff;
color: #fff200;
}
i am relatively new to CSS and would like to know if anyone can assist in helping me figure out why IE on the PC is not displaying page elements properly. Here is the link: Well it was blocked. Hmm... how am I supposed to do this? Please have an administrator email me so I can figure out how to add a link to my problem. Unless I am supposed to include all HTML and CSS code???? On both the contact and home pages, there are elements, or columns, that belong on the the left side of the page. Yet they appear on the right side of the page on IE for PC. They appear as designed in Safari, FF, Opera and even IE 5.2 on a Mac. Any help is greatly appreciated. I have a problem and I need some help on centering the UL,LI menus instead of having it stick to the left... Code:
#dmenu
{
/* font-family: Arial, Helvetica, Sans-Serif; */
/* font-size: 12px; */
}
#dmenu li ul
{
/* top: auto; */
/* left: auto; */
}
#dmenu li:hover ul
{
/* lists nested under hovered list items */
display: block;
}
#dmenu li.over ul
{
display: block;
}
.xMenuUl
{
text-align: center; /* for IE stupidity */
background-color: #FFFFFF;
list-style-type: none; /* hide the bullet icon */
margin: 0;
padding: 0;
}
.xMenuLi
{
list-style-type: none; /* hide the bullet icon */
float: left;
}
.xMenuTitle
{
display: block;
width: 100px;
text-indent: 0px;
text-decoration: none;
border: 1px solid #000000;
padding: 4px;
line-height: 14px;
}
.xSubmenuUl
{
list-style-type: none;
position: absolute;
margin: 0;
padding: 0;
display: none;
margin-top: -1px;
background-color: #E7F7FF;
background-position: top left;
background-repeat: repeat-x;
border-top: 1px solid #000000;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
border-left: 7px solid #FF0000;
}
.xSubmenuLi a
{
padding: 3px;
text-decoration: none;
color: #000000;
display: block;
width: 250px;
}
.xSubmenuLi a:hover
{
text-decoration: none;
background: #336699;
color: #FFFFFF;
}
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> </head> <body> This is a test...<br>sdfsdf<br> <ul class="xMenuUl" id="dmenu"> <li class="xMenuLi"><a href="" class="xMenuTitle">Home</a> <ul class="xSubmenuUl"> <li class="xSubmenuLi"><a href="">Frequently asked questions</a></li> <li class="xSubmenuLi"><a href="">Impressum - Required by Law</a></li> <li class="xSubmenuLi"><a href="">Links and whos better than me</a></li> <li class="xSubmenuLi"><a href="">Sitemap - quick list of all links</a></li> </ul> </li> <li class="xMenuLi"><a href="" class="xMenuTitle">Perl</a> <ul class="xSubmenuUl"> <li class="xSubmenuLi"><a href="">Trees, Twigs and XML</a></li> <li class="xSubmenuLi"><a href="">Perl Data Types and using Hashes</a></li> <li class="xSubmenuLi"><a href="">XML Data and how to write it</a></li> <li class="xSubmenuLi"><a href="">XML Data and why I love it</a></li> </ul> </li> <li class="xMenuLi"><a href="" class="xMenuTitle">SVG</a> <ul class="xSubmenuUl"> <li class="xSubmenuLi"><a href="">Interactive with the mouse</a></li> <li class="xSubmenuLi"><a href="">Basic objects and which software</a></li> <li class="xSubmenuLi"><a href="">Interactive does not mean it is Flash</a></li> <li class="xSubmenuLi"><a href="">Animated ECMA and generating objects on the fly</a></li> <li class="xSubmenuLi"><a href="">Clipart and Popart</a></li> </ul> </li> </ul> this is a test....<br> asdf<br> </body> </html> Following sample is from http://www.code-couch.com/jeff/snippets/general/tektips-navigation-example.html is what I am trying to reference to create a template. But how do I how keep the state of Menu on each requested page any help is appreciated. The following menu is saved in a separate jsp file i.e. navs.jsp. I include this navigation jsp file in all of my files. Initially the drop down looks like: Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Now clicking [+] in front of Google.com will look like. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Lets's say now if I click on Google.co.ie it takes me to sample.jsp and on this requested page (sample.jsp) how can I show the following menu hierarchy with Google.co.ie bold/underlined/colorchanged showing what menu content I clicked and am viewing the appropriate content i.e. Code:
. Ask.Jeeves
. [-] Google.com
. Google.co.ie
. Google.co.ie
. [+] Google.co.nz
. [+] Yahoo.com
Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page with higlight/bold/colored the link we just selected. i.e. Code: . Ask.Jeeves . [+] Google.com . [+] Yahoo.com Any time clicking on the menu takes me to some page but on that page I want to show th hierarchy of the menu all the way to which is recently clicked with different color setting. Here is the source for the above: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>
<meta http-equiv="content-language" content="en"/>
<title>Test Harness</title>
<style type="text/css">
ul li ul {display:none;list-style-type: none;}
#myNav li a:hover {
color: blue;
}
#myNav li a:active {
color: #FF0000;
background: #FFFFFF;
}
#myNav { list-style-image: url(page.GIF); }
</style>
<script type="text/javascript">
<!--
function initNav() {
var navObj = document.getElementById('myNav');
var ulCollection = navObj.getElementsByTagName('li');
for (var loop = 0; loop < ulCollection.length; loop++) {
if(ulCollection[loop].getElementsByTagName('ul').length > 0) {
/* we have an LI that contains a UL */
if (ulCollection[loop].getElementsByTagName('span').length > 0) {
/* there is at least one SPAN tag present */
ulCollection[loop].getElementsByTagName('span')[0].innerHTML = "[<a href=\"javascript://\" onclick=\"this.innerHTML=this.innerHTML=='+'?'-':'+';temp=this.parentNode.parentNode.getElementsByTagName('ul')[0].style;temp.display=temp.display=='block'?'none':'block';\">+</a>] ";
}
}
}
}
window.onload = initNav;
//-->
</script>
</head>
<body>
<ul id="myNav">
<li><a href="http://www.askjeeves.com">Ask.Jeeves</a></li>
<li><span></span><a href="http://www.google.com">Google.com</a>
<ul>
<li><a href="http://www.google.co.uk">Google.co.uk</a></li>
<li><a href="http://www.google.co.ie">Google.co.ie</a></li>
<li><span></span><a href="http://www.google.co.nz">Google.co.nz</a>
<ul>
<li>*3*</li>
<li>*4*</li>
</ul>
</li>
</ul>
</li>
<li><span></span><a href="http://www.yahoo.com">Yahoo.com</a>
<ul>
<li><a href="http://www.yahoo.co.uk">Yahoo.co.uk</a></li>
<li><a href="http://www.yahoo.co.nz">Yahoo.co.nz</a></li>
</ul>
</li>
</ul>
</body>
</html>
Any help is really appreciated thanks. EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page Hi, For some reason I can't get the main menu to center, nor will the background color (light blue) extend all the way to the right. You can see what I mean he http://www.granddistraction.com Any help would be appreciated. Thanks. The menu left aligns - from float left but even if I put the UL in a div and auto the borders it won't center. Any ideas? Code:
<div id="banner" align="center"><a href="mysite.com"><img src="images/top_banner.jpg" border="0"></a></div>
<ul id="menu">
<li><a href="1.html" title=">1</a></li>
<li><a href="2.html" title=">2</a></li>
<li><a href="3.html" title=">3</a></li>
<li><a href="4.html" title=">4</a></li>
<li><a href="5.html" title=">5</a></li>
<li><a href="6.html" title=">6</a></li>
</ul>
I then have the following CSS: Code:
#banner {
background: url("images/header_split.jpg") bottom right repeat;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu {
background: #5a5152;
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
#menu li {
float: left;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
#menu a {
background: #5a5152 url("images/seperator.gif") bottom right no-repeat;
color: #ccc;
display: block;
float: left;
margin: 0;
padding: 8px 12px;
text-decoration: none;
}
#menu a:hover {
background: #2580a2 url("images/hover.gif") bottom center no-repeat;
color: #fff;
padding-bottom: 8px;
}
The menu left aligns - from float left but even if I put the UL in a div and auto the borders it won't center. Any ideas? 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! I want to center a horizontal menu (not the words - the entire menu). Everything I read says I need to insert align-text: center into the #menu ul portion of my CSS. However, I've tried that and it doesn't work for me. I'm using Dreamweaver for my editing and I'm rather new to CSS. The CSS code I have for the menu is: Code: #menuwrapper {width: 1280px;
height: 25px;
background: #FFC557 url(images/menu_background.jpg) repeat-x;
color: #000;}
#menu, #menu ul {display: inline;
margin: 0;
padding: 0;
list-style: none;}
#menu li {display: block;
float: left !important;
padding: 0;
margin: 0;
line-height: 25px;
position: relative;
left: 19px;}
#menu a {height: 25px;
width: 85px;
background: #FFC557 url(images/button.jpg) no-repeat;
color: #000;
display: block;
font-size: 105%;
font-weight: bold;
text-align: center;
text-decoration: none;
border-left: 1px solid #000;}
#lastbutton {border-right: 1px solid #000;}
#menu a:hover {background-position: 0 -25px;}
Now how the heck do I center the menu as opposed to having it aligned to the left??? I have a horizontal nav menu I've created using <ul> and <li> inside a <div> The problem is I can't get it to vertically center. I tried using padding and/or margin and it didn't work for all browsers. Here is the html: Code: <div class="top_nav"> <ul> <li><a href='/'>HOME</a></li> <li><a href='menu'>MENU</a></li> <li><a href='catering'>CATERING</a></li><li>DETAILS</li> <li><a href='photos'>PHOTOS</a></li> </ul> </div> and the CSS: Code:
.top_nav {
margin: 0 auto 15px auto;
height: 25px;
padding: 10px;
clear: both;
}
.top_nav ul {
list-style: none;
text-align: center;
}
.top_nav li {
padding: 0 25px;
font-family: "Palatino Linotype", "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
display: inline;
letter-spacing: 2px;
}
.top_nav li a {
color: #FFF;
text-decoration: none;
}
.top_nav li a:hover {
text-decoration: underline;
border-bottom: 3px solid #660000;
}
It stays vertically positioned at the top This is my page Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>123</title>
<link href="oto.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
* {
margin : 0;
padding : 0;
}
html, body, #wrap {
height : 100%;
margin : 0 auto;
width : 980px;
background-color : #666666;
}
body > #wrap {
height : auto;
min-height : 100%;
width : 980px;
background-color : #333333;
}
a img {
border : none;
}
#main {
height : 200px;
background-color : #999999;
}
#nav {
height : 35px;
}
#sad {
padding-bottom : 200px;
background-color : #999999;
height : 500px;
}
#footer {
position : relative;
margin-top : -200px;
height : 200px;
clear : both;
background-color : #000000;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
.clearfix {
display : inline-block;
}
* html .clearfix {
height : 1%;
}
.clearfix {
display : block;
}
.menu {
border : none;
border : 0;
margin : 0;
padding : 0;
font : 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size : 14px;
font-weight : bold;
margin-left: auto;
margin-right: auto;
}
.menu ul {
background : #333333;
height : 35px;
list-style : none;
padding : 0;
}
.menu li {
float : left;
padding : 0;
}
.menu li a {
background : #333333 url("images/seperator.gif") no-repeat bottom right;
color : #cccccc;
display : block;
font-weight : normal;
line-height : 35px;
margin : 0;
padding : 0 25px;
text-align : center;
text-decoration : none;
}
.menu li a:hover, .menu ul li:hover a {
background : #2580a2 url("images/hover.gif") no-repeat bottom center;
color : #ffffff;
text-decoration : none;
}
.menu li ul {
background : #333333;
display : none;
height : auto;
padding : 0;
margin : 0;
border : 0;
position : absolute;
width : 250px;
z-index : 200;
}
.menu li:hover ul {
display : block;
}
.menu li li {
background : url('images/sub_sep.gif') no-repeat bottom left;
display : block;
float : none;
margin : 0;
padding : 0;
width : 250px;
}
.menu li:hover li a {
background : none;
}
.menu li ul a {
display : block;
height : 35px;
font-size : 12px;
font-style : normal;
margin : 0;
padding : 0 10px 0 15px;
text-align : left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background : #2580a2 url('images/hover_sub.gif') no-repeat center left;
border : 0;
color : #ffffff;
text-decoration : none;
}
.menu p {
clear : left;
}
-->
</style></head>
<body>
<div id="wrap">
<div id="main" class="clearfix">header</div>
<div id="nav">
<div class="menu">
<ul>
<li><a href="#" ><img src="images/bth.png" alt="Oto Nautika"></a></li>
<li><a href="#">Aaaaaa</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</li>
<li><a href="/faq.php">Bbbbbbb</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li><a href="/faq.php">Cccccccccc</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li><a href="/faq.php">Ddddddd</a>
<ul>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="/faq.php">Eeeeeee</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li><a href="/faq.php">Ffffff</a>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="sad">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I can't center the menu horizontally, I've tried a lot of methods. The last one I tried was Matt James Taylor's on his blog, but to no avail. I can't get it to work, so if anyone has ideas how to make the menu always in the center of the page....thanks I am trying to create a website for my business and I cannot seem to center the navigation at the top of the screen and have the areas to the left and right of the screen be filled with the same bg color as the UL. I know usually you would set the margins to 0 auto to center that element on the page but for some reason its not working and the UL is just sticking to the left part of the screen. If anybody knows how to get this centered or how to fix my html/css i would sincerely appreciate it. Here is my code (html then css): <body> <div class="wrap"> <div class="menu"> <ul> <li><a href="products.html" target="_self" >Products</a> <ul> <li><a href="seaisland.html" target="_self">Sea Island Collection</a></li> <li><a href="grandoak.html" target="_self">Grand Oak Collection</a></li> <li><a href="airflow.html" target="_self">Air-Flow </a></li> <li><a href="pure.html" target="_self">Pure Visor</a></li> <li><a href="coldweather.html" target="_self">Cold Weather</a></li> <li><a href="fahrenheit.html" target="_self">Fahrenheit Collection</a></li> <li><a href="caddietowels.html" target="_self">Caddie Towels</a></li> <li><a href="woventowels.html" target="_self">Woven Towels</a></li> <li><a href="sunprotection.html" target="_self">Sun Protection</a></li> <li><a href="" target=""></a></li> </ul> </li> <li><a href="embelishments.html" target="_self" >Embellishments</a> <ul> <li><a href="embroidery.html" target="_self">Embroidery</a></li> <li><a href="wovenlabels.html" target="_self">Woven Labels</a></li> <li><a href="medallions.html" target="_self">Medallions</a></li> <li><a href="laserappliques.html" target="_self">Laser Appliques</a></li> <li><a href="ballmarkers.html" target="_self">Ball Markers</a></li> <li><a href="ultrasuede.html" target="_self">Ultra Suede</a></li> </ul> </li> <li><a href="specials.html" target="_self" >Specials</a> </li> <li><a href="whatsnew.html" target="_self" >Whats New</a> </li> <li><a href="order.html" target="_self" >Order</a> </li> <li><a href="contact.html" target="_self" >Contact</a> </li> </ul> </div> body{ font-family: Verdana, Arial, Helvetica, sans-serif; color: #333333; background-color:#b7b7b7; padding: 0px; overflow:auto; border: #0F0 solid 5px; margin: auto; } .wrap{ margin:0 auto; background-color:b7b7b7; border:0px; padding:0px; } .menu{ border:0px; padding:0px; font: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold; background-color:#F0F; } .menu ul{ background:#b7b7b7; height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ background:#333333 url("images/seperator.gif") bottom right no-repeat; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #2580a2 url("images/hover.gif") bottom center no-repeat; color:#FFFFFF; text-decoration:none; } .menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { background:url('images/sub_sep.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:#2580a2 url('images/hover_sub.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; } I'm embedding menumatic into a joomla 1.6 based website. Menumatic is just a slick css suckerfish menu with some mootools effects. http://greengeckodesign.com/menumatic Anyway, I've edited the CSS to look ALMOST right. The only problem is that I cannot get the menu as a whole to center correctly on the page. Anybody have any ideas about how i can do this? (In addition to the 100's of things I've tried, I've tried putting it in another set of div's and centering that div, but it didn't work ) below is all the code. I left the JS out, since it also runs (a bit less prettily) on pure css. Also, I have verified the CSS at w3. There are four lines that are not standard, but they are to do with the rounded corner borders, not the spacing or alignment. Edit: A bit more playing around and I have think it is a conflict with floating the items left. They need to display:block in order to display correctly so they also need to float (left) since they would otherwise be on separate lines (I think). Anybody have an idea about how to get around this? I tried to justify the text (that would be fine for my purposes), but it didn't work either. CSS: Code:
#mainMenu{
background-color: #036;
padding: 0px;
font-size: medium;
text-align: center;
}
/* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish
* Dropdowns by Patrick Griffiths and Dan Webb.
* http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/
/* ----[ LINKS ]----*/
/* all menu links */
.menuMain a, #subMenusContainer a{
text-decoration:none;
display:block;
padding:10px 20px;
background-color:#036 ;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
/* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
.menuMain a{
margin:0;
float:left;
color:#fff;
}
/* Just sub menu links */
#subMenusContainer a, .menuMain li li a{
}
/* All menu links on hover or focus */
.menuMain a:hover, .menuMain a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, .menuMain a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused{
background-color:#06c ;
color:#FFF;
}
/* sub menu links on hover or focus */
#subMenusContainer a:hover,
#subMenusContainer a:focus,
.menuMain a.mainMenuParentBtnFocused,
#subMenusContainer a.subMenuParentBtnFocused,
.menuMain li a:hover,
.menuMain li a:focus{
background-color:#06c ;
color:#FFF;
}
/* Parent Sub Menu Links ---[javascript users only]*/
.subMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_right.gif) right center no-repeat;
}
/* Parent Sub Menu Links on hover or focus ---[javascript users only]*/
.subMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_right_over.gif) right center no-repeat;
}
/* Parent Main Menu Links ---[javascript users only]*/
.mainMenuParentBtn{
background: url(../ottest/templates/ot_template/images/arrow_down.gif) right center no-repeat;
}
/* Parent Main Menu Links on hover or focus ---[javascript users only]*/
.mainMenuParentBtnFocused{
background: url(../ottest/templates/ot_template/images/arrow_down_over.gif) right center no-repeat;
}
/* ----[ OLs ULs, LIs, and DIVs ]----*/
/* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW{
display:none;
position: absolute;
overflow:hidden;
/*the 2px left & right padding lets you have a 1px border
on the ul or ol inside since overflow is set to hidden*/
padding:0 2px;
margin:0 0 0 -2px;
}
/* All ULs and OLs */
.menuMain, .menuMain ul, .menuMain ol, #subMenusContainer ul, #subMenusContainer ol {
padding: 0;
margin:0 20px 0 0;
list-style: none;
line-height: 1em;
}
/* All submenu OLs and ULs */
.menuMain ol, .menuMain ul, #subMenusContainer ul, #subMenusContainer ol {
/*border around submenu goes here*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:#036;
left:0;
}
/* List items in main menu --[for non-javascript users this applies to submenus as well] */
.menuMain li {
/*great place to use a background image as a divider*/
display:block;
list-style:none;
margin:0 5px;
position:relative;
float:left;
}
#subMenusContainer li{
list-style: none;
}
/* main menu ul or ol elment */
.menuMain{
display:block;
list-style:none;
margin-top:0px;
margin-bottom:0px;
margin-left:40px;
margin-right:auto;
z-index:5;
text-align: center;
display:block;
}
#subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; }
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
.menuMain li li{ float:none; }
.menuMain li li a{ /* Just submenu links*/
position:relative;
float:none;
}
.menuMain li ul { /* second-level lists */
position: absolute;
width: 10em;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
}
/* third-and-above-level lists */
.menuMain li ul ul { margin: -1em 0 0 -1000em; }
.menuMain li:hover ul ul { margin-left: -1000em; }
/* lists nested under hovered list items */
.menuMain li:hover ul{ margin-left: 0; }
.menuMain li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
/* extra positioning rules for limited noscript keyboard accessibility */
.menuMain li a:focus + ul { margin-left: 0; margin-top:2.2em; }
.menuMain li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
.menuMain li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;}
.menuMain li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;}
.menuMain li:hover a:focus{ margin-left: 0; }
.menuMain li li:hover a:focus + ul { margin-left: 10em; }
The menu html (an excerpt) Code: <html> <head> <link rel="stylesheet" href="MenuMatic.css" type="text/css" /> </head> <body> <div id="mainMenu" style="width:950px;"> <ul class="menuMain"> <li id="item-101" class="current active"><a href="/ottest/" >Home</a></li> <li id="item-102" class="deeper parent"><a href="/ottest/currentissuemenu" >Current Issue</a> <ul> <li id="item-133"><a href="/ottest/currentissuemenu/test-item-menu" >Test item menu</a></li> </ul> </li> <li id="item-103"><a href="/ottest/otblogmenu" >OT Blog</a></li> <li id="item-104"><a href="/ottest/previousissuesmenu" >Previous Issues</a></li> <li id="item-105"><a href="/ottest/classifiedsmenu" >Classifieds</a></li> <li id="item-124"><a href="/ottest/contact-us" >Contact Us</a></li> </ul> </div> </body> </html> Please forgive me if this is just a stupid mistake, I'm pretty much a CSS newbie. I generated a CSS menu (http://www.webmaster-toolkit.com/css-menu-generator.shtml) and inserted it into my CSS file. The menu is ok, but it pushed my center column down so that it only touches at a corner, when it should be leveled up and touching along the side. Here's the relevant code: Quote: #c-col{ position: relative; margin: 0px 74px 20px 180px; border: 1px solid #003366; background: #333366; color: #CCFFFF; padding: 20px; z-index: 3; } .buttonscontainer {width: 174px;} .buttons a {color: #333366; border: 1px solid; background-color: #336699; padding: 2px; padding-left: 3px; font: 12px Arial, sans-serif; font-weight: bold; text-decoration: none; border-color: #9999CC #333366 #333366 #9999CC; display: block; margin: 0px; width: 100%; text-align: left;} .buttons a:hover {border: 1px solid; padding-left: 4px; padding-top: 3px; padding-bottom: 1px; padding-right: 1px; background-color: #6666CC; border-color: #333366 #9999CC #9999CC #333366; color: #333366; text-decoration: none;} Have I inserted it in the wrong place or is there something missing/redundant? I'd appreciate any suggestions. I working on a CSS to display a round-shouldered-tab menu. My result is acceptable: http://rickduley.webs.com/roundShoulderTabMenu.jpg except for the fact that the tabs are set below the menuBar on which the are supposed to display. I have run out of ideas. Would someone please set me on the right path? Thanks. P.S.: the code is at http://rickduley.webs.com/roundShoulderTabMenu.zip.kgb - you have to delete the 'dot key gee bee' suffix. First let me start of with this for doing all this work for my drop down menu and then finding out that IE6 (apparently 50% of people browsing) doesn't support :hover except on anchor tags. Here is my situation. I finally got my drop down menu working. However, there are three issues. when I hover over the 'companies' menu item 1) the menu expands and pushes the 'blog' and 'contact' menu items further down the menu. I will say that I did not define a width on the li tags because this is actually for a wordpress theme and I wanted to allow for more pages that might be added later. I thought that by defining a width I would be more likely to fill up my menu container. 2) the child/nested li tags aren't under the parent li tag. Basically the sub-menu items show up to the bottom and right of the 'companies' menu item. I want them to show up directly underneath the parent menu item. 3) the longer sub-menu items (nested li tags) are not showing up on the same line. It's like there is a width that is causing them to overlap or go down to the next row. Not sure if that makes sense. I am wanting it to appear on one line no matter how long the menu item is. I am sure that not defining a width on the li tags have something to do with some of these problems but I wanted others to take a look at it. Code(validated) and styles below. Tried to keep it simple. there are two img files that I use as well but couldn't figure out how to upload those. Any and all help from the CSS gurus will be greatly appreciated. Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop Menu Test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="access">
<div id="menu-container">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Compare</a></li>
<li><a href="#">Companies</a>
<ul>
<li><a href="#">Company number one</a></li>
<li><a href="#">Company 2</a></li>
<li><a href="#">Company #3</a></li>
<li><a href="#">Company number 4</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--menu-->
</div><!--menu-container-->
</div><!--access-->
</body>
</html>
Code: body{
background-color: #999;
margin: 0;
}
ul,li {
margin: 0;
}
div#access {
margin: 0px;
background-repeat: repeat-x;
background-image: url(images/navbar-bckgrd.gif);
}
div#menu {
height:1.5em;
width:100%;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}
div#menu a {
color: #FFF;
text-decoration: none;
}
div#menu-container {
width: 974px;
margin-right: auto;
margin-left: auto;
height: 27px;
margin-top: 0px;
margin-bottom: 0px;
}
div#menu li {
list-style-type: none;
color: #FFF;
position: relative;
float: left;
height: 27px;
/*width: 6em;*/
font-size: 1.2em;
line-height: 1em;
}
div#menu ul a {
display:block;
margin-right:1em;
padding:0.2em 0.5em;
}
div#menu li a:hover {
background-image: url(images/hover%20menu.jpg);
background-repeat: repeat-x;
}
/*second teir*/
div#menu li ul {
display: none;
background-repeat: repeat;
background-color: #CCC;
margin: 0px;
}
div#menu li:hover ul {
display: inline;
float: left;
width: 10em;
height: auto;
}
div#menu li ul li {
font-size: 0.9em;
width: 7em;
margin-left: 0px;
}
div#menu li ul li a {
color: #000;
margin-left: 0px;
}
div#menu li ul li a:hover {
color: #FFF;
}
I am sure this has been answered many times over, but I can't seem to find a solution that works. Sorry if I am re-posting something that has been asked before. I am trying to add a drop down menu to a website I am working on, the menu works great in all browsers except IE7 (I haven't tried anything earlier). In IE7, when I hover over the menu items they show the selections like they are supposed to, but when I move the cursor to select an item from the drop down it disappears. I've tried many different things, but can't seem to get anything to work. Any help would be much appreciated. Links to files: simad.ca/wp/test/index.html simad.ca/wp/test/nav.css Hi, I have this drop down menu, but the parents are appearing under each other, instead of next to each other. I am trying to create a horizontal menu with sub items appear under the parent items. this is my code: PHP Code: #menu2 { width: 800px; float:left } #menu2 ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu2 a, #menu2 h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #ccc #888 #555 #bbb; margin: 0; padding: 2px 3px; } #menu2 h2 { color: #fff; background: #000; text-transform: uppercase; } #menu2 a { color: #000; background: #efefef; text-decoration: none; } #menu2 a:hover { color: #a00; background: #fff; } #menu2 li {position: relative; float:left; width: 200px;} a.mainlevel{background-color: #000000!important; display:inline-block} #menu2 ul ul { position: absolute; z-index: 500; float:left } #menu2 ul ul ul { position: absolute; top: 0; } div#menu2 ul ul, div#menu2 ul li:hover ul ul, div#menu2 ul ul li:hover ul ul {display: none;} div#menu2 ul li:hover ul, div#menu2 ul ul li:hover ul, div#menu2 ul ul ul li:hover ul {display: block;} Can anyone see anything wrong? Many thanks I'm playing around with CSS for the first time and have created a drop down menu that I would like to use for a site I have so any help would be greatly appreciated!!! I've placed the menu on its own page at h t t p : / / aztechnogeek . somee . com / cssmenu . html for accurate coding (just view source). - sorry as a new user I guess I can't post hyperlinks. What I would like to know how to do is when the cursor is moved down a menu list why the top hover attribute does not stay active??? Confusing I know but when you see the working menu you'll understand - I hope. Any help would be great, thank you!!! The code is here on an old Proboards test site: http://kayaoti.proboards.com/index.cgi The menu in the black bar is just one I used from a free code. It works fine except when you hover over the items, the drop-down tabs are out of alignment. I'm not code-savvy enough to know how to make them drop straight down or how to move them so they look nicer, but I'm guessing someone here could help me out in that regard. How can I edit the code (shown below) or whatever else to make the drop-down tabs look better aligned with the menu items? Code: <style type="text/css" media="screen"> /**************** menu coding *****************/ #menu { width: 748px; background: #000; float: left; } #menu ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } #menu h2 { color: #000; background: #000; text-transform: uppercase; } #menu a, #menu h2 { font: bold 11px/16px arial, helvetica, sans-serif; display: block; border-width: 1px; border-style: solid; border-color: #000 #000 #000 #000; margin: 0; padding: 2px 3px; } #menu a { color: #fff; background: #000000; text-decoration: none; } #menu a:hover { color: #fff; background: #000; } #menu li {position: relative;} #menu ul ul { position: absolute; z-index: 500; } #menu ul ul ul { position: absolute; top: 0; left: 100%; } div#menu ul ul, div#menu ul li:hover ul ul, div#menu ul ul li:hover ul ul {display: none;} div#menu ul li:hover ul, div#menu ul ul li:hover ul, div#menu ul ul ul li:hover ul {display: block;} </style> <!--[if IE]> <style type="text/css" media="screen"> #menu ul li {float: left; width: 100%;} </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body { behavior: url(csshover.htc); font-size: 100%; } #menu ul li a {height: 1%;} #menu a, #menu h2 { font: bold 0.7em/1.4em arial, helvetica, sans-serif; } </style> <![endif]--> <div id="menu" style="position:relative; left:301px; top:483px;"> <ul><li><a href="http://dominionwolves.proboards.com/"><IMG SRC="http://i44.tinypic.com/24zb1vq.png" border="0"></a></li></ul> <ul><li><IMG SRC="http://i43.tinypic.com/311lyra.png" style="position:relative; left:-40px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i39.tinypic.com/2cne1d5.png" style="position:relative; left:0px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/tips/css/#cssmenus" title="SEO Consultants Directory">CSS Hover Navigation</a> <ul> <li><a href="../css-dropdown-menus.html" title="tanfa Introduction">Intro for CSS Enthusiasts</a></li> <li><a href="index.html" title="Plain HTML Code">Demonstration HTML</a></li> <li><a href="http://www.xs4all.nl/~peterned/csshover.html" title="whatever:hover file">csshover.htc file</a></li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i40.tinypic.com/24ffxu1.png" style="position:relative; left:55px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/css/menus/vertical/" title="SEO Consultants Vertical Example">SEO Consultants Sample</a></li> <li><a href="vs7.html" title="Complete Example">tanfa Demo example</a> <ul> <li><a href="tutorial-v.html" title="Vertical Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="vs1.html" title="Vertical Menu - Page 1">Stage 1</a></li> <li><a href="vs2.html" title="Vertical Menu - Page 2">Stage 2</a></li> <li><a href="vs3.html" title="Vertical Menu - Page 3">Stage 3</a></li> <li><a href="vs4.html" title="Vertical Menu - Page 4">Stage 4</a></li> <li><a href="vs5.html" title="Vertical Menu - Page 5">Stage 5</a></li> <li><a href="vs6.html" title="Vertical Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> <ul> <li><IMG SRC="http://i42.tinypic.com/15cerno.png" style="position:relative; left:65px; top:2px;"> <ul> <li><a href="http://www.seoconsultants.com/css/menus/horizontal/" title="SEO Consultants Directory Example">SEO Consultants Sample</a></li> <li><a href="hs7.html">tanfa Demo example</a><!-- fully working sample --> <ul> <li><a href="tutorial-h.html" title="Horizontal Menu Tutorial">tanfa Tutorial</a> <ul> <li><a href="hs1.html" title="Horizontal Menu - Page 1">Stage 1</a></li> <li><a href="hs2.html" title="Horizontal Menu - Page 2">Stage 2</a></li> <li><a href="hs3.html" title="Horizontal Menu - Page 3">Stage 3</a></li> <li><a href="hs4.html" title="Horizontal Menu - Page 4">Stage 4</a></li> <li><a href="hs5.html" title="Horizontal Menu - Page 5">Stage 5</a></li> <li><a href="hs6.html" title="Horizontal Menu - Page 6">Stage 6</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </div>
|
|||||||