I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu.
Oddly, the first item in the menu appears taller than all the other items in the list - you can see it here:
Is there a way to ensure that the height of the first item matches all the other items in the list?
I've attempted the following solutions:
- Setting the height of the first list item explicitly. No changes occur.
- Removing the padding from the menu. Still no change.
- Eliminating the margins from the menu. Unfortunately, nothing happens.
Here's a jsfiddle demonstrating my issue. The code may not be clean right now, but I'll clean it up after resolving this problem.
Code snippet taken from the fiddle:
HTML:
<img id="profile_circle" style="height:25px;width:25px;;border-radius: 16px;float:right;margin-top:10px;border:2px solid #DDD8CE;cursor:pointer;" src="https://secure.gravatar.com/avatar/3ab5cad18247b67090e61f59b47ef7c4?size=20" alt="">
<div style="width:160px;min-height:100px;background-color:white;z-index:3;position:relative;top:40px;left:240px;-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2),inset 0 0 0 #000;-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;" class="grey_box">
<ul class="dropdown-menu">
<li><a href="https://domain.com//profile/jjmpsp">My profile</a></li>
<li><a href="https://domain.com//universities/">My university</a></li>
<li><a href="https://domain.com//dumps/">My dumps</a></li>
<li><a href="https://domain.com//notes/">My notes</a></li>
<li class="divider"></li>
<li><a href="https://domain.com//logout/">Logout</a></li>
</ul>
</div>
CSS:
.dropdown-toggle:focus{outline:0;}
.dropdown-menu{z-index:1000;display:block;padding:5px 0;list-style:none;font-size:14px;background-color:#ffffff;background-clip:padding-box;margin:0px !important;}
.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;}
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.428571429;color:#333333;white-space:nowrap;}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#ffffff;background-color:#428bca;}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#428bca;}
.grey_box {
background-color: #FFF;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 3px solid #DDD8CE;
}