0

我已经根据本教程为我的网页创建了一个菜单栏。

我需要一些帮助来设置正确的 CSS 参数，因为我不再习惯它们了。

我能够在 Dummy Dummy Projekt 上重建教程。但它不适用于我的虚拟项目。

菜单点之间不应有间隙。下拉线不起作用，它应该只显示子菜单，当我悬停或单击菜单点时。

谁能给我一个提示，如何解决这个问题？

JSFIDDLE

CSS 代码：

#header-wrapper {
    background-color: #007294;
    background-image: -moz-linear-gradient(top, #008dab, #007294);
    background-image: -webkit-linear-gradient(top, #008dab, #007294);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
    background-image: -ms-linear-gradient(top, #008dab, #007294);
    background-image: -o-linear-gradient(top, #008dab, #007294);
    background-image: linear-gradient(top, #008dab, #007294);
}
#header {
    position: relative;
    margin: 2.5% 0 2.5% 0;
    padding: 0 40px 0 40px;
    border-radius: 10px;
    border: solid 1px #006e8b;
    box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
    background-color: #007b9d;
    background-image: -moz-linear-gradient(top, #008ead, #007b9d);
    background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
    background-image: -ms-linear-gradient(top, #008ead, #007b9d);
    background-image: -o-linear-gradient(top, #008ead, #007b9d);
    background-image: linear-gradient(top, #008ead, #007b9d);
    height: 86px;
}
#header h1 {
    position: absolute;
    left: 40px;
    top: 0;
    color: #fff;
    font-size: 2.4em;
    letter-spacing: -2px;
    line-height: 86px;
}
#header h1 a {
    color: #fff;
    text-decoration: none;
}
#header nav li {
    float: left;
    text-align: center;
    list-style-type: none
}
#header nav {
    position: absolute;
    right: 40px;
    top: 1px;
    line-height: 84px;
    text-transform: lowercase;
    font-size: 1.3em;
    letter-spacing: -1px;
}
#header nav a {
    color: #000;
    padding: 0 25px 0 25px;
    outline: 0;
    text-decoration: none;
}
#header nav a.current-page-item {
    background-color: #007897;
    background-image: -moz-linear-gradient(top, #007b99, #007897);
    background-image: -webkit-linear-gradient(top, #007b99, #007897);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
    background-image: -ms-linear-gradient(top, #007b99, #007897);
    background-image: -o-linear-gradient(top, #007b99, #007897);
    background-image: linear-gradient(top, #007b99, #007897);
    box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
}
#header nav a:hover {
    background-color: #0882a1;
    background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
    background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
    background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
    background-image: -o-linear-gradient(top, #0782a0, #077d9b);
    background-image: linear-gradient(top, #0782a0, #077d9b);
    box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
}
#nav test current ul {
    left: 0;
}
#nav test ul {
    position: absolute;
    left: -999em;
    width: 408px;
    list-style: none;
    padding: .9em 0 0;
    list-style-type: none;
}
#nav test ul li {
    width: auto;
    margin: 0 15px 0 0;
}
#nav test ul a {
    font-size: 80%;
    height: auto;
    padding: 0 8px;
}
#nav test li:active ul, #nav test li:hover ul {
    left: 0;
    position: static;
    background: #fff;
}

HTML 代码：

<div class="container">
  <div class="row">
    <div class="12u">
      <header id="header">
        <h1><a href="#" id="logo">Dummy</a></h1>
        <nav id ="nav">
          <ul id="test">
            <li class="current"><a href="#">Link1</a>
              <ul>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub1</a></li>
                <li><a href="#">Sub1</a></li>
              </ul>
            </li>
            <li><a href="#">Link2</a>
              <ul>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub2</a></li>
                <li><a href="#">Sub2</a></li>
              </ul>
            </li>
            <li><a href="#">Link3</a>
              <ul>
                <li><a href="#">Sub3</a></li>
                <li><a href="#">Sub3</a></li>
                <li><a href="#">Sub3</a></li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>
    </div>
  </div>
</div>
4

1 回答 1

1

像这样

演示

CSS

 * {
margin:0;
padding:0;
}
body {
font-family:"Times New Roman", Times, serif;
font-size:100%;

}
 #header-wrapper {
        background-color: #007294;
        background-image: -moz-linear-gradient(top, #008dab, #007294);
        background-image: -webkit-linear-gradient(top, #008dab, #007294);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
        background-image: -ms-linear-gradient(top, #008dab, #007294);
        background-image: -o-linear-gradient(top, #008dab, #007294);
        background-image: linear-gradient(top, #008dab, #007294);
    }

    #header {
        position: relative;
        margin: 2.5% 0 2.5% 0;
        padding: 0 40px 0 40px;
        border-radius: 10px;
        border: solid 1px #006e8b;
        box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
        background-color: #007b9d;
        background-image: -moz-linear-gradient(top, #008ead, #007b9d);
        background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
        background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
        background-image: -ms-linear-gradient(top, #008ead, #007b9d);
        background-image: -o-linear-gradient(top, #008ead, #007b9d);
        background-image: linear-gradient(top, #008ead, #007b9d);
        height: 86px;
    }

        #header h1 {
            position: absolute;
            left: 40px;
            top: 0;
            color: #fff;
            font-size: 2.4em;
            letter-spacing: -2px;
            line-height: 86px;
        }

        #header h1 a {
            color: #fff;
            text-decoration: none;
        }



#nav {
list-style:none;
font-weight:bold;
height:4.1em;
margin:75px auto 0;
width:816px;
position:relative;
line-height:1.4em;
}
#nav li {
width:136px;
float:left;
text-align:center;
}
#nav a {
height:1.5em;
display:block;
text-decoration:none;
color:#000;
outline:0;

}
#nav a.last {
border-right-width:1px;
}
#nav a:active, #nav a:focus, #nav a:hover {
color:#000;

}
#nav li.current a {

}
/* --------- Sub Nav --------- */
#nav li.current ul a {
}
#nav li.current ul {
left:0;
}
#nav ul {
position:absolute;
left:-999em;
width:816px;
list-style:none;
padding:.9em 0 0;
}
#nav ul li {
width:auto;
margin:0 15px 0 0;
}
#nav ul a {
font-size:80%;
height:auto;
padding:0 8px;

color:#999;

}
#nav ul a:active, #nav ul a:focus, #nav ul a:hover {

color:#000;
border-color:#000;
}
#nav li:active ul, #nav li:hover ul {
left:0;
background:#fff;
}
#nav ul li.subcurrent a {
color:#000;
border-color:#000;
}
于 2013-08-13T10:27:43.963 回答