没有边框的下拉菜单

Question

我想做一个小而简单的下拉菜单，但我不明白该怎么做。

我的意思是什么？ ：

我想这样做：如果你点击ENG那么它会转到index_eng.html，但它不起作用。

我的HTML：

    <nav id="menu2">
        <select>
            <option href="index.html" value="est">EST</option>
            <option href="index_eng.html" value="eng">ENG</option>
        </select>
    </nav>

我的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;
}

目前我有这样的菜单，但我想要它像上面这张照片。

需要一些线索或解决方案。谢谢！

Answer 1

为什么不使用锚点？

<nav id="menu2">
    <ul>
       <li><a href="index.html">EST</a></li>
       <li><a href="index_eng.html">ENG</a></li>
    </ul>        
</nav>

如果您不想使用锚点，可以使用jQuery实现导航：

$('option').click(function() {
    var url = $(this).attr('href');
    window.location = url;
});

如果以上操作无效，请尝试此操作：

    window.location.assign(url);

Answer 2

这是非常简单的CSS3下拉菜单：

演示：http://jsfiddle.net/ahqbbwbm/11/

<强> HTML

<ul>
  <li>
    EST <span class="arrow-down"></span>
    <ul>
      <li><a href="index.html">EST</a></li>
      <li><a href="index_eng.html">ENG</a></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

以下是简单纯CSS下拉菜单的示例..

HTML

<nav id="primary">
    <ul>

      <li><a href="#">Menu 1</a>
        <ul>
          <li><a href="#">Sub Menu 1</a></li>
          <li><a href="#">Sub Menu 2</a></li>
          <li><a href="#">Sub Menu 3</a></li>
          <li><a href="#">Sub Menu 4</a>
            <ul>
              <li><a href="#">Deep Menu 1</a>

              </li>
              <li><a href="#">Deep Menu 2</a></li>
            </ul>
          </li>
          <li><a href="#">Sub Menu 5</a></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
    }