Jump to content

drop down menu issues:


smallball
 Share

Recommended Posts

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">&#x25BC;</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">&#x25BC;</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">&#x25BC;</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">&#x25BC;</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">&#x25BC;</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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...