将 select 下拉列表更改为无序列表

Question

我用 select 和选项标签创建了一个下拉菜单，但是这些不允许我 link 到我的其他网页，我读到我必须创建一个 un -有序列表，因为我错误地创建了下拉列表。

这是我的代码目前的样子： https://jsfiddle.net/pferdefleisch/Q7HNj/1/

<select id="one">


<option value = "catalouge">
<a href = "catalouge.html">PRODUCT CATALOUGE</a>
</option>


<option>
    Vacuum Components
</option>

<option>
    Valve Components
</option>

<option>
    Roughing Components
</option>

<option>
    Vacuum Measurement
</option>

<option>
    Glass Components
</option>

<option>
    Electrical Feedthroughs
</option>

<option>
    Motion and manipulation
</option>

<option>
    Thin Film Products
</option>
</select>

css:

 #one { 
  margin: 10px;
  padding: 10px; 
  width: 20%;
  font-family: Palatino Linotype;
  font-size: 15px;
  -moz-appearance: none;
  -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
  box-shadow: 0 3px 0 #ccc, 0 -1px purple inset;
  list-style: none;

  position:absolute;top:23%;left:2%;
}

如何将其转换为普通的下拉列表？

Answer 1

您也可以使用 select 更改您的页面。只需包含 jquery 库并放入此 jquery 代码：

$(document).ready(function(){
    $('#one').change(function(){
         window.location.href = $(this).find('option:selected').val();
    });
});

如果你想使用 select 作为主菜单，最好使用无序列表：

<div class="nav">
    <ul>
        <li><a href="link to page 1">Page 1 Title</a></li>
        <li><a href="link to page 2">Page 2 Title</a></li>
        <li><a href="link to page 3">Page 3 Title</a></li>
    </ul>
</div>

Answer 2

您似乎在使用选择下拉菜单。这是我根据您可能想要的方式制作的 fiddle。这个fiddle纯粹是HTML和CSS.

https://jsfiddle.net/2q3kkh8n/2/

HTML

<div id="dropdown-container">
    <div id="dropdown">PRODUCT CATALOGUE
        <span class="down-arrow-icon">><span>
    </div>
    <ul id="dropdown-list">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        <li><a href="#">four</a></li>
    </ul>
</div>

和CSS：

#dropdown-container{
    float: left;
    font-family: Palatino Linotype;
}
#dropdown{
    padding:5px;
    cursor:pointer;
    font-size: 15px;
    border: 1px solid rgb(169, 169, 169);
    -moz-appearance: none;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #2961c1 inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px purple inset;
}
.down-arrow-icon{    
    padding-left: 5px;
    /*place img of down arrow here*/
}
#dropdown-list{
    display:none;
    width: 100%; 
    padding:0px;
    margin:0px;
    border: 1px solid rgb(169,169,169);
}
#dropdown-container:hover ul#dropdown-list{
    display:block;
}
#dropdown-container ul{
    padding:0px;
    list-style: none;
}
#dropdown-container ul li{
    width: 100%;
}
#dropdown-container ul li:hover{
    background-color: lightblue;
    cursor:pointer;
}
#dropdown-container ul li a{  
    padding-left: 10px;
    text-decoration:none;
    color: black;
}

希望对您有所帮助。

将 select 下拉列表更改为无序列表

Changing a select drop-down list to an unordered list

html

css

select

html-lists

drop-down-menu