个人中心
gpt4 book ai didi

html - 简单的 CSS 菜单问题

转载 作者：太空宇宙 更新时间：2023-11-04 05:08:53 25 4
gpt4 key购买 nike

我正在使用这个网站的菜单系统 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>

菜单.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>

最佳答案

替换

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

关于html - 简单的 CSS 菜单问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9797270/

25 4 0
文章推荐： python - 列表索引必须是整数或切片 python 3.6 list
文章推荐： python - 基于关键字搜索使用python从xml文件中提取值
文章推荐： python - 我如何删除 Pandas 中的过滤器数据(数据处理)
文章推荐： javascript - 插值时 LessCss 重复域？