drop down menu issues:

smallball · 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>

<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;
}

Sign In

drop down menu issues:

Recommended Posts

smallball

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity