html - 下拉菜单栏

标签 html css drop-down-menu menu

显然，当我从左侧进入菜单中的列表时，文本变为黑色，背景变暗，但是当我从右侧执行此操作时，文本仍然是白色。此外，当我调整页面大小并使其变小时，菜单标题中的单词会彼此聚合。我希望页面在调整窗口大小时保持静态，如 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;
}

最佳答案

使用 fiddle 时，您没有将 li 元素居中，这不会将 a 元素拉伸(stretch)到全宽。您需要更改此 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>

关于html - 下拉菜单栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37870737/

上一篇：javascript - mailto 不适用于大正文内容

下一篇：html - 如何为慈善网站设置搜索选项

相关文章：

javascript - 两个html时间输入之间的区别

iphone - iPhone/Android 专用 CSS

css 背景在 safari 中不起作用

jQuery Animate ScrollTop 不适用于 Zurb Foundation

css - Bootstrap 样式表的正确顺序

html - 下拉菜单中无法获得的元素ie8

java - 如何在 Java Swing 工具栏中创建 "Drop-Down"菜单？

asp.net - 在 ASP.NET 中，我可以将一堆下拉列表转换为下拉列表数组吗？

javascript - 你将如何使用 JS 组织 UI 状态？

jquery - 如何计算 ajax 响应中的表行总数？如何为该表创建搜索字段？

©2024 IT工具网  联系我们