Click here to Skip to main content
15,885,979 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Hello everyone, I am facing the following problem with Sharepoint 2013
I've put code in a content editor to create a drop menu, this works but my text won't show black even though it's written that way in the script and when I go over other parts of the site it takes over the background color that is in the code, this is of course not allowed

This is the code that I used in the content editor :
HTML
  1  <html>
  2  <head>
  3  <style>
  4  .parent {
  5      display: block;
  6      position: relative;
  7      float: left;
  8      line-height: 50px;
  9      background-color: #317612;
 10      border-right: #CCC 1px solid;
 11      text-align: center;
 12      vertical-align: middle;
 13  }
 14  .parent a{
 15      margin-top: 50px;
 16      margin-right: 50px;
 17      margin-left: 50px;
 18      margin-bottom: 50px;
 19      color: black;
 20      text-decoration: none;
 21      text-align: center;
 22      width: auto;
 23      font-size: 20px;
 24      font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
 25  }
 26  .parent:hover > ul {display:block;position:absolute;}
 27  .child {
 28      display: none;
 29  }
 30  .child li {
 31      background-color: #317612;
 32      line-height: 30px;
 33      border-bottom: #CCC 1px solid;
 34      border-right: #CCC 1px solid;
 35      width: 100%;
 36  }
 37  .child li a{
 38      color: #000000;
 39      font-size: 17px;
 40      text-align: center;
 41      border-spacing: 3px 0px;
 42      top: 12px;
 43      margin-top: 10px;
 44  }
 45  ul{list-style: none;margin: 0;padding: 0px; min-width:10em;}
 46  ul ul ul{left: 100%;top: 0;margin-left:1px;}
 47  li:hover {background-color: #389e37;}
 48  .parent li:hover {
 49      background-color: #389e37;
 50      text-align: center;
 51  }
 52  .expand{font-size:25px;float:right;margin-right:5px;}
 53  </style>
 54  </head>
 55  <body>
 56  <ul id="menu">
 57  		<li class="parent"><a href="#">Formation<span class="expand">&raquo;</span></a>
 58  		<ul class="child">
 59  		<li class="parent"><a href="#">S'inscrire ? <span class="expand">&raquo;</span></a>
 60  			<ul class="child">
 61  			<li><a href="#">Intern</a></li>
 62  			<li><a href="#">Extrne</a></li>
 63  			</ul>
 64  			</li>
 65  			<li class="parent"><a href="#">Staff <span class="expand">&raquo;</span></a>
 66  			<ul class="child">
 67  			<li><a href="#">Suivi</a></li>
 68  			<li><a href="#">Souhait</a></li>
 69  			</ul>
 70  			</li>
 71  			<li class="parent"><a href="#">1Cie <span class="expand">&raquo;</span></a>
 72  			<ul class="child">
 73  			<li><a href="#">Suivi</a></li>
 74  			<li><a href="#">Souhait</a></li>		
 75  			</ul>
 76  			</li>
 77  			<li class="parent"><a href="#">7Cie <span class="expand">&raquo;</span></a>
 78  			<ul class="child">
 79  			<li><a href="#">Suivi</a></li>
 80  			<li><a href="#">Souhait</a></li>		
 81  			</ul>
 82  			</li>
 83  			</ul>
 84  		<li class="parent"><a href="#">Candidat <span class="expand">&raquo;</span></a>
 85  		<ul class="child">			
 86  			<li><a href="#">Staff</a></li>
 87  			<li><a href="#">1Cie</a></li>
 88  			<li><a href="#">7Cie</a></li>
 89  			<li><a href="#">Template / Note </a></li>
 90  			</ul>
 91  			</li>
 92  			</ul>
 93  		<li class="parent"><a href="#">Exemption Particuliere</a>
 94  		<ul class="child">			
 95  			<li><a href="#">Staff</a></li>
 96  			<li><a href="#">1Cie</a></li>
 97  			<li><a href="#">7Cie</a></li>
 98  			</ul>
 99  			</li>
100  			</ul>
101  		<li class="parent"><a href="#">OAC</a>
102  		<li class="parent"><a href="#">No Acces</a>
103  	</ul>
104  	</li>
105  </ul>
106  </body>
107  </html>

Anyone have an idea what I did wrong?
thanks in advance for the help

What I have tried:

Not much, I don't know much about html code
Posted
Updated 20-Dec-22 9:07am
v2
Comments
Member 15627495 21-Dec-22 3:41am    
the css file is apply from top of the file to bottom. It's a sequential read and execution by the browser.

if the black color of your link is misunderstood , it's because a new css parameters comes over the "color:black;".
Maybe by overriding it, or by reseting it.

you have to debug your css, look for every tags about your "link color", and "links effects" on.

which color replace the color you want for link ?
Member 15627495 21-Dec-22 3:52am    
comment :

It's a tree/subtree menu by css ( only ) , congratulations !

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900