Buen Dia, estoy realizando un proyecto donde se requiere un menu desplegable hacia arriba, eh tratado con este
http://www.forosdelweb.com/f53/menu-...00-css-595007/ pero existen un problema manejo backgrounds transparentes y este me duplica todo asi que caso perdido,
existe algo que pueda añádorñe a este css para que se liste de modo hacia arriba?
http://taklab.com/clientes/llama/menu.html
el codigo es muy similar al otro que me duplica backgrounds pero no encuentro por donde lo lista para arriba
css
Código CSS:
Ver original.ddsmoothmenu{
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
float:right;
text-transform: uppercase;
/*line-height:75px; */
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
margin: 0px 20px 0 20px;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
/*background: #414141; /*background of menu items (default state)*/
color: white;
/*padding: 8px 10px;
border-right: 1px solid #778; */
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block; ;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: transparent;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: transparent; /*background of menu items during onmouseover (hover state)*/
color: #00E1BF;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
background-image: url('../img/index_menu_background.png');
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}
y este es mi html
Código HTML:
Ver original<!DOCTYPE html>
<!-- favicon -->
<link rel="shortcut icon" href="favicon.ico" /> <!-- metatags -->
<meta name="viewport" content="width=device-width; initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; " /> <link rel="stylesheet" media="screen" href="css/estilos.css" />
<link rel="stylesheet" type="text/css" href="css/ddsmoothmenu.css" />
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/ddsmoothmenu.js"> /***********************************************
*Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
*This notice MUST stay intact for legal use
*Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
<script type="text/javascript">
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
<iframe name="I1" marginwidth="0" marginheight="0" scrolling="no" border="0" frameborder="0" src="index_default.html"> El explorador no admite los marcos flotantes o no está configurado actualmente para mostrarlos.
<a target="I1" href="index_default.html"><img src="img/logo_llama.png"/></a>
<div id="smoothmenu1" class="ddsmoothmenu"> <li><a target="I1" href="index_story.html">Story
</a></li> <li><a href="">practice
</a></li> <li><a href="#">theory + publications
</a> <li><a href="#">Sub Item 2.1
</a></li> <li><a href="#">Folder 2.1
</a> <li><a href="#">Sub Item 2.1.1
</a></li> <li><a href="#">Sub Item 2.1.2
</a></li> <li><a href="#">Folder 3.1.1
</a> <li><a href="#">Sub Item 3.1.1.1
</a></li> <li><a href="#">Sub Item 3.1.1.2
</a></li> <li><a href="#">Sub Item 3.1.1.3
</a></li> <li><a href="#">Sub Item 3.1.1.4
</a></li> <li><a href="#">Sub Item 3.1.1.5
</a></li> <li><a href="#">Sub Item 2.1.4
</a></li> <li><a href="">recognition
</a></li>
porfavor pueden ayudarme
