Fusionar ids

[frank_harbey12]

Buen dia,

tengo los siguientes codigos.

#mende ul li ul li a:hover {margin:0px}
#meniz ul li ul li a:hover {margin:0px}

como hago para fusionarlos ya que he intentado con:

#mende #meniz ul li ul li a:hover {margin:0px}

y aun asi no funciona, la forma como me funciona es

#mende ul li ul li a:hover #meniz ul li ul li a:hover {margin:0px}.

como redusco ese codigo? gracias por la ayuda

[iwexcoder]

me parece que es mil veces mas fácil poner un class en el anchor y listo...

en el HTML:

<a href="" class="ejemplo">Link</a>

en el CSS:

a.ejemplo:hover {margin:0px;}


En principio esta seria la forma mas fácil, si no te funciona, tendrías que ver como estructurado los layouts del HTML para ajustar los CSS

[kseso?]

Son cosas diferentes, iwexcoder.
frank_harbey12 está haciendo uso de una particularidad de los selectores de css: la especificidad.
Y son cosas muy distintas | #id tag | en el css que | tag="class"/tag="id" | en el html

#mende ul li ul li a:hover, #meniz ul li ul li a:hover {/*propiedades comunes*/}

para definir reglas comunes a varios selectores de forma conjunta, se escriben todos los selectores separados por una coma (,)

[BloodShadow]

Iniciado por kseso?

Son cosas diferentes, iwexcoder.
frank_harbey12 está haciendo uso de una particularidad de los selectores de css: la especificidad.
Y son cosas muy distintas | #id tag | en el css que | tag="class"/tag="id" | en el html

para definir reglas comunes a varios selectores de forma conjunta, se escriben todos los selectores separados por una coma (,)

estas en lo correcto kseso? pero segun entendi el quiere reducir ese código...

frank_harbey12 intenta así, no es "tan" necesario que sigas tooooda la jerarquía:

Código CSS:

#mende a:hover,
#meniz a:hover {/*propiedades comunes*/}
 

[frank_harbey12]

muchas gracias por las respuestas, Bloodshadow lamentablemente no puedo hacer eso ya que afectaria a los demas.

Este codigo que me da kseso?

#mende ul li ul li a:hover, #meniz ul li ul li a:hover {/*propiedades comunes*/}

Esta bien, pero no habra una forma mas resumida? osea quitarle una linea de ul li ul li a:hover?

Agradezco su colaboración, por el momento utilizare la linea de kseso?

[BloodShadow]

Si tienes razon... pense q solo tenias la jerarquia div -> ul -> li -> a. dentro del div ese... pero si tenes mas elementos no podes hacerlo de otra forma :S

[kseso?]

Pues como desconocemos el etiquetado contenido en cada #id y tampoco se ha mostrado muy preciso en cuanto a qué otros elementos no quiere afectar, lo lógico es que haga las reducciones oportunas en cada selector hasta hallar el punto óptimo de brevedad y especificidad:

Código CSS:

#mende a:hover {}
#mende ul a:hover {}
#mende ul ul a:hover {}
#mende ul ul li a:hover {}
 

y lo mismo para el otro selector.

Otra vía es que asigne una clase a la lista (ul) de segundo nivel (para el ejemplo: ul.miclase):

Código CSS:

ul.miclase a:hover {}
 

Pero aquí ya entraría en juego el peso, especificidad, prevalencia o como quiera llamarlo respecto a otros selectores declarados.

[frank_harbey12]

Gracias por la aclaracion mira pongo mi codigo css de la lista y d elos menus:

