gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:11:42 25 4
gpt4 key购买 nike

当插入到 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/

25 4 0