How to do a dropdown/up menu?

[mikestechs]

Hello guys, is there anybody who understand css, html ? I want to create dropup menu on my website but i dont know how. 

[GuyNamedBrad]

Yeah you may try to look at a site called w3schools they are great!Here 

 

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

 

This would give you 4 drop down options.

[GreezyJeezy]

post this in coding, and yes look at this http://www.w3schools.com/howto/howto_css_dropdown.asp

 

and thats the best place to learn how to do CSS and HTML5 stuff 

[DXMember]

LMGTFY

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_dropdowns.asp

[mikestechs]

Thank you for answer, but i have a lil problem here. I have seen the site W3schools, its great, but my problem is that my dropup menu is on background of the site.. and i dont know how to move i to foreground 

[mikestechs]

2 minutes ago, DXMember said:

LMGTFY

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_dropdowns.asp

I'll try to ad the last code in my css, thank you for that

[minibois]

5 minutes ago, mikestechs said:

Thank you for answer, but i have a lil problem here. I have seen the site W3schools, its great, but my problem is that my dropup menu is on background of the site.. and i dont know how to move i to foreground 

You can change the Z index of the item to 1, so it is in front of stuff (this is a CSS thing, Google around a bit and figure out how it would work for you)

[mikestechs]

1 minute ago, Minibois said:

You can change the Z index of the item to 1, so it is in front of stuff (this is a CSS thing, Google around a bit and figure out how it would work for you)

I'll take a look at it, thank you! 

[GuyNamedBrad]

You need to put it in a <div> and then in the css use  to move it to the foreground hope this helps

 

#dropdown

{

  z-index:10;

}

[mikestechs]

10 minutes ago, bradmonster said:

You need to put it in a <div> and then in the css use  to move it to the foreground hope this helps

 

#dropdown

{

  z-index:10;

}

I have this: 

 

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    margin-top: 1px;
    font: 10px;
    bottom: 100%;
    z-index:10;
}

.dropdown:hover .dropdown-content {
    display: block;
} 

 

 

and this in html file: 

<ul>
<b>
<div class="dropdown">
<li><a href="uvod.html" target="_self" name="about" ><span>ABOUT</span></a></li>
<div class="dropdown-content">
<span>test</span>
</div>
</div>
<li><a href="history.html" target="_self" name="history" > HISTORY</a></li>
<li><a> Apss</a></li>
<li><a> Android</a></li>
<li style="float:right"><a href="index.html">HOME</a></li>
</b>
</ul>

 

but it doesnt work

[GuyNamedBrad]

Hey, after looking at your code, not sure why it's not working I maybe missing something, here is a good site to compare to; http://jsfiddle.net/Hjaj4/ also try a higher index like 100 or 1000 to test it.