smallball Posted June 26, 2022 Share Posted June 26, 2022 ive been stuck for a couple of weeks on my drop-down menu cant seem to quite get what i need. there is space above it and cant seem to get rid of it. any help greatly appreciated. the code: <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="description" content="affordable and professional web design"> <meta name="keywords" content="web design, affordable web design "> <meta name="author" content="brad traversty"> <title>offski</title> <link rel="stylesheet" type="text/css" href="homercss.css"> <script src="nav.js" defer> </script> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </head> <body> <header> <div class="container"> <IMG STYLE="position:absolute; TOP:0px; LEFT:250px;WIDTH:140px; HEIGHT:138px " SRC="scrooge4.jpg"> <h1><span class="highlight">blue</span> xxxxxxx xxxxxx</h1> <p>xxxx xxxxx xxxxxx xx?</p> </div> <div id="smb"> <a class="social-icon" href="https://www.crediful.com/top-personal-finance-blogs/" target="blank"> <ion-icon name="logo-youtube"></ion-icon> <a class="social-icon" href="https://www.cnn.com/election/2020/results/president" target="blank"> <ion-icon name="logo-twitter"></ion-icon> <a class="social-icon" href="https://www.amazon.com/" target="blank"> <ion-icon name="logo-facebook"></ion-icon> <a class="social-icon" href="https://ionic.io/ionicons/v4" target="blank"> <ion-icon name="logo-instagram"></ion-icon> </div> </header> <nav id="main-nav"> <ul> <li class="active"> <a href="#">HOME</a></li> <li><a href="#">SERVICES<span class="arrow">▼</span></a> <ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul> </li> <li><a href="#">THE MOVIES<span class="arrow">▼</span></a> <ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul></li> <li><a href="#">FAQs<span class="arrow">▼</span></a> <ul class="submenu"> <li><a href="#">Android</a></li> <li><a href="#">iOS</a></li> <li><a href="#">iOS</a></li> </ul> </li> <li><a href="#">FASHION<span class="arrow">▼</span></a> <ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul></li> <li><a href="#">LATEST NEWS<span class="arrow">▼</span></a><ul class="submenu"> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> <li><a href="#">Android Dev</a></li> <li><a href="#">iOS Dev</a></li> <li><a href="#">Web Dev</a></li> </ul></li> <li><a href="#">BLOG</a></li> </ul> </nav> </body> </html> and the css * { margin: 0; padding: 0; box-sizing: border-box; } .container{ width:80%; margin:auto; overflow:hidden; } .highlight{ color:blue; } /* Header **/ header{ background:#ffffff; padding-top:10px; min-height:140px; border-bottom:#b7b9ec 1px solid; } header h1{ text-transform: uppercase; float:left; margin-left:210px; color:#000000; font-size:30px; } header p{ text-transform: uppercase; float:left; font-size:20px; color:#000000; float:left; display:inline; margin-top:55px; margin-left:-375px; } #smb { position: absolute; right: 250px; top: 80px; margin-top: 18px; padding-top: 0px; padding-bottom: 0px; background: #F0F0F0; } .social-icon{ padding: 0px; color:#000000; text-decoration:none; font-size:30px; } #main-nav a { color:#000000; background: #ffffff; height: 64px; font-family: lato; font-weight: bold; display: flex; align-items: center; justify-content: center; text-decoration: none; } #main-nav a:hover { background: green; } #main-nav ul { list-style: none; display: flex; } #main-nav li { width: 100%; text-align: center; position: relative; } #main-nav ul li a{ background: #000000; color: red; } #main-nav li:hover .submenu > li { display: block; flex-direction: column; top: 0px; } .submenu li { display: none; position: absolute; top: 0px; } .submenu { display: flex; flex-direction: column; position: absolute; width: 100%; } .submenu li { position: relative; } .arrow { margin-left: 8px; color: #eee; font-size: 12px; } .active a{ color: yellow; border-radius:3px; background-color: #ffffff; } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now