0

I have created a own navigation by using html and css. I want to add this navigation to the seattle.html masterpage, I did this by copying the html code in the seattle.html masterpage.

My navigation appears and I can use it, but there is a little problem:

The drop down menu does not appear right, so it is a kind of transparent. You can see the problem in the image I've added. (If I add under my html code br the navigation appears better, but this is not a solution)

It would be very great if someone can help me, because I don't know how to solve this.

enter image description here

CSS CODE:

<Style>

#cssmenu {
background: #0072C6;
margin: 0;
width: auto; 
padding: 0;
line-height: 1;
display: block;
position: relative;
font-family: 'PT Sans', sans-serif;
}

#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul:after,
#cssmenu:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #5a5a5a;
}

#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}


#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: "";
height: 0;
width: 0;
border: 4px solid transparent;
border-left-color: #ffffff;
z-index: 2;
top: 15px;
right: 15px;
}

#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #5a5a5a;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,

#cssmenu ul li ul li.active > a {
color: #4cb6ea;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #4cb6ea;
}
#cssmenu ul li ul li:hover > ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul > li {
float: none;
display: inline-block;
}
#cssmenu.align-center > ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu > ul > li:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #5a5a5a;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}


#cssmenu > ul > li.has-sub > a:before {
display: block;
content: "";
border: 6px solid transparent;
border-top-color: #ffffff;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 16px;
top: 22px;
}


#cssmenu > ul > li > a {
color: #ffffff;
padding: 15px 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
z-index: 2;
position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #000000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
/* Schwarz*/
background: #000000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
/* Weiß*/
border-top-color: #ffffff;
}
#cssmenu > ul > li:hover > ul {
left: 0;
}
#cssmenu > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
}

HTML CODE:

    <link rel="stylesheet" href="styles.css">
   <title>CSS Menu</title>
<div id='cssmenu'>
<ul>
      <li class='last'><a href='#'><span>Menu &#9776;</span></a>
      <ul>
         <li class='last'><a href='#'><span>Unterseite 1</span></a>
         </li>
         <li class='last'><a href='#'><span>Unterseite 2</span></a>
         </li>
         <li class='last'><a href='#'><span>&emsp; &#8627 Unterseite 3</span></a>
         </li>
         <li class='last'><a href='#'><span>&emsp; &#8627 Unterseite 4</span></a>
         </li>
         <li class='last'><a href='#'><span>Unterseite 5</span></a>
         </li>
         <li class='last'><a href='#'><span>&emsp; &#8627 Unterseite 6</span></a>
         </li>
      </ul>
   </li>
   <li><a href='http://www.google.de/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Seite 1</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Unterseite 1</span></a>
            <ul>
               <li><a href='#'><span>Unter Unterseite 1</span></a></li>
               <li class='last'><a href='#'><span>Unter Unterseite 2</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Unterseite 2</span></a>
            <ul>
               <li><a href='#'><span>Unter Unterseite 1</span></a></li>
               <li class='last'><a href='#'><span>Unter Unterseite 2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>Seite 2</span></a></li>
   <li class='last'><a href='#'><span>Seite 3</span></a></li>
   <li><a href="#"><img src="../images/gb.png">Gästebuch</a></li>
</ul>
</div>
1
  • Has anyone any idea why the code in the masterpage does not work? Nov 21, 2015 at 12:39

1 Answer 1

0

I know the answer.

There are a few things very important: If you want to display the navigation into the ribbon you have to set the background in the ms-core-overlay It is verry recommend to display the navigation not in the ribbon, you better use the class="ms-core-overlay" if you put the navigation in this div everything works fine!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.