Question

我正在使用本网站的菜单系统 CSS/Jquery Menu

在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>

Menu.css

.memu {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

.memu ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    left: -9999px;
    margin-left: 20px;
    width: 150px;

    -moz-box-shadow: 3px 2px 3px #333;
    -webkit-box-shadow: 3px 2px 3px #333;
    box-shadow: 3px 2px 3px #333;
}
.memu ul ul {
    margin-left: 0px;
    margin-top: 0px;

}
.memu a {
    background: #fff;
    background-color: rgba(255, 255, 255, 0.98);
    border: 1px solid #f7f7f7;
    color: #333;
    display: block;
    font: bold 12px/25px segoe ui,verdana,sans-serif;
    margin: 0 -1px -1px 0;
    padding-left: 10px;
    text-decoration: none;
    width: 139px;
    text-overflow: ellipsis;
}

.memu .memu-icon {
    position: relative;
    width: 16px; 
    height: 16px; 
    margin: 4px 10px 0px 0px;
    float: left;
}

.memu li.memu-root > a {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 1px solid transparent !important;
    border-bottom: 1px solid transparent !important;
    background: transparent !important;
}

.memu li {
    float: left;
}
.memu li.has-children > a {
    background: url("arrow.png") no-repeat scroll #fff;
    background-position: 130px center;
    background-color: rgba(255, 255, 255, 0.98);
}
.memu li:hover {
    position: relative;
    z-index: 100;
}
.memu li:hover > a {
    background-color: #fff;
    border-color: #fafafa;
    color: #56789A;
}
.memu li:hover > ul {
    left: -20px;
    opacity: 1;
    top: 26px;
    z-index: -1;
}
.memu li:hover li:hover > ul {
    left: 150px;
    opacity: 1;
    top: 0px;
    z-index: 100;
}

.memu-current {
    background-color: rgba(0, 0, 0, 0.98 !important) !important;
    }

New.aspx（带文本框）

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="New.aspx.vb" Inherits="BudgetApplicationWeb._New" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div>
    <asp:TextBox runat="server" ID="t1"></asp:TextBox>
    </div>

</asp:Content>

照片： Chrome Top IE9 Bottom

要求的HTML呈现：

    <!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><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>
    </head>
    <body>
        <form method="post" action="New.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNjI0NjY1NDA2ZGTedvbVstQSjEJlNsWGzH7rlBfvau1o6GnEDrB7goLkfg==" />
</div>

<div class="aspNetHidden">
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgKfvIywCgKp3sDPDCUOCLNtdSKEDWUr5o+bR23FLTplesWTeKeRUvhXZp/Y" />
</div>
        <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>
            <div class="main">
        <div>
        <input name="ctl00$MainContent$t1" type="text" id="MainContent_t1" />
        </div>
            </div>
            <div class="clear">
            </div>
        <div class="footer">
        </div>
        </form>
    </body>
    </html>

Answer 1

替换

<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>

Answer 2

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>

Answer 3

我可能已经解决了它在css就行了

.memu li {
float: left;
}

所以我添加了一个

.main {
 clear: left;
 }

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

简单的CSS菜单问题

3 个答案: