Изменение выпадающего списка select в неупорядоченный список

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>