html - 在 CSS 中为 Sharepoint 2010 内容编辑器添加第三层下拉菜单

标签 html css sharepoint menu

当插入到 SharePoint 2010 中的内容编辑器 Web 部件时，此代码按预期工作以生成水平下拉菜单。我一直在努力让第三级子菜单工作。我对 CSS 和 HTML 还很陌生，我在网上尝试了很多方法，但由于我并不真正理解我在做什么，所以很难让它与现有代码一起工作。我只希望其中一个菜单项在单击/悬停时直接在其右侧显示第三个子菜单，颜色与其他菜单等相同。感谢您提前提供的任何帮助。

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
    
.navigation ul {
    list-style-type: none;
    margin: 0px 5px 0px 5px;
    padding: 0;
    overflow: hidden;
    background-color: #008080;
    color: white;
}

.navigation li {
    float: left;
    font-family: Calibri;
    font-size: 12pt;
    color: white;
}

.navigation li a, .dropbtn {
    display: inline-block;
    color: white; !important
    text-align: center;
    padding: 12px 20px;
    text-decoration: none;
    font-family: Calibri;
    font-size: 12pt;
}

.navigation li a:link, .dropdown:hover .dropbtn {
    color: white;
}

.navigation li a:visited, .dropdown:hover .dropbtn {
    color: white;
}

.navigation li a:hover, .dropdown:hover .dropbtn {
    background-color: White;
    color: black;
}

.navigation li.dropdown {
    display: block;
}

.navigation .dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 115px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    font-family: Calibri;
    font-size: 12pt;
}

.navigation .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: Calibri;
    font-size: 12pt;
}

.navigation .dropdown-content a:link {color:#292929}
.navigation .dropdown-content a:visited {color: #292929}

.navigation .dropdown-content a:hover {background-color: #595959; color: white}
.navigation .dropdown-content a:active {color: white}

.navigation .dropdown:hover .dropdown-content {
    display: block;
    background-color: #bddbdb;
color: white;
}

</style>
</head>

<body>
<div class="navigation">
<ul>

<li class="dropdown"><a class="dropbtn">Home</a>  <div class="dropdown-content">
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Home.png" width="30" align="middle" border="none">&nbsp;&nbsp;I  I</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Home.png" width="30" align="middle" border="none">&nbsp;&nbsp; S RV</a>
		</div>
</li>
<li class="dropdown"><a class="dropbtn">MA</a>  <div class="dropdown-content">

		<a href="#"><img src="http://to/ts/Icons/011.png" width="25" align="middle" border="none">&nbsp;&nbsp;S P</a>
		<a href="#"><img src="http://to/ts/Icons/1371.png" width="25" align="middle" border="none">&nbsp;&nbsp;S S</a>
		<a href="#"><img src="http://to/ts/Icons/020.png" width="25" align="middle" border="none">&nbsp;&nbsp;D I</a>
		<a href="#"><img src="http://to/ts/Icons/004.png" width="25" align="middle" border="none">&nbsp;&nbsp;D P</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">Files</a>  <div class="dropdown-content">
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Files.png" width="25" align="middle" border="none">&nbsp;&nbsp;2020</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Files.png" width="25" align="middle" border="none">&nbsp;&nbsp;2019</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Files.png" width="25" align="middle" border="none">&nbsp;&nbsp;2018</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Files.png" width="25" align="middle" border="none">&nbsp;&nbsp;2017</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Files.png" width="25" align="middle" border="none">&nbsp;&nbsp;2016</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Files.png" width="25" align="middle" border="none">&nbsp;&nbsp;2015</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">O C</a>  <div class="dropdown-content">
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Ot147.png" width="25" align="middle" border="none">&nbsp;&nbsp;OOC</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/O1222.png" width="25" align="middle" border="none">&nbsp;&nbsp;PRS</a>
</div>
</li>
<li class="dropdown"><a class="dropbtn">ans</a>  <div class="dropdown-content">
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/n.png" width="25" align="middle" border="none">&nbsp;&nbsp;AN</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/PNQR122.png" width="25" align="middle" border="none">&nbsp;&nbsp;I & M</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Plq.png" width="25" align="middle" border="none">&nbsp;&nbsp;CP</a>
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/Pn.png" width="25" align="middle" border="none">&nbsp;&nbsp;RST</a>					
</div>
</li>
<li class="dropdown"><a class="dropbtn">D L</a> <div class="dropdown-content">
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/F.png" width="25" align="middle" border="none">&nbsp;&nbsp;TD</a>	
</div>
</li>
<li class="dropdown"><a class="dropbtn">RP</a> <div class="dropdown-content">
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/E.png" width="25" align="middle" border="none">&nbsp;&nbsp;CT</a>	
		<a href="#"><img src="http://sharepoint/GSites/Services/Shared%20documents/OP_Images/C.png" width="25" align="middle" border="none">&nbsp;&nbsp;S C</a>		  		
</div>
</li>
</ul>
</div>

</body>
</html>

最佳答案

试试这个(基于this demo ), 添加限制以不影响其他 SharePoint 元素。

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        #MyNav ul {
            position: absolute;
            margin: 0;
            list-style: none;
            background: rgb(22, 160, 133);
        }

        #MyNav li {
            display: inline-block;
            padding: 5px 10px;
            position: relative;
        }

            #MyNav li:hover > ul {
                display: block;
            }

        #MyNav ul ul {
            position: absolute;
            display: none;
            margin: 0;
            padding: 5px 10px;
        }

            #MyNav ul ul li {
                display: block;
            }

            #MyNav ul ul ul {
                position: absolute;
                top: 0;
                left: 100%;
            }
        /*************
        * EXTRA CSS
        *************/
        #MyNav a {
            color: #FFF;
            text-decoration: none;
        }

            #MyNav a:hover {
                border-bottom: 1px dashed #FFF;
            }
    </style>
