0

我正在尝试（在某种程度上）复制该主题顶部菜单栏的外观：http: //elegantthemes.com/preview/Lucid/

我正在努力的部分是让我借用<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; }

为什么渐变仅限于文本，而不是由填充、边距等组成的整个区域？

提前致谢。

4

4 回答 4

2

我对你的 CSS 做了一些更改。我想这就是你要找的。

现场演示

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;
}
于 2013-04-24T09:07:11.080 回答
2

首先你有渐变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。

李示例：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 是您想要样式的元素，并且可以“全部”点击。

于 2013-04-24T09:04:59.527 回答
1

它仅在文本中受到限制，因为将not: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);
}
于 2013-04-24T09:05:35.933 回答
1

您只为 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/

于 2013-04-24T09:02:45.340 回答