Question

我的下拉菜单有两个问题，一个涉及链接，另一个涉及IE7问题。问题之后是代码，在这两种情况下，我都试图避免使用javascript（项目的一个关键部分）

我在悬停时成功突出显示链接的文字，包括上方，下方和左侧的一些像素。对。但是，可点击的突出显示的唯一部分（即我可以访问超链接的地方）是文本所在的位置，并且我希望能够使整个突出显示，填充和文本可以被点击。我之前已经完成了，但我对当前有关如何修复它的代码感到困惑。有人可以帮帮我吗？
使用相同的下拉菜单，一切正常，IE7除外。一些IE7用户抱怨说，一旦他们突出显示菜单项并且下拉菜单出现，他们只会在下拉菜单消失之前达到第二项，并且每次下拉菜单都会这样做。我知道这是IE7的一个问题，但我需要解决它。有什么帮助吗？

我的CSS代码：

ul                          { list-style: none; }
p                           { margin: 8px 0; }
ul.dropdown                 { list-style-type:none;height:24px; top:2px; padding:0px 0px 0px 0px;;margin:0px 0px 0 1px;vertical-align:bottom; color:#000000; position: relative; }
ul.dropdown a:hover         { color: #000; }
ul.dropdown a:active        { color: #ffa500; }
ul.dropdown li              { float: left; position:relative; vertical-align:middle; background-position:0 -40px; padding: 2px 4px 5px 2px; margin-right:6px;}
ul.dropdown li a            { display: block; padding: 0px 0px; color: #222; text-decoration:none; vertical-align:middle; width:100%;}
ul.dropdown li:last-child a { border-right: none; }
ul.dropdown li.hover,
ul.dropdown li:hover        { background: #F3D673; color: black; position: relative; }
ul.dropdown li.hover a      { color: black; }

ul.dropdown ul              { width: 152px; visibility: hidden; position: absolute; top: 100%; left: -40px; z-index:60;}
ul.dropdown ul li           { font-weight: normal; background: #ECEAD8; color: #000; width:100%;/*border-bottom: 1px solid #ccc;*/ float: none; }
ul.dropdown ul li.nohover   { color: black; background: #ECEAD8; position:relative; }

ul.dropdown ul li a         { border-right: none; width: 100%; display: inline-block; min-height:1.4em;} 

ul.dropdown ul ul           { left:72.7%;top: 0px; width:158px; z-index:50; display:inline-block;}
ul.dropdown li:hover > ul   { visibility: visible; display:block; }

#arrowRight                 { float:right; margin-top:-11px;}
a.moreItems {background: url(/images/menu/arrow_r.gif) no-repeat right;}

以下是HTML代码：

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel=stylesheet type="text/css" href="menustylesheet.css">
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td height="25" class="topmenu" bgcolor="##ECEAD8" nowrap>
<ul class="dropdown">
    <li><a href=""><b>Item 1</b> <img src="/images/menu/arrow_d.gif" border="0" height="7" width="7"></a>
        <ul>
            <li><a class="moreItems" href="">Item 1-1</a>
                <ul>
                    <li><a href="">Item 1-1-1</a></li>
                </ul>
            </li>
            <li><a class="moreItems" href="">Item 1-2</a>
                <ul>
                    <li><a href="">Item 1-2-1</a></li>
                </ul>
            </li>

            <li>Item 1-3 <div style="vertical-align:middle;"><img src="/images/menu/arrow_r.gif" id="arrowRight" border="0"></div>
                <ul>
                    <li><a href="">Item 1-3-1</a></li>
                    <li><a href="">Item 1-3-2</a></li>
                </ul>
            </li>
            <li><a href="">Item 1-4</a></li>
            <li><a href="">Item 1-5</a></li>
    </ul>
    </li>
</ul>

        </td>
    </tr>
    <tr><td bgcolor="##c0c0c0" style="height:1px;"></td></tr>
</table>
</body>
</html>

如果之前已经回答过，我很抱歉，但我希望有人能够确定我需要更改或修改代码的位置以使其正常工作。

Answer 1

我对你的第一个问题有一个答案。在做这种菜单时。我尽可能远离填充物。我发现使用边距更容易，但对于初学者来说，让我们看看我为你构建的页面：

http://www.albatrossfonts.com/stack/ulbuttons.html

我将在下面解释此代码。这是我的HTML：

<div id="wrapper">

    <ul class="dropdown">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 1</a></li>
    </ul>

</div>

CSS：

.dropdown 
{
    width: 200px;
    display:block;
    margin: 200px auto 0 auto;
    list-style-type: none;
    padding: 0;
}

.dropdown li
{
    width: 200px;
    height: 44px;
    display: block;
    float: left;
    margin: 1px 0 0 0;
    list-style-type: none;
    padding: 0;
}

.dropdown li a:link, .dropdown li a:visited 
{
    width: 200px;
    height: 44px;
    display: block;
    float: left;
    margin: 0;
    color: #ffffff;
    background-color: #666666;
    text-decoration: none;
    text-indent: 12px;
    line-height: 44px;
}

.dropdown li a:hover
{
    background-color: #333333;
}

请注意，我声明了一个：link，而不只是一个。我还声明了：访问过，因为我希望访问状态与原始状态相同。

在.dropdown条目中，我只是定义了列表的宽度（ul）并使其正确显示。

在.dropdown li条目中，我设置每个列表项的宽度和高度，删除项目符号，并设置显示和浮动以使它们显示为一个框。没有填充物。只是一个盒子。

在.dropdown li a：link，。dropdown li a：visited条目中，我们实际上在做的是用链接“填充”我们的列表项框，我们可以将链接定义为盒子也是。所以我将链接的尺寸设置为与我们的li完全相同的尺寸（这是使整个框可点击的原因）。然后设置显示和浮动，背景颜色，文本颜色，或简单地“颜色。”

为了让您的文字在中心，您不应该使用vertical-align。使用line-height，并将其设置为与li元素相同的高度。这将使文本垂直居中。

要控制文本水平显示的位置，请设置text-indent属性，使用text-align。在这个例子中，我使用了text-indent。

最后，我们定义a：hover状态。重要的是要记住，您真正需要在此定义的唯一内容是实际更改的任何属性。在这种情况下，背景颜色。

如果您想为鼠标按下事件添加状态，则可以执行以下操作：

.dropdown li a:active
{
    background-color: #000000;
    text-indent: 20px;
}

///////////编辑////////////

以下是如何将单个css样式用于多个菜单或子菜单。

html为2个单独的ul：

<ul class="dropdown">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 1</a></li>
</ul>

<ul class="dropdown">
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 1</a></li>
</ul>

CSS :(保持不变，因为你将它们分配给了“下拉列表”。

.dropdown 
    {
        width: 200px;
        display:block;
        margin: 200px auto 0 auto;
        list-style-type: none;
        padding: 0;
    }

.dropdown li
{
    width: 200px;
    height: 44px;
    display: block;
    float: left;
    margin: 1px 0 0 0;
    list-style-type: none;
    padding: 0;
}

.dropdown li a:link, .dropdown li a:visited 
{
    width: 200px;
    height: 44px;
    display: block;
    float: left;
    margin: 0;
    color: #ffffff;
    background-color: #666666;
    text-decoration: none;
    text-indent: 12px;
    line-height: 44px;
}

.dropdown li a:hover
{
    background-color: #333333;
}

如果您想为孩子ul应用您的样式，请执行以下操作：

<ul class="dropdown">
     <li><a href="#">Button 1</a>
          <ul>
               <li><a href="#">subButton 1</li>
               <li><a href="#">subButton 2</li>
               <li><a href="#">subButton 3</li>
          </ul>
     </li>
     <li><a href="#">Button 1</a></li>
     <li><a href="#">Button 1</a></li>
</ul>

您只需将您的样式添加到包含子ul和子ui li，如下所示;其中.dropdown实际上代表你的第一个ul。所以.dropdown（ul） - ＆gt; li（“下拉列表”无序列表中的列表项） - ＆gt; ul（ul inside drop down li） - ＆gt; li（li down drop ul ul ul）

很抱歉，如果这听起来有点令人困惑，但换句话说，如果您没有将一个类分配给您的父级ul，那么访问子列表中的列表项将非常简单。

.dropdown, dropdown li ul
{
    width: 200px;
    display:block;
    margin: 200px auto 0 auto;
    list-style-type: none;
    padding: 0;
}

.dropdown li, .dropdown li ul li
{
    width: 200px;
    height: 44px;
    display: block;
    float: left;
    margin: 1px 0 0 0;
    list-style-type: none;
    padding: 0;
}

.dropdown li a:link, .dropdown li a:visited, .dropdown li ul li a:link, .dropdown li ul li a:visited
{
    width: 200px;
    height: 44px;
    display: block;
    float: left;
    margin: 0;
    color: #ffffff;
    background-color: #666666;
    text-decoration: none;
    text-indent: 12px;
    line-height: 44px;
}

Answer 2

http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml

^这在很多场合帮助我找到IE的解决方法。

UL下拉菜单问题

2 个答案: