Volcan 3 Volcan 3 - 2 months ago 6
CSS Question

Dropdown items on same line + hover effect goes to far to the right

I have a navigation bar that I want to be able to use dropdown menus but the w3schools one that I found display items on same line + the hover background color change is too wide. could someone have a look at it and tell me what goes wrong?

https://fiddle.jshell.net/e7zLx39u/

Answer
  1. you have .nav-item-holder a {display: inline}, where actually you want this to by display: block;
  2. I would also add .nav-item-holder .dropdown-content a { padding-left: 0; padding-right: 0; } to make sure you don't have any jumps of the items when you hover them.

Here is a working version of your code, fix (with my 2 suggestion)

.nav-wrapper {
	position: fixed;
	color:#151618;
	background-color:#151618;
	width:100%;
	border-bottom:4px solid #0bb1ff;
	height:50px;
	z-index:1;
	margin-top:0 auto;
}

.nav-logo {
	width:45px;
	position:absolute;
	z-index:2;
	top:5%;
}	

.nav-item {
	float:left;
}

.dropbtn {
    background-color: #151618;
    display: inline-block;
    height:100%;
	padding-left:10px;
	padding-right:10px;
	color:#0bb1ff;
	text-decoration: none;
    border: none;
    cursor: pointer;
}

.dropbtn:hover {
	color:#fff;
	height:100%;
	background-color:#0bb1ff;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    background-color: #151618;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #151618;
    border:3px solid #0bb1ff;
    text-align: center;
    width:180px;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #0bb1ff;
    text-decoration: none;
    display: block;
    padding: 0;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #0bb1ff; color:#fff; width:100%;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: inline-block;
    clear:both;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #0bb1ff;
}

.dropdown:hover .dropbtn {
	color:#fff;
}

.nav-item-holder {
	z-index:3;
	color:#151618;
	font:14px verdana;
	line-height:50px;
	left:50px;
	position:absolute;
}

.nav-item-holder a {
	display: block;
	padding-left:10px;
	padding-right:10px;
	color:#0bb1ff;
	text-decoration: none;
}

.nav-item-holder a:hover {
	position:relative;
	color:#fff;
	text-decoration: none;
	background-color:#0bb1ff;
	height:100%;
}
.nav-item-holder .dropdown-content a {
  padding-left: 0;
  padding-right: 0;
}
.active {
	position:relative;
	color:#fff;
	text-decoration: none;
	background-color:#0bb1ff;
	height:100%;
}

.user-image {
	width: 30px;
	height: 30px;
	position:absolute;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-border-radius: 99em;
	-moz-border-radius: 99em;
	border-radius: 99em;
	border: 2px solid #0bb1ff;
	top:8px;
	right:30px;
}

.nav-user {
	line-height: 50px;
	color:#fff;
	position:absolute;
	right:0;
}

.nav-user span {
	display:inline-block;
	position: absolute;
	right:70px;
}

.nav-user-drop {
	position:absolute;
	display:none;

}

.nav-user:hover .nav-user-drop {
	display:block;
}

.user-drop {
	padding:5px;
	text-align: center;
	background-color:#151618;
	color:#0bb1ff;
}
<div class="nav-wrapper">
  <div class="nav-content">
    <a class="nav-logo" href="/"><img src="/assets/images/templates/volcan.png" class="nav-logo"/></a>

    <div class="nav-item-holder">
      <div class="nav-item"><a href="" >Forum</a></div>
      <div class="nav-item"><a href="" >Article</a></div>
     
      <div class="dropdown">
        <div class="dropbtn">Discover</div>
        <div class="dropdown-content">
          <a href="#">Top</a>
          <a href="#">Recent</a>
          <a href="#">Verified</a>
        </div>
      </div>   
    </div>


    <form>
      <!--Gone add search bar-->
    </form>


 
    </div>
    <div class="nav-user-drop">
      <a href="" class="user-drop">Profile</a>
      <a href="" class="user-drop">Inbox</a>
      <a href="" class="user-drop">Settings</a>
      <a href="" class="user-drop">Sign Out</a>
    </div>

  </div>
</div>

Comments