All geek questions in one place

CSS HTML Drop-down navigation items appear in the line, not at the bottom

Below is the JSFiddle link of some code. I tried to get a smooth looking clean html / css dropdown without using a boot or other type of plugin. However, I cannot make the Creative drop-down items appear below the navigation bar, instead they appear in the line, and I tried to change other parts of the code to make it work, but I cannot seem to do this without prejudice to the rest of the navigation panels.

Please, if someone can take a look at this, when you hover “Creative”, elements of the list of children will appear under it. Preferably, not only padding and style margins.

https://jsfiddle.net/nytnfvmq/

HTML:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Udemy Project</title> <link type="text/css" href="styles.css" rel="stylesheet"> <script type="text/javascript" src="javascript.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <!--<script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>--> </head> <body> <nav> <ul> <li> <a href="">Home</a> </li> <li> <a href="">Development</a> </li> <li> <a href="">Creative</a> <ul> <li> <a href="">Film</a> </li> <li> <a href="">Design</a> </li> <li> <a href="">Music</a> </li> </ul> </li> <li> <a href="">Information</a> </li> <li> <a href="">Contact Me</a> </li> </ul> </nav> <div id="banner"> <img src="images/banner.png" alt="Banner image did not load." ;> </div> </body> </html>

CSS: * {margin: 0; filling: 0; }

 body { margin: 0; padding: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } nav { width: 100%; height: 40px; margin: 0 auto; background-color: #ffffff; box-shadow: 0px 2px 5px #6E6E6E; position: fixed; } nav ul { width: 1200px; margin: 0 auto; position: relative; list-style: none; color: #00b6ed; } nav ul li a { width: 20%; display: inline; text-align: center; float: left; padding-top: 11px; padding-bottom: 11px; color: #00b6ed; text-decoration: none; } nav ul li a:hover { background-color: #00b6ed; color: #ffffff; } nav ul li ul { display: none; position: relative; } nav ul li:hover ul { display: block; position: relative; } #banner { width: 100%; height: 400px; background-color: #00b6ed; float: left; text-align: center; } #banner img { margin: 0 auto; background-color: #00b6ed; } nav ul li ul li a { background-color: red; color: green; }
+5
source share
1 answer

You have something wrong. Do not swim or assign width to anchor tags. Instead, put list items. You also need to add position: relative to li and then add position: absolute; left: 0; top: 100%; position: absolute; left: 0; top: 100%; to the ul child. That should do it, I think.

 * { margin: 0; padding: 0; } body { margin: 0; padding: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; } nav { width: 100%; height: 40px; margin: 0 auto; background-color: #ffffff; box-shadow: 0px 2px 5px #6E6E6E; position: fixed; } nav ul { width: 1200px; margin: 0 auto; position: relative; list-style: none; color: #00b6ed; } nav ul li { width: 20%; float: left; position: relative; } nav ul li a { display: block; text-align: center; padding-top: 11px; padding-bottom: 11px; color: #00b6ed; text-decoration: none; } nav ul li a:hover { background-color: #00b6ed; color: #ffffff; } nav ul li ul { display: none; position: absolute; left: 0; top: 100%; } nav ul li:hover ul { display: block; position: relative; } #banner { width: 100%; height: 400px; background-color: #00b6ed; float: left; text-align: center; } #banner img { margin: 0 auto; background-color: #00b6ed; } nav ul li ul li { float: none; } nav ul li ul li a { background-color: red; color: green; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Udemy Project</title> <link type="text/css" href="styles.css" rel="stylesheet"> <script type="text/javascript" src="javascript.js"></script> <script type="text/javascript" src="jquery.min.js"></script> <!--<script type="text/javascript" src="jquery-ui.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script>--> </head> <body> <nav> <ul> <li> <a href="">Home</a> </li> <li> <a href="">Development</a> </li> <li> <a href="">Creative</a> <ul> <li> <a href="">Film</a> </li> <li> <a href="">Design</a> </li> <li> <a href="">Music</a> </li> </ul> </li> <li> <a href="">Information</a> </li> <li> <a href="">Contact Me</a> </li> </ul> </nav> <div id="banner"> <img src="images/banner.png" alt="Banner image did not load." ;> </div> </body> </html>
+2
source

Source: https://habr.com/ru/post/1241078/

More articles:


All Articles