html – 使所有>宽度与最宽的相同_html-js-css

概述我有这个菜单设置为内联并有下拉菜单. 内部ul有背景. 每个下拉列表都有一个：hover,用于更改li的背景： <div id="navMain"> <ul> <li><a href="#nogo">Forside</a> <ul> <li><a href="#nogo">1111111111111</a></li> 我有这个菜单设置为内联并有下拉菜单.
内部ul有背景.
每个下拉列表都有一个：hover,用于更改li的背景：

<div ID="navMain">    <ul>        <li><a href="#nogo">ForsIDe</a>            <ul>                <li><a href="#nogo">1111111111111</a></li>                <li><a href="#nogo">link 1-2</a></li>                <!-- etc. -->            </ul>        </li>        <li><a href="#nogo">Om Os</a>            <ul>                <li><a href="#nogo">link 2-1</a></li>                <li><a href="#nogo">link 2-2</a></li>                <!-- etc. -->            </ul>        </li>        <li><a href="#nogo">link 3</a>            <ul>                <li><a href="#nogo">link 3-1</a></li>                <li><a href="#nogo">link 3-2</a></li>                <!-- etc. -->            </ul>        </li>    </ul></div>

问题是,当其中一个子菜单比其他子菜单长时,它只会扩展自己,而不是其他的子菜单.
这导致：悬停效果具有不同的长度.

那么我如何让每个内部ul中的所有li都与最宽的那个相同？

如果需要,Here you can find the CSS.

解决方法这里.请注意,我在菜单li中添加了一个类,并且我在CSS中添加了一个正文背景,因为我无法注意到你的菜单.最后,通过使li元素100％宽度来完成技巧

<HTML><head><style>body{background-color:green;}.menu li{wIDth:100%}#navMain {}#navMain ul {    padding:0;    margin:0;    z-index: 2;}#navMain ul li {    margin-right: 5px;    text-align:center;}#navMain li a {    display: block;    text-decoration:none;    color: white;    padding-left: 10px;    padding-right:10px;}#navMain li a:hover{    background-color: black;}#navMain ul li:last-child {    margin-right: 0px;}#navMain li {    position: relative;    float: left;    List-style: none;    margin: 0;    padding:0;    Font-size: 17px;    Font-weight: bold;    color:#fff;}#navMain ul ul {    position: absolute;    top: 20px;    visibility: hIDden;    background-image: url(img/AlphaBg.png);}#navMain ul li ul li {    Font-size: 12px;    margin-right: 0px;    text-align: left;}#navMain ul li ul li:first-child {    padding-top:5px;}#navMain ul li:hover ul{    visibility:visible;}</style></head><body><div ID="navMain">            <ul>                <li><a href="#nogo">ForsIDe</a>                    <ul >                        <li><a href="#nogo">1111111111111</a></li>                        <li><a href="#nogo">link 1-2</a></li>                        <li><a href="#nogo">link 1-3</a></li>                        <li><a href="#nogo">link 1-3</a></li>                        <li><a href="#nogo">link 1-3</a></li>                        <li><a href="#nogo">link 1-3</a></li>                    </ul>                </li>                <li><a href="#nogo">Om Os</a>                    <ul  >                        <li><a href="#nogo">link 2-1</a></li>                        <li><a href="#nogo">link 2-2</a></li>                        <li><a href="#nogo">link 2-3</a></li>                    </ul>                </li>                <li><a href="#nogo">link 3</a>                    <ul  >                        <li><a href="#nogo">link 3-1</a></li>                        <li><a href="#nogo">link 3-2</a></li>                        <li><a href="#nogo">link 3-3</a></li>                    </ul>                </li>            </ul>        </div></body></HTML>

总结

以上是内存溢出为你收集整理的html – 使所有>宽度与最宽的相同全部内容，希望文章能够帮你解决html – 使所有>宽度与最宽的相同所遇到的程序开发问题。

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

欢迎分享，转载请注明来源：内存溢出

原文地址:https://www.54852.com/web/1067248.html