应用错误收集

如何使用html中的页面提供下拉链接

时间：2014-11-04 07:04:58

标签： html css

这是我创建下拉菜单的代码。在这里，我给出了下拉菜单的链接。这段代码工作得很好。我只是不知道如何将这些下降联系起来。

html代码

<html>

    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="pine3.css" type="text/css">
    </head>

    <body>
    <div class="outline">

    <header>
    <h1><h1 style="font-family:verdana"><img src="Red_Pine_-_mature.jpg" width="104" height="142">Pine Server</h1>
    </header>
    <p></p>
    <p></p>


    <nav>
    <li><a href="#"><b>Home</b></a></li>


    <div id="container">
        <div id="button"><span>Main Release</span>
            <a class="first-hover" href="#"></a>
            <ul class="menu">
                <li><a href="#">Application</a></li>
                <li><a href="#">DataBase Installer</a></li>
                <li><a href="#">CSF</a></li>
            </ul>
            <div class="button-hover"></div>
        </div>
    </div>
    <div id="container">
        <div id="button"><span>Hotfix</span>
            <a class="first-hover" href="#"></a>
            <ul class="menu">
                <li><a href="#">Application</a></li>
                <li><a href="#">DataBase Installer</a></li>
                <li><a href="#">CSF</a></li>
            </ul>
            <div class="button-hover"></div>
        </div>  
    </div>
    <div id="container">
        <div id="button"><span>CSF</span>
            <a class="first-hover" href="#"></a>
            <ul class="menu">
                <li><a href="#">Application</a></li>
                <li><a href="#">DataBase Installer</a></li>
                <li><a href="#">CSF</a></li>
            </ul>
            <div class="button-hover"></div>
        </div>
    </div>
    </nav>



    <section>

    <h1>Pine Server</h1>
    <p>

    </p>
    <p>

    </section>

    <footer>
    Copyright © digite.com
    </footer>

    </body>

css代码

div.outline {
width: 96%;
float: left;
padding: 1% 2%;
margin: 1% 0;
border-radius: 15px;
background: Maroon;
box-shadow: 15px 15px 20px #202020;
height: 750px
}

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:10px;    
}
nav {
    line-height:20px;
    background-color:#808080;
    height:400px;
    width:200px;
    float:left;
    padding:5px;          
}
main {
width:90%;
background: #aaaaaa;
float: left;
margin: 1% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #808080
}
body{
margin: 0;
padding: 0;
}

a{

float: center;
text-decoration: none;
color: white;
line-height: 30px;
display: block;
font-family: 'Arial', Verdana, arial;
}

#container{
height: 50px;
width: 90%;
padding-top: 50px;
}

#container:hover .first-hover, #container:hover .button-hover{
-webkit-transition-delay:0.5s;
-moz-transition-delay:0.5s;
-o-transition-delay:0.5s;
-ms-transition-delay:0.5s;
}

#button{
margin: 0 auto;
width: 150px;
height: 30px;
text-align: center;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
border-radius: 5px 0px 0px 3px;
border-right: 1px solid #d6d6d6;
position: relative;
}

#button:hover .button-hover{

-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
-ms-transition-delay:0s;
}

#button span{

color: white;
text-decoration: none;
line-height: 30px;
font-family: 'Arial', Verdana, arial;
}

.button-hover{
content:"";
position: fixed;
left: 123px;
top: -29px;
width: 20px;
height: 25px;
border-radius:0 3px 3px 0;
border-left: 1px solid #242424;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; 
}

#button span:after , .button-hover span:after, .first-hover:before{
    background: rgba(255,255,255,.07);
    content: "";
    height: 35px;
    left: 0;
    position: absolute;
    width: 100%;
}

.button-hover:after{
content:"";
width: 5px;
height: 15px;
border-width: 4px;
border-style: solid;
border-color: white transparent;
left: 6px;
top: 0;
position: absolute;
}

.menu{
visibility: hidden;
position: absolute;
top: 25px;
left: 151px;
height: 0;
width: 100%;
margin: 0;
padding: 0;
text-align: center;
background-color: #393939;
border-left: 1px solid #242424;
border-right: 1px solid #242424;
  -webkit-transition: all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition:    all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -ms-transition:     all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition:      all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition:         all 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.first-hover{
position: absolute;
visibility:hidden;
top:0;
left: 151px;
width: 0;
height: 30px;
margin: 0;
padding: 0;
background-color: #393939;
border-left: 1px solid #242424;
border-right: 1px solid #242424;
background-image: -webkit-linear-gradient(#5a5a5a, #393939);
background-image: -moz-linear-gradient(#5a5a5a, #393939);
background-image: -o-linear-gradient(#5a5a5a, #393939);
background-image: -ms-linear-gradient(#5a5a5a, #393939);
background-image: linear-gradient(#5a5a5a, #393939);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.first-hover a{
opacity: 0;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#button:hover .first-hover{
width: 150px;
visibility:visible;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
-ms-transition-delay:0s;
}

#button:hover .menu{
visibility: visible;
height: 103px;
-webkit-transition-delay:0.1s;
-moz-transition-delay:0.1s;
-o-transition-delay:0.1s;
-ms-transition-delay:0.1s;
}

 #button:hover .menu li{
border-bottom: 1px solid #676767;
-webkit-transition-delay:0.3s;
-moz-transition-delay:0.3s;
-o-transition-delay:0.3s;
-ms-transition-delay:0.3s;
}

.menu li{
list-style: none;
height: 25px;
border-bottom:none;
text-align: center;
  -webkit-transition: border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -moz-transition:    border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -ms-transition:     border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  -o-transition:      border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
  transition:         border-bottom 600ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.menu li:hover{
 background-color: rgba(255,255,255,.07);
}

#button:hover .menu li:first-child{
width: 140px;
}
main {
width:100%;
background: #ffffff;
float: left;
margin: 1% 0;
border-radius: 10px;
box-shadow: 5px 5px 10px #202020
}
main h1 {
font-size : 20px;
text-align : center;
color : #003399;
margin: 2% 0 }

main p {
text-align : left; 
text-indent : 16px ;
margin: 2% 10% }
main img { 
margin: 4% 4%;
border-radius: 5px;
border: solid #000000 1px;
box-shadow: 4px 4px 8px #202020
}

main img {
max-width: 100%
}


section {
    background: steelblue;
    height:360px;
    width:750px;
    float:left;
    text-align:left;
    padding:50x;         
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:15px;        
}

0 个答案:

没有答案