dzhax Posted October 6, 2010 Share Posted October 6, 2010 i have this sample code <div class="guidecontent"><ul> <li><a href="#intro">Introduction</a> <ul> <li><a href="#fui">Frequently Used Items</a></li> <li><a href="#rooms">More rooms</a></li> </ul> </li> <li><a href="#gettingthere">Getting to your house</a> <ul> <li><a href="#gohome">Go to your house</a></li> <li><a href="#buildingmode">Go to your house (Building mode)</a></li> <li><a href="#friendshouse">Go to a friends house</a></li> </ul> </li></ul><p class="undersubheader12pt"><a id="intro"></a>Introduction</p><p class="justbold">NOTE: For starting the skill, at least 100k is advised. If you want to do some serious leveling, you'll need more than 1m! This is a very expensive skill!</p><p>Construction is the skill used in making your own house.</p>...</div> is there a way with css to make this into a horizonal button navigation with sub menus with out editing this code above at all? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2010 Share Posted October 7, 2010 to work for all browsers except IE6 Yes!to work for all browsers including IE6 No. <ul id="menu_id"> is required <!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" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0; padding:0;}body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:10px;}p{margin:1em 0;}p.undersubheader12pt{ clear:both;}h1, h2, h3, h4, h5, h6{margin:0.9em 0;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}ul, li {list-style-image:none;list-style-position:outside;list-style-type:none;}ul {background-color:#99CC33;list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;width:964px;height:25px;}ul li a {display:block;float:left;height:25px;line-height: 25px;/*text-indent:-9999px; uncomment to hide text*/padding:0 20px;text-decoration:none; color: blue; }/*xxxxxxxx submenu creation xxxxxxxxxxxxxxx*/ul li{position:relative; float:left;}ul li ul {position:absolute; top: 25px; background-color:#009900; padding:0; width:230px; left:-999999em; border:1px solid blue; height:auto; border-bottom-width:0;}ul li:hover, ul li.sfhover, ul li ul{z-index:99;} /*prevents overlap from neibouring images and borders*/ul ul li { height:25px;background-color:#009900; border-bottom:1px solid blue; width:100%}ul ul li a {display:block; background-image:none; width:100%; height:25px; text-indent:10px; text-decoration: none; line-height:25px; padding:0;color: #fff;}/*xxxxxxxxxxxxx set hover xxxxxxxxxxxxx*/ul li:hover ul, ul li.sfhover ul {left:0;}ul ul li a:hover {background-color:#99FF66;}</style><!--[if lt IE 7]><script type="text/javascript">var sfHover;sfHover = function() { if (document.getElementById("menu_id")) { var sfEls = document.getElementById("menu_id").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } }}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script><![endif]--></head><body><div class="guidecontent"><ul id="menu_id"> <li><a href="#intro">Introduction</a> <ul> <li><a href="#fui">Frequently Used Items</a></li> <li><a href="#rooms">More rooms</a></li> </ul> </li> <li><a href="#gettingthere">Getting to your house</a> <ul> <li><a href="#gohome">Go to your house</a></li> <li><a href="#buildingmode">Go to your house (Building mode)</a></li> <li><a href="#friendshouse">Go to a friends house</a></li> </ul> </li></ul><p class="undersubheader12pt"><a id="intro"></a>Introduction</p><p class="justbold">NOTE: For starting the skill, at least 100k is advised. If you want to do some serious leveling, you'll need more than 1m! This is a very expensive skill!</p><p>Construction is the skill used in making your own house.</p>...</div></body></html> Link to comment Share on other sites More sharing options...
dzhax Posted October 7, 2010 Author Share Posted October 7, 2010 that kinda works. the only thing that dosent if there is a sub menu of a sub menu. they both show at the same time. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2010 Share Posted October 7, 2010 the css is for one submenu menu only, as you supplied without editing as requested. Link to comment Share on other sites More sharing options...
dzhax Posted October 7, 2010 Author Share Posted October 7, 2010 oh my bad i must not of put all the lists in so basically copy the sub menu and it should work for a second? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2010 Share Posted October 7, 2010 <!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" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{margin:0; padding:0;}body {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; margin:10px;}p{margin:1em 0;}p.undersubheader12pt{ clear:both;}h1, h2, h3, h4, h5, h6{margin:0.9em 0;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}ul {background-color:#99CC33;margin:0;padding:0;width:964px;height:25px;}ul, li {list-style-image:none;list-style-position:outside;list-style-type:none;}/*top level */ul li a {display:block;float:left;height:25px;line-height: 25px;/*text-indent:-9999px; uncomment to hide text*/padding:0 20px;text-decoration:none; color: blue; }/*all levels*/ul li{position:relative; float:left;}/*all sublevels*/ul ul{position:absolute; top: 25px; background-color:#009900; padding:0; width:230px; border:1px solid blue; height:auto; border-bottom-width:0;}ul ul ul{margin-left: 230px; top:-1px;} /*reset positon for all sublevels below sublevel 1*/ul ul li { height:25px; border-bottom:1px solid blue; width:100%; z-index:5;}ul ul li a {display:block;background-color:#009900; width:100%; height:25px; text-indent:10px; text-decoration: none; line-height:25px; padding:0;color: #fff; float:none;} /*float none required for IE6*//*for every new sublevel add preffix ul (ul li:hover li ul = sublevel 1, ul ul li.hover li ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacment of ':hover' with '.sfhover' instead )*/ul ul,ul li:hover li ul, /*sublevel 1*/ul li.sfhover li ul,ul ul li:hover li ul, /*sublevel 2*/ul ul li.sfhover li ul {left:-999999em;}/*xxxxxxxxxxxxx set hover xxxxxxxxxxxxx*/ul li:hover, ul li.sfhover, ul li ul{z-index:99;} /*prevents overlap from neighbouring images and borders*/ul li:hover, ul li.sfhover, ul ul li a:hover, ul ul li:hover, ul ul li.sfhover {background-color:#99FF66;}/*for every new sublevel add prefix ul (ul li:hover ul = sublevel 1, ul ul li:hover ul= sublevel 2 and so on. the .sfhover is for ie6 which should be identical to prev example but with replacment of ':hover' with '.sfhover' instead, THESE MUST BE DONE SEPARATE as below and not grouped together )*//*sublevel 1*/ul li:hover ul, ul li.sfhover ul{left:0px;}/*sublevel 2*/ul ul li:hover ul, ul ul li.sfhover ul {left:0;}/*sublevel 3*/ul ul ul li:hover ul, ul ul ul li.sfhover ul {left:0;}</style><!--[if lt IE 7]><script type="text/javascript">var sfHover;sfHover = function() { if (document.getElementById("menu_id")) { var sfEls = document.getElementById("menu_id").getElementsByTagName("li"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } }}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script><![endif]--></head><body><div class="guidecontent"><ul id="menu_id"> <li><a href="#intro">Introduction</a> <ul> <li><a href="#fui">Frequently Used Items</a></li> <li><a href="#gettingthere">Getting to your house1</a> <ul> <li><a href="#gohome">xxxxxxxxxxxxxx</a></li> <li><a href="#buildingmode">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</a></li> <li><a href="#gettingthere">Getting to your house2</a></li> <li><a href="#friendshouse">xxxxxxxxxxxxxxxxxxx</a></li> </ul> </li> <li><a href="#rooms">More rooms</a></li> </ul> </li> <li><a href="#gettingthere">Getting to your house</a> <ul> <li><a href="#gohome">Go to your house</a></li> <li><a href="#buildingmode">Go to your house (Building mode)</a></li> <li><a href="#friendshouse">Go to a friends house</a></li> </ul> </li></ul><p class="undersubheader12pt"><a id="intro"></a>Introduction</p><p class="justbold">NOTE: For starting the skill, at least 100k is advised. If you want to do some serious leveling, you'll need more than 1m! This is a very expensive skill!</p><p>Construction is the skill used in making your own house.</p>...</div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.