CODEWITHSUNDEEP
htmlcssbuttondrop-down-menu
godineedhelp
godineedhelp

Reputation: 13

Why can't I put drop down menu under a button?

I am so desperate right now. Have tried 2 days to solve this but still no avail. The dropdown menu cannot be put under the situation and the exercise button correctly. It shows on the left hand-side of the navbar instead of the bottom of the button, which may because i used float left at line 19 CSS in fiddle:

.navbar a,.sit,.exercise {
   float:left; 
}

class "navbar" is for the whole navbar

class"dropdown1" is for the followings :class"sit" is for the button "situation", class"situ" is for the dropdown menu in "sit"

class"dropdown2" is for the followings :class"exercise" is for the button "exercise", class"exec" is for the dropdown menu in "exercise"

I have tried to put position: relative under class"sit" and class"exercise". However, the result is that a scrollbar shows up in the dropdown menu and you have to scroll it down to see the whole menu. The position doesn't even change!

here is the code in fiddle https://jsfiddle.net/zo0raL86/

I expect the dropdown menu can be shown under the right button. Really hope that you can give me a helping hand! Thank you so much

Upvotes: 1

Views: 945

Answers (2)

Archer
Archer

Reputation: 1124

Add this to your stylesheet:

.navbar > div{
  display: inline-block;
  width: 32.78%;
}

Then add some pixels to the top-Value of .situ and .exec then it will be display right under the button.

I also updated your html.

<div class="navbar">
   <div class="i3">
     <a href="About.asp">About</a>
   </div>

   <div class="dropdown1">    
    <a href="#">Situation
      <div class="situ">
        <a href="situation1.asp">s1</a>
        <a href="situation2.asp">s2</a>
        <a href="situation3.asp">s3</a>
      </div>       
    </a>
   </div>

   <div class="dropdown2">
    <a href="#">Exercise
      <div class="exec">
        <a href="exercise1.asp">e1</a>
        <a href="exercise2.asp">e2</a>
        <a href="exercise3.asp">e3</a>
      </div>       
    </a>
   </div>     
</div>

Remove the bottom Value from your dropdowns and add

.situ, .exec{
  top: 123px;
}

The value should be the sum of your margin-top and height to fit smoothly under the navigation.

Upvotes: 0

UntitledGraphic
UntitledGraphic

Reputation: 1274

Your basic problem is that you've set all your floats on the children of the elements you actually want to float. For example: You have 

.navbar a,.sit,.exercise {
    float:left;
    width: 32.78%;
}

Whereas the float:left; and the width should be on their parent elements .i3, .dropdown1, and .dropdown2 like so ...

.i3,
.dropdown1,
.dropdown2 {
    width: 33.333%;
    float: left;
}

This will solve the basics of your problem and the additional width problem you've expressed in your fiddle.

Better still set the widths of .sit and .exercise to 100%.

I've updated your fiddle here so you can see the code in situ.

Upvotes: 1

Related Questions