Codigo General:
ul{margin:0px;list-style-type:none;padding:0}
ul li{position:relative;height:13%;width:100%}
ul li a{display:block;overflow:hidden}
ul li:hover > ul{display:block}
ul li img{width:95%;height:95%}
ul li ul{box-shadow: 0px 0px 5px #000 inset, 0px 0px 25px #000;position:absolute;width:250px;height: auto;top:0px;border-radius:5px;display:none;opacity:1;background:#fffb ff}
ul li ul li:hover{width:99%;border-radius:5px;background:#999;color:#000;border:solid 1px gray}
#mende ul li ul li a:hover, #meniz ul li ul li a:hover{margin:0px}

Codigo Menu izquierdo:
#meniz {float:left;margin-top:2%;margin-left:1%;height:92%;width:9%}
#meniz ul li a:hover{margin-right:-10px;margin-left:10px}
#meniz ul li ul {margin-left: 100% }

Codigo Menu derecho:
#mende {float:right;width:9%;height:92%;z-index:20;margin-top:2%}
#mende ul li a:hover{margin-right:10px;margin-left:-10px}
#mende ul li ul{margin-left:-255px;text-align:right}

Codigo Menu inferior:
#meninf{position:absolute;top:90%;left:45%;width:1 0%;height:8%;z-index:19}
#meninf ul li{height:100%}
#meninf ul li ul {margin-left:-50px;top:-50px;width:200px}

Agradesco su colaboracion.

[BloodShadow]

necesitamos el html donde quieres aplicar las jerarquías para ver si hay forma de optimizar el css... el css en si no lo podemos simplificar si no vemos el html ;)

[frank_harbey12]

Vale mira el codigo, solo copio el del menu izquierdo ya que es algo largo. y poreste medio no me deja mostrarlo todo, pero si deseas y no es molestia la pagina es esta http://frontwebos.web.officelive.com para que puedas ver todo el codigo html. de nuevo agradesco su colaboracion

<div id="meniz" >
<ul>
<!--OFFICE-->
<li><a title="Ofimatica"><img src="images/mi/officeonline.png" alt="Ofimatica" /></a>
<ul>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=docx" title="Word" target="_blank" ><img src="http://officeimg.vo.msecnd.net/en-us/files/940/032/ZA101870038.jpg" class="subme" alt="Word" />Microsoft Word</a></li>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=xlsx" title="Excel" target="_blank" ><img src = "http://officeimg.vo.msecnd.net/en-us/files/352/648/ZA101870031.jpg" class="subme" alt="Excel" />Microsoft Excel</a></li>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=pptx" title ="Power point" target="_blank" ><img src = "http://officeimg.vo.msecnd.net/en-us/files/123/286/ZA101870037.jpg" class="subme" alt="powerPNT" />Microsoft PowerPoint</a></li>
<li><a href="https://office.live.com/newlivedocument.aspx?xt=one" title="OneNote" target="_blank"><img src = "http://officeimg.vo.msecnd.net/en-us/files/354/919/ZA101870032.jpg" class="subme" alt="OneNote" />Microsoft OneNote</a></li>
<li><a href="https://docs.google.com/" title="Google Docs" target="_blank"><img src = "http://docs.google.com/favicon.ico" class="subme" alt="Google Docs" />Google Docs</a></li>
</ul>
</li>
<!--Accesorios-->
<li><a title="Accesorios"><img src="images/mi/accesorios.png" alt="Accesorios" /></a>
<ul>
<li><a href="http://es.web2.0calc.com/" title="Calculadora" target="_blank" ><img src = "http://es.web2.0calc.com/favicon.ico" class="subme" alt="calc" />Calculadora</a></li>
<li><a href="http://www.online-convert.com/" title="Convierte Videos, Imagenes, sonidos a otros formatos" target="_blank"><img src="http://www.online-convert.com/favicon.ico" title="Convertidor" alt="Convertidor" class="subme" />Convertidor</a></li>
<li><a href="https://www.autocadws.com/" title="Ve tus documentos de Autocad sin necesidad de tenerlo instalado" target="_blank"><img src="https://www.autocadws.com/favicon.ico" title="AutocadWS" alt="AutoCad" class="subme" />AutoCAD</a></li>
<li><a href="https://wa103.teamviewer.com/login.aspx" title="Conectate remotamente" target="_blank"><img src="http://www.teamviewer.com/favicon.ico" title="TeamViewer" alt="TeamViewer" class="subme" />TeamViewer</a></li>
<li><a href="http://www.wikispaces.com" title="Crea tu Wiki para un grupo de trabajo" target="_blank"><img src="http://www.wikispaces.com/favicon.ico" title="WikiSpaces" alt="WikiSpaces" class="subme" />WikiSpaces</a></li>
<li><a href="http://www.songsterr.com/" title="El Guitar Pro on-line" target="_blank"><img src = "http://www.songsterr.com/favicon.ico" class="subme" alt="Songsterr" />Songsterr</a></li>
</ul>
</li>
<!--MAILS-->
<li><a title="e-Mail" ><img src="images/mi/mail.png" alt="e-Mails" /></a>
<ul>
<li><a href="http://mail.yahoo.com" title="Yahoo! Mail" target="_blank"><img src="https://login.yahoo.com/favicon.ico" class="subme" alt="Yahoo!" />Yahoo! Mail</a></li>
<li><a href="http://hotmail.com" title="Hotmail" target="_blank"><img src="http://mail.live.com/favicon.ico" class="subme" alt="Hotmail" />Hotmail</a></li>
<li><a href="http://gmail.com" title="Gmail" target="_blank"><img src="http://mail.google.com/favicon.ico" class="subme" alt="Gmail" />Gmail</a></li>
</ul>
</li>
<!--MAPAS-->
<li><a title="Mapas" ><img src="images/mi/map.png" alt="Mapas" /></a>
<ul>
<li><a href="http://www.bing.com/maps/" title="Bing Maps" target="_blank"><img src = "http://www.bing.com/maps/favicon.ico" class="subme" alt="BM" />Bing Maps</a></li>
<li><a href="http://maps.google.com/" title="Google Maps" target="_blank"><img src = "http://www.google.com/favicon.ico" class="subme" alt="GM" />Google Maps</a></li>
<li><a href="http://www.openstreetmap.org" title="OpenStreetMaps" target="_blank"><img src="http://www.openstreetmap.org/favicon.ico" class="subme" alt="OSV" />Open Street Maps</a></li>
<li><a href="http://maps.yahoo.com/" title="Yahoo! Maps" target="_blank"><img src = "https://login.yahoo.com/favicon.ico" class="subme" alt="Y!M" />Yahoo! Maps</a></li>
</ul>
</li>
<!--CALENDARIOS-->
<li><a title="Calendarios" ><img src="images/mi/calendarios.png" alt="Calendarios" /></a>
<ul>
<li><a href="http://www.google.com/calendar/" title="Calendario Google" target="_blank"><img src = "http://www.google.com/favicon.ico" class="subme" alt="GC" />Google Calendar</a></li>
<li><a href="http://calendar.live.com/" title="Calendario Windows Live" target="_blank"><img src = "https://login.live.com/favicon.ico" class="subme" alt="WLC" />Windows Live Calendar</a></li>
<li><a href="http://calendar.yahoo.com" title="Calendario Yahoo!" target="_blank"><img src = "https://login.yahoo.com/favicon.ico" class="subme" alt="yc" />Yahoo! Calendar</a></li>
</ul>
</li>
<!--ESTUDIO-->
<li><a title="Estudio" ><img src="images/mi/books.png" alt="Estudio" /></a>
<ul>
<li><a href="http://es.wikipedia.org" title="Wikipedia" target="_blank"><img src = "http://en.wikipedia.org/favicon.ico" class="subme" alt="W" />Wikipedia</a></li>
<li><a href="http://rincondelvago.com" title="Rincon del Vago" target="_blank"><img src = "http://www.rincondelvago.com/favicon.ico" class="subme" alt="RDV" />Rincon Del Vago</a></li>
<li><a href="http://www.senavirtual.edu.co/" title="Sena Virtual" target="_blank"><img src = "http://oficina.sena.edu.co/portal_2010/_pictures/favicon.ico" class="subme" alt="SV" />Sena Virtual</a></li>
<li><a href="http://www.aula365.com/default.aspx" title="Aula 365" target="_blank"><img src = "http://argentina.aula365.com/images/abj.ico" class="subme" alt="A365" />Aula 365</a></li>
<li><a href="http://www.monografias.com/" title="Monografias" target="_blank"><img src= "http://www.monografias.com/favicon.ico" class="subme" alt="Monografias" />Monografias</a></li>
<li><a href="http://www.mslatam.com/latam/technet/mva2/Home.aspx" title="Microsoft Virtual Academy" target="_blank"><img src = "http://www.microsoft.com/favicon.ico" class="subme" alt="MVA" />Microsoft Virtual Academy</a></li>
</ul>
</li>
<!--Almacenamiento Online-->
<li><a title="Almacenamiento Online"><img src="images/mi/dd.png" alt="Almacenamiento Online" /></a>
<ul>
<li><a href="http://skydrive.live.com" title="SkyDrive" target="_blank"><img src = "http://skydrive.live.com/favicon.ico" class="subme" alt="SD" />SkyDrive</a></li>
<li><a href="http://dropbox.com" title="DropBox" target="_blank"><img src = "https://www.dropbox.com/static/15556/images/favicon.ico" class="subme" alt="DB" />DropBox</a></li>
<li><a href="http://gigasize.com" title="Gigasize" target="_blank"><img src = "http://www.gigasize.com/favicon.ico" class="subme" alt="GS" />Gigasize</a></li>
<li><a href="http://megaupload.com" title="Megaupload" target="_blank"><img src = "http://wwwstatic.megaupload.com/images/icon.ico" class="subme" alt="MU" />Megaupload</a></li>
<li><a href="http://mediafire.com" title="Mediafire" target="_blank"><img src = "http://www.mediafire.com/favicon.ico" class="subme" alt="MF" />Mediafire</a></li>
<li><a href="http://rapidshare.com" title="Rapidshare" target="_blank"><img src = "http://images3.rapidshare.com/img/favicon.ico" class="subme" alt="RS" />Rapidshare</a></li>
</ul>
</li>
<!--TRADUCTORES-->
<li><a title="Traductores"><img src="images/mi/traductor.png" alt="Traductores" /></a>
<ul>
<li><a href="http://translate.google.com/" title="Google Translator" target="_blank"><img src = "http://translate.google.com/favicon.ico" class="subme" alt="GT" />Google Translator</a></li>
<li><a href="http://www.microsofttranslator.com/" title="Bing Transletor" target="_blank"><img src = "http://www.microsofttranslator.com/icon.ico" class="subme" alt="BT" />Bing Translator</a></li>
<li><a href="http://traductor.babylon.com/" title="Babylon" target="_blank"><img src = "http://www.babylon.com/favicon.ico" class="subme" alt="B" />Babylon</a></li>
</ul>
</li>
</ul>
</div>

[BloodShadow]

puts.... el firewall de donde trabajo no me deja al llegar a mi casa reviso si es q no te han contestado antes

[frank_harbey12]

ok men agradesco tu colaboracion