Question

我正在尝试（有点）复制此主题顶部菜单栏的外观：http://elegantthemes.com/preview/Lucid/

我正在努力的部分是获取渐变I 借用来占据<li>元素占据的整个“块”。由于这在概念上有点难以解释，所以我现在拥有的是：http://jsfiddle.net/tCH39/

供参考，以下是HTML和CSS的相关部分：

  <div id="top-menu">
    <ul>
      <li><a href="home">Home</a></li>
      <li><a href="about">About</a></li>
    </ul>
  </div>

CSS：

body { /* CSS Reset - http://meyerweb.com/eric/tools/css/reset/ */
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  font-size: 100%; 
  vertical-align: baseline; 
  background: transparent; 
}

ol, ul { list-style: none; }
li {
  display: inline;
  padding-left: 30px;
  padding-right: 30px;
}

a { 
  text-decoration: none;
  color: black;
}

#top-menu {
  position: relative;
  /*display: block;*/
  background-color: #f9f9f9;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
  margin-bottom: 60px;
  padding-top: 5px;
  padding-bottom: 5px;
}

#top-menu a {
  text-shadow: 1px 1px 0 #fff;
  color: #4b4b4b;
  width: auto;
  height: 100%;
  display: inline-block;
}

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }
#top-menu li.sfHover > a { color: #fff; text-shadow: none; }

为什么渐变只受到文本的约束，而不是由填充，边距等组成的整个区域？

提前致谢。

Answer 1

首先，a

上有渐变

#top-menu > ul > li > a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li > a:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

这应该在li。

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li:hover  { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

然后我增加了li的高度。

LI示例：http://jsfiddle.net/tCH39/1/

如果您想要设置a本身的样式。

这样做：

ol, ul { list-style: none; padding: 0; margin:0; }


a { 
    text-decoration: none;
    color: black;
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 10px;
    padding-right: 10px;
    display: block;
}

显示例子的小提琴：http://jsfiddle.net/tCH39/7/

这是我书中一个更清晰的方法，因为a是你想要的风格元素，并且可以点击“全部”。

Answer 2

我在CSS中做了一些更改。我想这就是你要找的东西。

Live Demo

ul, li {
    margin: 0;
    padding: 0;
}

#top-menu {
  position: relative;
  /*display: block;*/
  background-color: #f9f9f9;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #eeeeee;
}
#top-menu ul{
    margin: 0 35px;
}
#top-menu ul li{
    display:inline-block;
    margin-left: -4px;
}
#top-menu a {
  text-shadow: 1px 1px 0 #fff;
  color: #4b4b4b;
  width: auto;
  height: 100%;
  display: inline-block;
    padding: 25px 30px;
}

Answer 3

您只将样式提供给li中的a标记。

尝试 -

#top-menu > ul > li { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
#top-menu > ul > li:hover { color: #fff; background-color: #4b4b4b; text-shadow: -1px -1px 0 #000; -moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9); box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

也许有帮助

链接：http://jsfiddle.net/tCH39/2/

Answer 4

它仅受文本限制，因为:hover将<a>链接到<li>标记：

#top-menu > ul > li > a:hover { 
color: #fff;
background-color: #4b4b4b;
text-shadow: -1px -1px 0 #000;
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.9);
box-shadow: inset 0 0 10px rgba(0,0,0,0.9); }

您可以将css更改为：

#top-menu > ul > li:hover {
color:#fff;
background-color:#4b4b4b;
text-shadow:-1px -1px 0 #000;
-moz-box-shadow:inset 0 0 10px rgba(0,0,0,0.9);
-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,0.9);
box-shadow:inset 0 0 10px rgba(0,0,0,0.9);
}

使CSS渐变扩展到阻止？

4 个答案: