【问题标题】：dropdown menu without borders无边框下拉菜单
【发布时间】：2015-02-26 10:26:28
【问题描述】：

我想做一个小而简单的下拉菜单，但我不知道怎么做。

我到底是什么意思？：

我想这样做：如果你点击 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;
}

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

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

【问题讨论】：

那么问题出在哪里：如何设置下拉菜单的样式（如标题所示），或者如何重定向选择？第二部分见这个问题：stackoverflow.com/questions/12287672/…
使用锚标签代替 Select 的

标签： html css

【解决方案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);

【讨论】：

大声笑我不知道：D，谢谢！，但我想要它在下拉菜单中并且没有边框；）
不想要哪个边框？请提供一个工作演示。无论如何，要删除边框，您可以使用 css border:none
您使用的是选择列表，而不是下拉菜单，它允许您选择“选项”url，但不会在浏览器中运行它。这个答案很好，因为它是一个链接列表。无需编写自己的下拉菜单，只需使用 superfish：users.tpg.com.au/j_birch/plugins/superfish/examples
是的，我希望它像这样工作：如果我点击选项 ENG，那么它会运行 index_eng.html，如果我点击选项 EST，那么它会运行 index.html
@frantsium 检查我的编辑，以防你想坚持使用选项

【解决方案2】：

http://jsfiddle.net/yf18w6ay/

css

select{
    border:0px;
    outline:0px;
}

【讨论】：

【解决方案3】：

这是一个非常简单的 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;
}

【讨论】：

它很好，但我想要它小而像这样，就像这张有问题的照片。
类似这样的东西：jsfiddle.net/64gwobf8?请更具体地说明问题。
是的，但没有背景色
只是一个文本和这个小箭头，如果我点击 EST 然后它会运行 index.html，如果我点击 ENG 然后它会运行 index_eng.html
我得到了我想要的，但我不喜欢那里的箭头链接，有没有没有链接的方法？

【解决方案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
    }

【讨论】：