Salve a tutti,
ho due navlist più o meno "decenti" e vorrei crearne da qui una utile, e volevo chiedere il vostro aiuto non essendo tanto pratico.
La prima navlist è la seguente:
La seconda navlist è la seguente:codice:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>Suckerfish Dropdowns - Three Level Bones</title> <style type="text/css"> body { font-family: arial, helvetica, serif; } #nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1; } #nav li a { position: relative; width: 6em; display: block; margin: 0; padding: 1px 0.4em; border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc; background-color: #eee; color: #666; font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif; text-align: center; text-decoration: none; } #nav li { /* all list items */ float: left; margin: 0 0 0 2px; border-width: 1px 1px 0 1px; border-style: solid; border-color: #aaa #555 #f63 #999; list-style-type: none; } #nav li ul { /* second-level lists */ position: absolute; /* Bordo arancione*************************************************************/ background: orange; width: 10em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ } #nav li ul ul { /* third-and-above-level lists */ margin: -1em 0 0 10em; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */ left: auto; } #content { clear: left; color: #ccc; } * html > body #nav, * html > body #navlist ul#subnavlist { width: 600px; /* IE5/Mac fixed width fix */ } </style> <script type="text/javascript"><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").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> </head> <body> <h1>PERCIFORMES! (3)</h1> Welcome to the world of Perciformes - perch-like fish including the world famous Suckerfish</p> <ul id="nav"> [*]Primo <ul> [*]Uno [*]Due [*]tre [*]quattro [*]Cinque [*]sei [/list] [*]Secondo <ul> [*]Uno [*]Due [*]tre [*]quattro [*]Cinque [*]sei [/list] [*]Terzo <ul> [*]Uno [*]Due [*]tre [*]quattro [*]Cinque [*]sei [/list] [/list] </body> </html>
Vorrei poter innestare i tastini superiori della prima navlist, quelli tutti grigi e con una forma "guardabile", nella seconda.codice:<!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" xml:lang="en"> <head> <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/variable_dl.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the assocaited (x)html may be modified in any way to fit your requirements. =================================================================== */ #menu {list-style-type:none; margin:40px 0 200px 15px; /* settings for this demo olnly */ padding:0;} #menu li {display:block; float:left; position:relative; z-index:100; margin-right:1px;} #menu li span {display:block; z-index:100; background:#b2ab9b; padding: 5px 10px;font-size:1.1em;} #menu li a, #menu li a:visited {display:block; padding:0;} #menu dl {position:absolute; top:0; left:0; margin: 0; padding: 0; background: url(transparency.gif);} #menu dt {background: #b2ab9b; margin:0; font-size: 1.1em; border-bottom:1px solid #fff; float:left; border-right:1px solid #fff;} #menu dd {display:none; background: transparent; border-bottom:1px solid #cce; clear:left; margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;} #menu dt a, #menu dt a:visited {display:block; color:#ff8; padding: 5px 10px; text-decoration:none;} #menu dd a, #menu dd a:visited {background:#b2ab9b; color:#ff8; text-decoration:none; display:block; padding: 5px 10px;} #menu li a:hover {border:0;} #menu li:hover dd, #menu li a:hover dd {display:block;} #menu li:hover dl, #menu li a:hover dl {border-bottom:15px solid #e2dfa8;} #menu li:hover dt a, #menu li a:hover dt a, #menu dd a:hover {background: #e2dfa8; color:#534;} </style> </head> <body id="www-cssplay-co-uk"> <div id="wrapper"> <div id="showcase"> <div id="info"> <h2>A variable width drop-down definition list</h2> <h3>18th December 2006</h3> <ul id="menu"> [*]<span>DEMOS</span> <dl> <dt>DEMOS</dt> <dd>zerodollars</dd> <dd>wrappingtext</dd> <dd>styledform</dd> <dd>activefocus</dd> <dd>shadowboxing</dd> <dd>imagemap</dd> <dd>funwithbackgrounds</dd> <dd>fadescrolling</dd> <dd>emsizedimages</dd> </dl> [*]<span>MENUITEMS</span> <dl> <dt>MENUITEMS</dt> <dd>spiesmenu</dd> <dd>verticalmenu</dd> <dd>enlarginglist</dd> <dd>linkimages</dd> <dd>nonrectangularlinks</dd> <dd>jigsawlinks</dd> <dd>circularlinks</dd> </dl> [*]<span>VARIOUSLAYOUTS</span> <dl> <dt>VARIOUSLAYOUTS</dt> <dd>Fixed1</dd> <dd>Fixed2</dd> <dd>Fixed3</dd> <dd>Fixed4</dd> <dd>minimumwidthforInternetExplorer</dd> </dl> [*]<span>MOZILLAANDOTHERBROWSERS</span> <dl> <dt>MOZILLAANDOTHERBROWSERS</dt> <dd>dropdownmenu</dd> <dd>cascadingmenu</dd> <dd>content:</dd> <dd>mozziebox</dd> <dd>rainbowbox</dd> <dd>aborderartsnookercue</dd> <dd>targetpractise</dd> </dl> [/list] </div> </div> </div> </body> </html>
Poi vorrei a parte i pulsanti grigi tutto il resto dello stesso arancione di questo sito:
http://www.ridec.it/test1/
Ed il testo lo vorrei Nero sui bottoni grigi e bianco sul menù arancione.
Scusate se chiedo aiuto qui, ma ci sto un pò impazzendo
Vi ringrazio in anticipo,
Neptune.
Rispondi quotando
