Html 简单的CSS菜单问题_Html_Css

Html 简单的CSS菜单问题

html css

Html 简单的CSS菜单问题,html,css,Html,Css,我正在使用这个网站的菜单系统在chrome中，菜单显示良好，但我的主要内容（一个文本框）与菜单位于同一行在IE 9中，菜单甚至不能正确显示。第一个元素正确渲染，但其他两个元素（以及子菜单）显示为普通超链接注意：在兼容模式下，它显示正确，子菜单上的阴影缺失，但元素顺序正确，文本框仍在同一行上是否有人愿意查看我的代码并帮助我理解我所做的错误。我认为我精通HTML而不是CSS，我相信问题是。母版页： <%@ Master Language="VB" AutoEventWireup="

我正在使用这个网站的菜单系统

在chrome中，菜单显示良好，但我的主要内容（一个文本框）与菜单位于同一行

在IE 9中，菜单甚至不能正确显示。第一个元素正确渲染，但其他两个元素（以及子菜单）显示为普通超链接 注意：在兼容模式下，它显示正确，子菜单上的阴影缺失，但元素顺序正确，文本框仍在同一行上

是否有人愿意查看我的代码并帮助我理解我所做的错误。我认为我精通HTML而不是CSS，我相信问题是。母版页：

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="Site.master.vb" Inherits="BudgetApplicationWeb.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
    <title></title>
    <link href="Styles/memu-0.1.css" rel="stylesheet" type="text/css" />

        <style type="text/css" media="screen">


        pre { font-size: 0.6em; }

        .sprite-font_add { width: 16px; height: 16px; background:url(../famfamfam/css-sprite.png) no-repeat -0px -7216px; }
        .sprite-page_white { width: 16px; height: 16px; background:url(../famfamfam/css-sprite.png) no-repeat -0px -10048px; }

    </style>

    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">
    <div class="page">
            <ul class="memu js-enabled">
                <li class="memu-root">
                    <a href="#">Accounts</a>
                    <ul>
                        <li class="has-children">
                            <li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
                            <li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>                        
                            </li>
                        </ul>
                </li>
                <li class="memu-root">
                    <a href="#">Budget</a>              
                </li>
                <li class="memu-root">
                    <a href="#">Settings</a>
                    <ul>
                        <li><a href="#">Add Category</a></li>
                    </ul>
                </li>

            </ul>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server" />
        </div>
        <div class="clear">
        </div>
    <div class="footer">
    </div>
    </div>
    </form>
</body>
</html>

New.aspx（带文本框）

我可能已经在css中解决了这一问题

.memu li {
float: left;
}

所以我加了一个

.main {
 clear: left;
 }

这适用于除IE9之外的所有情况。不确定这是否是处理此问题的最佳方式。如果不正确，请继续评论。

替换

<li class="has-children">
 <li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
<li><a href="New.aspx"><div class="memu-icon sprite-font_add">/div>New</a></li>

对此

<li class="has-children">
<ul>
<li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
<li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>                        
</ul>
                            </li>

Chrome和Firefox正在修复您产生的语法错误：

<div class="page">
                <ul class="memu js-enabled">
                    <li class="memu-root">
                        <a href="#">Accounts</a>
                        <ul>
                            <li class="has-children">
                                </li><li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
                                <li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>                        

                            </ul>
                    </li>

                    <li class="memu-root">
                        <a href="#">Budget</a>              
                    </li>

                    <li class="memu-root">
                        <a href="#">Settings</a>
                        <ul>
                            <li><a href="#">Add Category</a></li>
                        </ul>
                    </li>
                </ul>
</div>

请给我们HTML。它比ASP更容易测试。我给了你html来代替它，这将很好地工作放置一个JSFIDLE，这将很好地遇到真正的问题JSFIDLE看起来像是因为包装而将框放在第二行上，但是如果您删除其中一个菜单项，您会看到框在同一行上，没有clear:left css这不是使用列表sytle的正确方法我们不能将li置于li之下，如果我们需要把李放在另一个李之下，我们必须把ul放在那个李之下，谢谢你的细节。我今晚会试试。这使它与Ie和chrome一起工作。。。我把li.has-children班取消了，让它成为ul.has-children来保存一个等级。非常感谢。

<li class="has-children">
 <li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
<li><a href="New.aspx"><div class="memu-icon sprite-font_add">/div>New</a></li>

<li class="has-children">
<ul>
<li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
<li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>                        
</ul>
                            </li>

<div class="page">
                <ul class="memu js-enabled">
                    <li class="memu-root">
                        <a href="#">Accounts</a>
                        <ul>
                            <li class="has-children">
                                </li><li><a href="#"><div class="memu-icon sprite-page_white"></div>View Transactions</a></li>
                                <li><a href="New.aspx"><div class="memu-icon sprite-font_add"></div>New</a></li>                        

                            </ul>
                    </li>

                    <li class="memu-root">
                        <a href="#">Budget</a>              
                    </li>

                    <li class="memu-root">
                        <a href="#">Settings</a>
                        <ul>
                            <li><a href="#">Add Category</a></li>
                        </ul>
                    </li>
                </ul>
</div>