</head>

<body>
    <div id="MyNav">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li>
                <a href="#">Tutoriais</a>
                <ul>
                    <li><a href="#">Php</a></li>
                    <li><a href="#">Java</a></li>
                    <li>
                        <a href="#">SQL</a>
                        <ul>
                            <li><a href="#">PostgreSQL</a></li>
                            <li><a href="#">MySql</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Redes Sociais</a>
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                </ul>
            </li>
            <li><a href="#">Sobre</a></li>
        </ul>
    </div>

</body>
</html>

enter image description here

更新:

添加更多节点供您引用。

<!DOCTYPE html>
<html>
<head>

    <style type="text/css">
        #MyNav ul {
            position: absolute;
            margin: 0;
            list-style: none;
            background: rgb(22, 160, 133);
        }

        #MyNav li {
            display: inline-block;
            padding: 5px 10px;
            position: relative;
        }

            #MyNav li:hover > ul {
                display: block;
            }

        #MyNav ul ul {
            position: absolute;
            display: none;
            margin: 0;
            padding: 5px 10px;
        }

            #MyNav ul ul li {
                display: block;
            }

            #MyNav ul ul ul {
                position: absolute;
                top: 0;
                left: 100%;
            }
        /*************
        * EXTRA CSS
        *************/
        #MyNav a {
            color: #FFF;
            text-decoration: none;
        }

            #MyNav a:hover {
                border-bottom: 1px dashed #FFF;
            }
    </style>
</head>

<body>
    <div id="MyNav">
        <ul>
            <li><a href="#">Inicio</a></li>
            <li>
                <a href="#">Tutoriais</a>
                <ul>
                    <li><a href="#">Php</a></li>
                    <li><a href="#">Java</a></li>
                    <li>
                        <a href="#">SQL</a>
                        <ul>
                            <li><a href="#">PostgreSQL</a></li>
                            <li><a href="#">MySql</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Redes Sociais</a>
                <ul>
                    <li>
                        <a href="#">Facebook</a>
                        <ul>
                            <li><a href="#">ChildNode1</a></li>
                            <li><a href="#">ChildNode2</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Twitter</a>
                        <ul>
                            <li><a href="#">Twitter1</a></li>
                            <li><a href="#">Twitter2</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Sobre</a></li>
        </ul>
    </div>

</body>
</html>

关于html - 在 CSS 中为 Sharepoint 2010 内容编辑器添加第三层下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59133062/

上一篇：html - 部分中的全宽 Youtube 视频背景

下一篇：html - 下拉菜单将鼠标悬停在上方时将其他链接向下推

相关文章：

jquery - 使用 Javascript 突出显示多个 HTML 元素

html - 为什么 float 和 inline-block 会导致不同的垂直类型？

html - 允许将任意外部样式表嵌入到我的网页中是否安全？

performance - 您采取什么步骤来提高Sharepoint网站的性能？

sharepoint - 使用客户端对象模型获取已安装应用程序列表

sharepoint - 客户端对象模型 Sharepoint 如何获取实例 ID

JavaScript 超时 div

javascript - 如何使用 Javascript 添加并使用 Div 作为总计算器？

css - 复杂的粘性页脚和 100% 内容高度

html - 设置固定列宽不适用于 Bootstrap 3

©2024 IT工具网  联系我们