<option> 是不可点击的，但它在 <aside> 之外工作答案

【问题标题】：<option> is unclickable, yet it works outside of <aside><option> 是不可点击的，但它在 <aside> 之外工作
【发布时间】：2014-05-29 10:51:38
【问题描述】：

第一次评论，但是很棒的网站，当我需要找到一些答案时，我总是来这里。

很遗憾，我找不到问题的答案，尽管我确信这很简单。我是 html 和 css 的新手（比如几个星期），所以一个解释性的答案会很好，所以我知道为什么它不起作用！！

我正在尝试使用通常的选择和选项创建一个下拉列表。但是，它不会工作。我什么都试过了。

我把它移到页脚，它工作！代码中的什么停止了下拉列表？？

任何帮助将不胜感激！

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Intrepid</title>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<header>
<img src="Images/banner2.png">
</header>
<nav><div class='ribbon'>
<a href='#'><span>Home</span></a>
<a href='#'><span>Destinations</span></a>
<a href='#'><span>Holidays Packages</span></a>
<a href='#'><span>Make a Booking</span></a>
</div>
</nav>
<body>
<content>
<div id="container"><img src="Images/picturebanner.png" height="360" width="980"    alt="Paris">
<aside>

<select>
<option value="volvo" selected="selected">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

</aside>


<section>
    <img src="Images/photo-icon.png"><p>blashasakdsakjfdhsakfj djbfsdj sdhjfbsdjkfbs sdhjfbsdsn j h hcjh bhj  h  h db jh j </p>

</section>
<section>
    <img src="Images/photo-icon.png"><p>blashasakdsakjfdhsakfj djbfsdj sdhjfbsdjkfbs sdhjfbsdsn j h hcjh bhj  h  h db jh j </p>

</section>
<section>
    <img src="Images/photo-icon.png"><p>blashasakdsakjfdhsakfj djbfsdj sdhjfbsdjkfbs sdhjfbsdsn j h hcjh bhj  h  h db jh j </p>

</section>

</div>
</content>  

<footer>


</footer>

</body>

</html>






            @import url(http://fonts.googleapis.com/css?family=Lato|Tinos|Quattrocento+Sans|Text+Me+One);

            body{
                margin:0 auto;
            }
            header{
                width: 980px;
                margin:0 auto;
                position:relative;
                }

            nav{
                width:920px;
                text-align:right;
                position:relative;  
                top:-170px;
                z-index:10;
                margin:0 auto;


            }
            nav ul li{
                display:inline;
                margin:0 auto;
                padding:30px;
                font-size:20px;


            }


            #container{
                margin:0 auto;
                width:980px;
                position:relative;
                top:-130px;
                z-index:-1;

            }

            content{
                width:980px;
                margin:0 auto;
                background-color:black;
                overflow:hidden;
            }
            aside{
                width:750px;
                height:75px;
                position:relative;  
                top:-150px;
                float:right;
                background-color:#eba600;
                padding:5px;

            }

            section{
                width:200px;
                padding:55px;
                float:left;
                text-align:left;
            }

            footer{
                background-color:#241e20;
                width:980px;
                height:250px;
                overflow:hidden;
                margin:0 auto;
            }

            .ribbon:after, .ribbon:before {
                margin-top:0.5em;
                content: "";
                float:right;
                border:1.5em solid #fff;
                opacity:0.7;

            }

            .ribbon:before {
                border-right-color:transparent;
            }

            .ribbon:after {
                border-left-color:transparent;
            }

            .ribbon a:link, .ribbon a:visited { 
                color:#000;
                text-decoration:none;
                float:right;
                height:3.5em;
                overflow:hidden;

            }

            .ribbon span {
                background:#fff;
                opacity:0.7;
                display:inline-block;
                line-height:3em;
                padding:0 1em;
                margin-top:0.5em;
                position:relative;
                margin-right:1.0em


                -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
                -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
                -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
                -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
                transition: background-color 0.2s, margin-top 0.2s;
            }

            .ribbon a:hover span {
                background:#FFD204;
                margin-top:0;

            }

            .ribbon span:before {
                content: "";
                position:absolute;
                top:3em;
                left:0;
                border-right:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;
                margin-right:1.0em;

            }

            .ribbon span:after {
                content: "";
                position:absolute;
                top:3em;
                right:0;
                border-left:0.5em solid #9B8651;
                border-bottom:0.5em solid #fff;

            }

【问题讨论】：

看起来您的 html 无效 - 如果您是新手，这不足为奇，因为需要一段时间才能了解哪些元素可以放在哪里。 W3C 验证器服务是帮助您发现 HTML 问题的一个非常好的工具，您可以在这里找到它：validator.w3.org

标签： html css menu option

【解决方案1】：

Demo Fiddle

您需要将您的header 移动到您的body 标记内，此外，您的CSS 应该放置在您的head 的style 标记内，或者最好是链接到外部样式表中。

您还需要从#container 中删除z-index:1，此时它正在“覆盖”您的内容，使其下方的任何内容（例如选择框）都无法点击。

【讨论】：