.menu { text-align: center; margin-top: 50px; } .menu-list { list-style: none; display: inline-block; padding: 0; } .menu-list li { display: inline-block; } .menu-list li a { display: block; padding: 10px 20px; background-color: #6bfa96; color: white; text-decoration: none; border-radius: 5px; } .menu-list li:hover > a { background-color: #45ce72; } .sub-menu { display: none; position: absolute; background-color: #6bfa96; min-width: 150px; z-index: 1; padding: 0; border-radius: 5px; } .sub-menu li { display: block; } .sub-menu li a { padding: 10px 20px; color: white; text-decoration: none; } .menu-list li:hover .sub-menu { display: block; } .sub-menu li:hover > a { background-color: #45ce72; } /* inicio de visualisacion web general */ /* Establecer el zoom al 85% y aplicar margen hacia la derecha */ body { zoom: 99%; -moz-transform: scale(0.99); -webkit-transform: scale(0.99); transform: scale(0.99); transform-origin: center top; /* Punto de origen centrado en la parte superior */ margin-left: 20px; /* Mover toda la página hacia la derecha */ margin-bottom: 1; /* Elimina el margen inferior */ height: 95vh; /* Establece la altura del body al 100% del viewport */ } /* Asegurar que las barras de navegación ocupen todo el ancho */ .barras-navegacion { width: 100%; } /* Estilos para dispositivos móviles */ @media (max-width: 768px) { body { max-width: 90%; /* Reducir el ancho máximo en dispositivos móviles */ } } /* fin de visualisacion web general */ .float{ position:fixed; width:60px; height:60px; bottom:40px; right:40px; background-color:#25d366; color:#FFF; border-radius:50px; text-align:center; font-size:30px; box-shadow: 2px 2px 3px #999; z-index:100; } .float:hover { text-decoration: none; color: #25d366; background-color:#fff; } .my-float{ margin-top:16px; }