Question

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

不幸的是，我无法找到问题的答案，即使我确定它很简单。我是html和css的新手（比如几个星期），所以解释性答案会很好，所以我知道为什么它不起作用!!

我试图使用select和option创建一个下拉列表，通常。但是，它不会工作。我尝试了一切。

虽然我把它移到了页脚，但它确实有效！代码中的内容是停止下拉列表??

任何帮助将不胜感激！

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

            }

Answer 1

Demo Fiddle

您需要将header移至body标记内，此外，您的CSS应放在style的{{1}}标记内，或者理想情况下，链接到外部样式表。

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

<option>无法点击，但它在<aside> </aside> </option>之外工作

1 个答案:

Demo Fiddle