CODEWITHSUNDEEP
htmlcssweb
Muhammed Rishdhi
Muhammed Rishdhi

Reputation: 11

why does a space appear in between the links and the container?

The website image

Why does this gap between the nav menus and the container appear even though I tried to remove it. Couldn't figure it out.

HTML:
  <div class="user-nav">
                                        <a href="#"><i class="flaticon-down-arrow user-info"></i></a>
                                        <div class="nav-content">
                                            <ul>
                                                <li><a href="#">Profile</a></li>
                                                <li><a href="#">Notifications</a></li>
                                                <li><a href="#">Help</a></li>
                                                <li><a href="#">Sign out</a></li>
                                            </ul>
                                        </div>
                                    </div>

CSS:



  .user-nav .nav-content ul li a{font-weight: 500;padding:12px 16px;text-decoration: none;background:orange;display: block;}
    .nav-content{display:none;z-index:1000;position:absolute;background:rgba(150, 203, 255,0.5);box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);right:10px;top:40px;}
    .user-nav:hover .nav-content{display:block;}
    .user-nav{position:relative;height:40px;top:15px;width:30px;}

Upvotes: 0

Views: 57

Answers (2)

Dejo Dekic
Dejo Dekic

Reputation: 2126

margin:0; and padding:0; inside .user-nav ul will solve your problem.

.user-nav ul{
list-style:none;
margin:0;
padding:0;
}

.user-nav .nav-content ul li a{
font-weight: 500;padding:12px 16px;
text-decoration: none;
background:orange;
display: block;
}
 .nav-content{
display:block;
z-index:1000;
position:relative;
background:rgba(150, 203, 255,0.5);
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
right:10px;
top:40px;
}
.user-nav:hover .nav-content{
display:block;
}
.user-nav{
position:relative;
height:40px;
top:15px;
width:130px;/* Added a little more width here*/
}
<div class="user-nav">
<a href="#"><i class="flaticon-down-arrow user-info"></i></a>
<div class="nav-content">
<ul>
<li><a href="#">Profile</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">Help</a></li>
<li><a href="#">Sign out</a></li>
</ul>
</div>
</div>

Upvotes: 0

lakshitha madushan
lakshitha madushan

Reputation: 669

Add top following top of the style sheet

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

These are using to remove elements default margin and paddings. This may be helpful to you.

Upvotes: 1

Related Questions