dropdown menu without borders - html

Question

I want to do one small and easy dropdown menu, but I dont get it how to do this.
What I exacly mean ? :
And I want to do this thisway: If u click on ENG then its going to index_eng.html, but its not working.
My html:
<nav id="menu2">
<select>
<option href="index.html" value="est">EST</option>
<option href="index_eng.html" value="eng">ENG</option>
</select>
</nav>
My css:
#menu2 {
height: 30px;
overflow: visible;
border-radius: 5px;
background-color: #484848;
color: #FFFFFF;
padding: 5px 5px 0px 5px;
margin: 5px 5px 5px 5px;
font: 8pt verdana, arial, sans-serif;
}
At the moment I have this menu like this, but I want it like this picture above.
Need some clue or solution. Thank you!

Answer 1

Why don't you use anchors?
<nav id="menu2">
<ul>
<li>EST</li>
<li>ENG</li>
</ul>
</nav>
If you do not want to use anchors, you can achieve navigation with jQuery:
$('option').click(function() {
var url = $(this).attr('href');
window.location = url;
});
Try this if the above does not work:
window.location.assign(url);

Answer 2

This is very simple CSS3 drop-down menu:
Demo: http://jsfiddle.net/ahqbbwbm/11/
HTML
<ul>
<li>
EST <span class="arrow-down"></span>
<ul>
<li>EST</li>
<li>ENG</li>
</ul>
</li>
</ul>
CSS
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #2980b9;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
color: #fff;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
min-width: 80px;
background-color: #555;
}
ul li ul li > a {
text-decoration: none;
display: block;
color: #fff;
}
ul li ul li:hover {
background: #666;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
ul li > span {
display: inline-block;
margin: 0 0 -3px 5px;
width: 12px;
height: 12px;
background-image: url('https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/down4-24.png'); /* Change this */
background-size: 12px 12px;
}

Answer 3

http://jsfiddle.net/yf18w6ay/
css
select{
border:0px;
outline:0px;
}

Answer 4

Below is the example for simple pure CSS Drop Down Menu..
HTML
<nav id="primary">
<ul>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
CSS
#primary
{
margin-top:15px
}
#primary ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary ul li.current-menu-item
{
background:#ddd
}
#primary ul li:hover
{
background:#f6f6f6
}
#primary ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary ul ul li
{
float:none;
width:200px
}
#primary ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary ul ul ul
{
top:0;
left:100%
}
#primary ul li:hover > ul
{
display:block
}