html – CSS在列表项中定位div

概述我正在努力建立一个megamenu.所以我有一个无序列表,相对于它的容器定位. 其中包含链接的列表项.与容器div一起绝对定位. 我正在学习本教程：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ 然而,我想要做的是强制每个容器div为容器 我正在努力建立一个megamenu.所以我有一个无序列表,相对于它的容器定位.

其中包含链接的列表项.与容器div一起绝对定位.

我正在学习本教程：http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/

然而,我想要做的是强制每个容器div为容器的最大宽度…换句话说,如果你将鼠标悬停在第一个菜单项上,我需要得到的显示div为100％宽度的整个菜单,除了左对齐,而不是100％的包含li的宽度,并左对齐.

我怎样才能做到这一点？

这是当前存在的HTML和CSS,以及Jsfiddle上的链接

HTML

<ul ID="menu">  <li><a href="~/">Home Page</a></li>  <li><a href="#" onclick="return false;">About Us</a>    <div >      <p>5 Columns content</p>    </div>  </li>  <li><a href="#" onclick="return false;">Solutions</a>    <div >      <p>5 Columns content</p>    </div>  </li>  <li><a href="#" onclick="return false;">Customer Support</a>    <div >      <p>5 Columns content</p>    </div>  </li>  <li><a href="#" onclick="return false;">OrboNation</a>    <div >      <p>5 Columns content</p>    </div>  </li>  <li><a href="#" onclick="return false;">Business Partners</a>    <div >      <p>5 Columns content</p>    </div>  </li>  <li><a href="#" onclick="return false;">News &amp; Events</a>    <div >      <p>5 Columns content</p>    </div>  </li>  <li><a href="#" onclick="return false;">KNowledge Center</a>    <div >      <p>5 Columns content</p>    </div>  </li></ul>

CSS

#menu {      position:relative !important;    List-style:none;      wIDth:100%;    float:none;    clear:both;    margin:0;      height:43px;      padding:0;  /* Rounded Corners */      -moz-border-radius: 5px;      -webkit-border-radius: 5px;      border-radius: 5px;      /* Background color and gradIEnts */      background: #d9d9d9;      background: -moz-linear-gradIEnt(top,#ddd,#d9d9d9);      background: -webkit-gradIEnt(linear,0% 0%,0% 100%,from(#ddd),to(#d9d9d9));      /* borders */      border: 1px solID #002232;      -moz-Box-shadow:inset 0px 0px 1px #edf9ff;      -webkit-Box-shadow:inset 0px 0px 1px #edf9ff;      Box-shadow:inset 0px 0px 1px #edf9ff;  }  #menu li {      float:left;      display:block;      text-align:center;      position:relative;      padding: 4px 10px 4px 10px;      margin-right:10px;      margin-top:7px;      border:none;  }  #menu li:hover {      border: 1px solID #777777;      padding: 4px 9px 4px 9px;      /* Background color and gradIEnts */      background: #F4F4F4;      background: -moz-linear-gradIEnt(top,#F4F4F4,#EEEEEE);      background: -webkit-gradIEnt(linear,from(#F4F4F4),to(#EEEEEE));      /* Rounded corners */      -moz-border-radius: 5px 5px 0px 0px;      -webkit-border-radius: 5px 5px 0px 0px;      border-radius: 5px 5px 0px 0px;  } #menu li a {    Font-family:Arial,Helvetica,sans-serif;    Font-size:14px;     color: #333;    display:block;    outline:0;    text-decoration:none;    text-shadow: 1px 1px 1px #000;}#menu li:hover a {    color:#161616;    text-shadow: 1px 1px 1px #FFFFFF;}.dropdown_1columns,.dropdown_2columns,.dropdown_3columns,.dropdown_4columns,.dropdown_5columns,.dropdown_6columns,.dropdown_7columns {    wIDth:100% !important;    margin:4px auto;    position:absolute;    z-index:999;    left:-999em; /* HIDes the drop down */    text-align:left;    padding:10px 5px 10px 5px;    border:1px solID #777777;    border-top:none;        /* GradIEnt background */    background:#F4F4F4;    background: -moz-linear-gradIEnt(top,#EEEEEE,#BBBBBB);    background: -webkit-gradIEnt(linear,from(#EEEEEE),to(#BBBBBB));    /* Rounded Corners */    -moz-border-radius: 0px 5px 5px 5px;    -webkit-border-radius: 0px 5px 5px 5px;    border-radius: 0px 5px 5px 5px;}/*.dropdown_1columns {wIDth: 140px;}.dropdown_2columns {wIDth: 280px;}.dropdown_3columns {wIDth: 420px;}.dropdown_4columns {wIDth: 560px;}.dropdown_5columns {wIDth: 700px;}.dropdown_6columns {wIDth: 700px;}.dropdown_7columns {wIDth: 700px;}*/#menu li:hover .dropdown_1columns,#menu li:hover .dropdown_2columns,#menu li:hover .dropdown_3columns,#menu li:hover .dropdown_4columns,#menu li:hover .dropdown_5columns,#menu li:hover .dropdown_6columns,#menu li:hover .dropdown_7columns {    left:-1px;top:auto;}

链接到小提琴

http://jsfiddle.net/o7thwd/dZbPy/

我想要的是让每个下拉容器都是主菜单宽度的100％,但是左对齐

解决方法 当您从#menu li中移除position：relative时,子菜单div将绝对定位到#menu,请参阅更新的 JSFiddle. 总结

以上是内存溢出为你收集整理的html – CSS在列表项中定位div全部内容，希望文章能够帮你解决html – CSS在列表项中定位div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。