如何让css菜单栏工作?

时间:2015-06-22 18:25:47

标签: html css internet-explorer

我不能让我的下载工作在ie(它会出现但不会链接)

这是我的testing.html文件:

<html lang="en">
    <meta charset="UTF-8">
    <link rel="icon" type="image/png" href="image.png"/>
    <title>AaronGaming |</title>
    <link rel="stylesheet" href="menu.css">
    <link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>

        <nav class="nav-main">
            <div class="logo">AaronGaming</div>
            <ul>
                <li>
                    <a href="index.html" class="nav-item">Home</a>
                        </li>
                            <li>
                                <a href="#" class="nav-item">Games</a>
                                    <div class="nav-content">
                                        <div class="nav-sub">
                                            <ul>
                                                <li><a href="Computer.html">Computer Games</a></li>
                                                    <li><a href="Phones.html">Mobile Games</a></li>
                                                </ul>
                                            </div>
                                        </li>
                                    <li>
                                <a href="downloads.html" class="nav-item">Downloads</a>
                            </li>
                        <li>
                    <a href="contact.html" class="nav-item">Contact Me</a>
                </li>
            </ul>
        </nav>

        <div class="content">

<link rel="prerender" href="Computer.html" />
<link rel="prerender" href="Phones.html" />
<link rel="prerender" href="downloads.html" />
<link rel="prerender" href="contact.html" />

<link rel="next" href="/next"/>
<link rel="prev" href="/prev"/>


<body bgcolor="yellow">

<center>

</center>

</body>
</html>

这是menu.css文件:

body, html {
margin:auto;
font:1em 'Raleway', sans-serif;
font-family: Raleway, sans-serif;
}

.content {
padding:30px;
}

.nav-main {
width:100%;
background-color:#222;
height:70px;
color:#fff; 
position:fixed;
-webkit-backdrop-filter: blur(10px);
} 

.nav-main .logo {
float:left;
height:40px;
padding:15px 30px;
font-size:1.4em;
line-height:40px;
}

.nav-main > ul {
margin:0;
padding:0;
float:auto;
list-style-type:none;
}

.nav-main > ul > li {
float:left;
}

.nav-item {
display:inline-block;
padding:15px 20px;
height:40px;
line-height:40px;   
color:#fff;
text-decoration:none; 
}

.nav-item:hover {
background-color:#FF4500;
}

.nav-content {
position:absolute;
top:70px;
overflow:hidden;
background-color:#FF4500;
color:#fff;
max-height:0;
}

.nav-content a {
color:#fff;
text-decoration:none;
}

.nav-content a:hover {
text-decoration:underline;
}

.nav-sub {
padding:20px;
}

.nav-sub ul {
padding:0;
margin:0;
list-style-type:none;
}

.nav-sub ul li a {
display:inline-block;
padding:5px 0;  
}

.nav-item:focus {
background-color:#FF4500;
}

.nav-item:focus ~ .nav-content {
max-height:400px;
-webkit-transition:max-height 0.4s ease-in;
-moz-transition:max-height 0.4s ease-in;
transition:max-height 0.4s ease-in;
}

.nav-content:active {
max-height: 400px;
}

.nav-main .content {
position: relative;
}


.nav-content {
 opacity: 0.9;
} 

你能帮助你实现这个吗?

谢谢你,如果你的工作在

My Website to see what I taking about.

0 个答案:

没有答案