1

我正在尝试创建一个子菜单，其中项目至少与父项目一样宽，除非文本更长，然后我希望它拉伸到文本宽度。我试过添加一个宽度元素，但这似乎并没有将背景颜色拉伸到我指定的宽度，所以我有点不确定如何做到这一点。我的菜单 html 是

<ul class="a">
<li><a href="index.php">Home</a></li>
<li><a href="/">Menu Item 1</a>
    <ul class="subMenu">
        <li><a href="/">Submenu Item</a></li>
    </ul>
    </li>
<li><a href="/">Menu Item 2</a>
    <ul class="subMenu">
        <li><a href="/">Submenu Item 1</a></li>
        <li><a href="/">Submenu Item 1</a></li>
    </ul>
    </li>
<li><a href="/">Menu Item 3</a></li>
<li><a href="/">Menu Item 4</a></li>
</ul>

和对应的css

ul
{
text-align:center;
list-style-type:none;
margin:1em 0px 0px;
padding:0px;
display:block;
z-index:1;
height:1em;
}
li
{
display:inline-block;
float:left;
margin:0px 0px 0px;
position:relative;
}
a
{
cursor: pointer;
text-decoration: none;
padding: .5em 2em .55em;
-webkit-box-shadow: 0 0px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 0px 2px rgba(0,0,0,.2);
box-shadow: 0 0px 2px rgba(0,0,0,.2);
color: #000000;
border: solid 1px #0f7a6c;
background: #0f7a6c;
background: -webkit-gradient(linear, left top, left bottom, from(#1b7a6d), to(#53a499));
background: -moz-linear-gradient(top,  #1b7a6d,  #53a499);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b7a6d', endColorstr='#53a499');
font-weight:bold;
}
a:hover
{
text-decoration: none;
background: #0f7a6c;
background: -webkit-gradient(linear, left top, left bottom, from(#53a499), to(#1b7a6d));
background: -moz-linear-gradient(top,  #53a499,  #1b7a6d);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#53a499', endColorstr='#1b7a6d');
}
a:active
{
position: relative;
top: 1px;
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#49a397), to(#097a6b));
background: -moz-linear-gradient(top,  #49A397,  #097a6b);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#49A397', endColorstr='#097a6b');
}
.subMenu
{
visibility:hidden;
position:absolute;
}
.a li:hover .subMenu
{
visibility:visible;
position:absolute;
opacity:1;
height:1em;
}
.subMenu li
{
float:left;
margin:0px 0px 1em;
position:relative;
}
4

0 回答 0