Question

我创建了一个带有select和option标签的下拉菜单，但这些不允许我链接到我的其他网页，我读到我必须创建一个无序列表，因为我创建了我的下拉列表不正确。

这是我的代码目前的样子： 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

看起来您正在使用选择下拉列表。这是一个小提琴，我想你可能想要这样做。这个小提琴纯粹是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;
}

我希望这会有所帮助。

Answer 2

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

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

如果要使用主菜单的选择，最好使用无序列表：

<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>

将选择下拉列表更改为无序列表

2 个答案: