CODEWITHSUNDEEP
css
Brandon
Brandon

Reputation: 79

CSS dropdown menu always to the side (not bottom)

I'm trying to create a simple drop-down menu, but no matter what I do, my 'dropdown' always appears directly to the side (not the bottom) of the button when clicked :(

I've added the relevant code to a fiddle, but can't seem to get the dropdown to show at all there. I'm trying to get the drop-down menu to display immediately under the 'block5' element(and aligned with the 'dropDown' button). Any help would be greatly appreciated. https://jsfiddle.net/k6azhptd/4/

<body>
    <div id="header"> 

       <div id="block2"><a href="stuff/">Browse</a></div>
       <div id="block3"><a href="stuff/">Post</a></div>
       <div id="block4"><a href="stuff/">Search</a></div>
       <div id="block5">
       <span>Logged in as </span><div class='dropDown' onClick='myFunction();'>userName▾</div>

          <div id="userDrop" class="dropContent">
             <span>User Page</span>
          </div>
       </div>
    </div>



#header {
min-width: 1290px;
background-color: #CC0000;
color: #FFFFFF;
height: 80px;
font-family: sans-serif; 
font-size: 1.1em;
}
#header a {
color: #FFF;
text-decoration: none;
}
#block1 {
margin-left: 50px;
display: inline-block;
height: 100%;
}
#block2 {
display: inline-block;
vertical-align: top;
width: 180px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block2:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block2 a {
position: relative;
top: 40px;
}
#block3 {
display: inline-block;
vertical-align: top;
width: 200px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block3:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block3 a {
position: relative;
top: 40px;
}
#block4 {
display: inline-block;
vertical-align: top;
width: 120px;
height: 100%;
text-align: center;
border-left: 1px solid #C00;
border-right: 1px solid #C00;
}
#block4:hover {
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
background-color: #900;
}
#block4 a {
position: relative;
top: 40px;
}
#block5 {
display: inline-block;
position:relative;
margin-left: 50px;
vertical-align: top;
width: 250px;
height: 100%;
text-align: right;
background-color: #444;
}
#block5 span {
position: relative;
top: 40px;
} 
.dropDown {
position: relative;
top: 40px;
display: inline-block;
color: #ff9900;
font-weight: bold;
text-decoration: none;
}
.dropContent {
display: none;
position: absolute;
width: 200px;
background-color: #CCC;
color: #000;
z-index: 10;
}

.show {display:block;}

Upvotes: 1

Views: 411

Answers (1)

Geeky
Geeky

Reputation: 7498

check this snippet

function myFunction() {
  document.getElementById("userDrop").classList.toggle("show");
};
#header {
  min-width: 1290px;
  background-color: #CC0000;
  color: #FFFFFF;
  height: 80px;
  font-family: sans-serif;
  font-size: 1.1em;
  display: flex;
}
#header a {
  color: #FFF;
  text-decoration: none;
}
#header div {
  height: 100%;
  text-align: center;
  flex: 1;
}
#block1 {
  margin-left: 50px;
  height: 100%;
}
#block2 {
  vertical-align: top;
  width: 180px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #C00;
  border-right: 1px solid #C00;
}
#block2:hover {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  background-color: #900;
}
#block2 a {
  position: relative;
  top: 40px;
}
#block3 {
  vertical-align: top;
  width: 200px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #C00;
  border-right: 1px solid #C00;
}
#block3:hover {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  background-color: #900;
}
#block3 a {
  position: relative;
  top: 40px;
}
#block4 {
  vertical-align: top;
  width: 120px;
  height: 100%;
  text-align: center;
  border-left: 1px solid #C00;
  border-right: 1px solid #C00;
}
#block4:hover {
  border-left: 1px solid #FFF;
  border-right: 1px solid #FFF;
  background-color: #900;
}
#block4 a {
  position: relative;
  top: 40px;
}
#block5 {
  background-color: #444;
  position: relative;
  margin-left: 50px;
  vertical-align: top;
  width: 250px;
  height: 100%;
  text-align: right;
}
#block5 span {
  position: relative;
  top: 40px;
}
.dropContent {
  display: none;
  position: absolute;
  top: 85px;
  width: 200px;
  background-color: #CCC;
  color: #000;
}
.dropDown {
  position: relative;
  top: 40px;
  display: inline-block;
  color: #ff9900;
  font-weight: bold;
  text-decoration: none;
}
.dropContent {
  display: none;
  position: absolute;
  width: 100%;
  background-color: #CCC;
  color: #000;
  z-index: 10;
}
.show {
  display: block;
}
<body>
  <div id="header">

    <div id="block2"><a href="stuff/">Browse</a>
    </div>
    <div id="block3"><a href="stuff/">Post</a>
    </div>
    <div id="block4"><a href="stuff/">Search</a>
    </div>
    <div id="block5">
      <span>Logged in as </span>
      <div class='dropDown' onClick='myFunction();'>userName▾</div>

      <div id="userDrop" class="dropContent">
        <span>User Page</span>
      </div>
    </div>
  </div>

PS:Check on the full screen Hope this helps

Upvotes: 1

Related Questions