Question

显然，当我从左侧进入菜单列表时，文本变为黑色，背景变暗，但是当我从右侧进行操作时，文本仍为白色。此外，当我调整页面大小并使其变小时，菜单标题中的单词会相互收敛。我希望页面在调整窗口大小时保持静态，就像在http://www.nfl.com调整大小时一样。这是我的代码： HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
    <head>
     <meta content="text/html; charset=utf-8" />   
     <title>My Webpage</title>   
     <link href="styles.css" rel="stylesheet" type="text/css" />   
    </head>
    <body>
    <header>
        My Webpage</header>
    <div id="wrapper">
      <div id="navMenu">
        <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li> 
        </ul>
        </li>
      </ul>
      <br class ="clearFloat" />
      </div>    
    </div>
    <section>  
    Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
        a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
        a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
        ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
        al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
    </section> 
    </body>
</html>

CSS：

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
header{
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
#navMenu {
    margin: 0;
    padding: 0;
}
#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
}
#navMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background-color: #43a286;
    width:20%;
}
#navMenu ul li a {
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    height:32px;
    width:150px;
    display:block;
    color:#FFFFFF;
    text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
}
#navMenu ul li:hover ul {
    visibility:visible;
}
#navMenu ul li:hover li {
    display:block;
    width:100%;
}
#navMenu li:hover {
    background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
    color:#000000;
}
.clearFloat {
    clear:both;
    margin:0;
    padding:0;
}
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}

Answer 1

使用你的小提琴，你没有将li个元素居中，这些元素不会将a个元素拉伸到全宽。您需要更改此CSS选择器：

#navMenu ul li a {
    text-align:center;
    font-family:"Comic Sans MS", cursive;
    text-decoration:none;
    height:32px;
    width:100%;
    display:block;
    color:#FFFFFF;
    text-shadow:1px 1px 1px #000;
}

这将停止a标签的截止。这也是列表元素的中心，这可能是不可取的，但您可以构建和自定义。另外，除非您添加以下内容，否则下拉列表将不符合父级：

#navMenu ul li ul {
    width: 100%;
}

最后，要防止标签收敛，请在选项卡上设置min-width属性。这是一个任意数字，您可以根据自己的喜好进行更改。旁注，由于min-width会覆盖width，这会影响下拉列表。你可能想省略这个：

#navMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
    min-width: 500px;
}

我已经添加了一个编辑了JSFiddle代码的代码段：

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
header{
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    color: white;
    text-align: center;
}
#navMenu {
	margin: 0;
	padding: 0;
}
#navMenu ul {
	margin:0;
	padding:0;
	line-height:30px;
}
#navMenu li {
	margin:0;
	padding:0;
	list-style:none;
	float:left;
	position:relative;
	background-color: #43a286;
	width:20%;
}
#navMenu ul li a {
	text-align:center;
	font-family:"Comic Sans MS", cursive;
	text-decoration:none;
	height:32px;
	//width:150px;
  width: 100%;
	display:block;
	color:#FFFFFF;
	text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
	position:absolute;
	visibility:hidden;
	top:32px;
}
#navMenu ul li:hover ul {
	visibility:visible;
}
#navMenu ul li:hover li {
    display:block;
    width:100%;
}
#navMenu ul li ul {
  width: 100%;
}

#navMenu li:hover {
	background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
  color: #000000;
}
.clearFloat {
	clear:both;
	margin:0;
	padding:0;
}
section{
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}

     <title>My Webpage</title>   
    <body>
    <header>
        My Webpage</header>
    <div id="wrapper">
      <div id="navMenu">
        <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
        </ul>
        </li>
      </ul>
      <ul>
        <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li>
          <li><a href="#">Link Item</a></li> 
        </ul>
        </li>
      </ul>
      <br class ="clearFloat" />
      </div>    
    </div>
    <section>  
    Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
        a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
        a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
        ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
        al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
    </section> 
    </body>

下拉菜单栏

1 个答案: