Menú desplegable ancho total

Developer
Oloman
Size
3,743 Kb
Views
52,624
  1. Menú desplegable ancho total Previews
  2. Menú desplegable ancho total HTML Codes
  3. Menú desplegable ancho total CSS Codes

How do I make an menú desplegable ancho total?

Menú que al pasar el puntero por encima de un elemento que contenga una segunda lista anidada, muestra esta última en horizontal ocupando todo el ancho disponible. What is a menú desplegable ancho total? How do you make a menú desplegable ancho total? This script and codes were developed by Oloman on 22 August 2022, Monday.

Menú desplegable ancho total Previews
IQ Test

Menú desplegable ancho total - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menú desplegable ancho total</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { margin: 0; padding: 0; background: #ccc; text-align: center; font-family: "Yanone Kaffeesatz", sans-serif; font-size: 20px; line-height: 22px;
}
.cabecera { width: 100%; height: 0; padding-bottom: 25%; overflow: hidden; position: relative; border-bottom: 4px double #666;
}
header img { position: absolute; top: -60%; left: 0; width: 100%; height: auto; margin: 0; padding: 0;
}
nav { position: relative; width: 100%; margin: 0 auto;
}
ul.fullnav, ul.fullnav ul { list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;
}
ul.fullnav { border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;
}
ul.fullnav li { display: inline-block; margin: 0; padding: 0; font-size: 22px; line-height: 60px;
}
ul.fullnav li a { display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;
}
ul.fullnav li ul { position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;
}
ul.fullnav ul a { color: white;
}
ul.fullnav li:hover a { background: #999;
}
ul.fullnav li:hover ul { height: auto;
}
ul.fullnav li:hover ul li a { background: transparent;
}
ul.fullnav li:hover ul li a:hover { text-decoration: none; color: #333;
}
section { padding: 40px; text-align: left;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <div class="cabecera"> <img src="http://1.bp.blogspot.com/-XL4Br3tCL3g/U7PfReX_VcI/AAAAAAAAQpI/BmljEZJkH44/s1200/esperando.gif"/> </div> <h1>Full drop menu</h1> <nav> <ul class="fullnav"> <li><a href="#">Inicio</a></li> <li><a href="#">Países</a> <ul> <li><a href="#">Argentina</a></li> <li><a href="#">Chile</a></li> <li><a href="#">España</a></li> <li><a href="#">México</a></li> <li><a href="#">Perú</a></li> <li><a href="#">Venezuela</a></li> </ul> </li> <li><a href="#">Rutas</a> <ul> <li><a href="#">Norte</a></li> <li><a href="#">Sudeste</a></li> <li><a href="#">Centro-Oeste</a></li> <li><a href="#">Camino 42</a></li> </ul> </li> <li><a href="#">Galería</a> <ul> <li><a href="#">En verde</a></li> <li><a href="#">Ocres</a></li> <li><a href="#">Amigos</a></li> <li><a href="#">Miscelánea</a></li> </ul> </li> <li><a href="#">Los protas</a> <ul> <li><a href="#">Antonio Ruiz</a></li> <li><a href="#">Benjamín Sanz</a></li> <li><a href="#">Carlos Pardo</a></li> <li><a href="#">John Smith</a></li> <li><a href="#">Sam Gordon</a></li> <li><a href="#">Peter Ustinov</a></li> </ul> </li> </ul> </nav>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet odio pharetra, tincidunt arcu in, luctus est. Maecenas varius lectus nec enim commodo, id hendrerit tellus congue. Quisque sagittis tristique nibh vel ornare. Donec sit amet feugiat risus, vel interdum sem. Morbi ut sem fringilla, congue ante quis, elementum leo. Vestibulum eu augue est. Quisque mattis gravida lectus a rutrum. Etiam et nisi in nibh dictum vehicula a eget est. Praesent malesuada magna in mauris fermentum, id convallis augue auctor. Vestibulum a dapibus leo. Nam quis iaculis enim, eu varius erat. Aenean non tortor faucibus, tempor nunc nec, dignissim nibh. Integer lorem lacus, lobortis dapibus pretium in, sodales et nibh. Phasellus vitae aliquet leo. Aenean lectus quam, pretium dictum lectus id, volutpat ullamcorper risus.</p>
<p>
Donec id commodo magna. Nunc sed mauris felis. Vestibulum malesuada purus at nibh pretium, sed sollicitudin dolor feugiat. Nullam luctus lectus ut dignissim convallis. Cras quis elementum metus. Integer finibus rutrum ultrices. Curabitur nisl nulla, mollis id feugiat in, varius sed nisl. Vivamus id arcu purus. Vivamus hendrerit sed neque ut maximus. Sed luctus mattis dolor, et venenatis felis lobortis vel. Suspendisse in ligula vel leo consectetur facilisis nec sed leo. Sed quam felis, ornare nec augue sed, pellentesque blandit sem.</p>
</section>
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet type="text/css"/> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Menú desplegable ancho total - Script Codes CSS Codes

body, html { margin: 0; padding: 0; background: #ccc; text-align: center; font-family: "Yanone Kaffeesatz", sans-serif; font-size: 20px; line-height: 22px;
}
.cabecera { width: 100%; height: 0; padding-bottom: 25%; overflow: hidden; position: relative; border-bottom: 4px double #666;
}
header img { position: absolute; top: -60%; left: 0; width: 100%; height: auto; margin: 0; padding: 0;
}
nav { position: relative; width: 100%; margin: 0 auto;
}
ul.fullnav, ul.fullnav ul { list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;
}
ul.fullnav { border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;
}
ul.fullnav li { display: inline-block; margin: 0; padding: 0; font-size: 22px; line-height: 60px;
}
ul.fullnav li a { display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;
}
ul.fullnav li ul { position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;
}
ul.fullnav ul a { color: white;
}
ul.fullnav li:hover a { background: #999;
}
ul.fullnav li:hover ul { height: auto;
}
ul.fullnav li:hover ul li a { background: transparent;
}
ul.fullnav li:hover ul li a:hover { text-decoration: none; color: #333;
}
section { padding: 40px; text-align: left;
}
Menú desplegable ancho total - Script Codes
Menú desplegable ancho total - Script Codes
Home Page Home
Developer Oloman
Username oloman
Uploaded August 22, 2022
Rating 3
Size 3,743 Kb
Views 52,624
Do you need developer help for Menú desplegable ancho total?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Oloman (oloman) Script Codes
Name
Simplest RWD jQuery slider
CSS - Colorful fan menu
CSS - Circular drop menu
Before-After TwentyTwenty jQuery plugin
Book 3D
Responsive video loader
CSS Drop cards Social buttons
Scotch tape css effect
CSS Responsive accordion social buttons
CSS Spoiler
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!