Foros del Web - Ver Mensaje Individual

Mikmoro · #3 (**permalink**) 08/10/2008, 03:29

Bueno, creo que es sencillo: primero he añadido ese segundo nivel que dices:

Cita:

<html>
<head>
<link rel="stylesheet" type="text/css" href="sdmenu.css" />
<script type="text/javascript" src="sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>

<body>

<div id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<div>
<span class="segundo">Segundo nivel</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">111</a>
<a href="http://tools.dynamicdrive.com/favicon/">222</a>
<a href="http://www.dynamicdrive.com/emailriddler/">333</a>
</div>
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
<a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
</div>
</body>
</html>

Y después he modificado un selector de la css y he añadido otro, sólo para que se parezca a los otros enlaces. Verás que sale uno que pone "Segundo nivel", que he dejado en negrita para que destaque sobre el resto y se vea que tiene otro subnivel dentro de él:

Cita:

div.sdmenu div a, div.sdmenu div span.segundo {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div span.segundo {text-decoration: underline;}

Pruébalo, que yo creo que funciona como quieres.