Menu code affects C5 editing interface

Permalink August 26, 2013 at 10:59 PM

I have a hard coded menu using css but it is scrambling the C5 dashboard and editing dialog boxes.

/* DROPDOWN MENU*/ 
#drop-nav li ul li {
   border-top: 0px;
}
ul {
   color: #fff; 
   list-style: none;
   padding: 0px;
   margin: 0px; 
   width: 900px;
}
ul li {
  display: block;
  position: relative;
  float: left;

Viewing 15 lines of 44 lines. View entire code block.

 
/* DROPDOWN MENU*/ 
#drop-nav li ul li {
   border-top: 0px;
}
 
ul {
   color: #fff; 
   list-style: none;
   padding: 0px;
   margin: 0px; 
   width: 900px;
}
 
ul li {
  display: block;
  position: relative;
  float: left;
}
 
  li ul {
  display: none; 
  width: 100px;
}
 
  ul li a {
  display: block; 
  padding: 5px 10px 3px 10px;
  text-decoration: none;
   /*white-space: nowrap;*/ 
   color: #fff;}
  /*ul li a:hover {background: #b74718;}*/
li:hover ul {
     display: block; 
     position: absolute;
}
 
li:hover li {
  float: none;
}
 
li:hover a {
  background: #b74718; 
  color: #fff; 
  text-decoration: none;
}
 
li:hover li a:hover {
  background: #e9e3db; 
  color: #b74718; 
  text-decoration: none;
}

How can I resolve this please?

ronyDdeveloper replied on Aug 27, 2013 at 1:32 am Permalink Reply

You should use css hierarchy. Like if you have a div wrapped your menu, then put a unique ID on that div.
e.g.

<div id="static_nav">
Menu ul li goes here ......
</div>

Then write down the css like

/* DROPDOWN MENU*/ 
#static_nav #drop-nav li ul li {
   border-top: 0px;
}
#static_nav ul {
   color: #fff; 
   list-style: none;
   padding: 0px;
   margin: 0px; 
   width: 900px;
}
#static_nav ul li {
  display: block;
  position: relative;
  float: left;

Viewing 15 lines of 45 lines. View entire code block.

 
/* DROPDOWN MENU*/ 
#static_nav #drop-nav li ul li {
   border-top: 0px;
}
 
#static_nav ul {
   color: #fff; 
   list-style: none;
   padding: 0px;
   margin: 0px; 
   width: 900px;
}
 
#static_nav ul li {
  display: block;
  position: relative;
  float: left;
}
 
#static_nav li ul {
  display: none; 
  width: 100px;
}
 
#static_nav ul li a {
  display: block; 
  padding: 5px 10px 3px 10px;
  text-decoration: none;
  /*white-space: nowrap;*/ 
  color: #fff;
}
/* #static_nav ul li a:hover {background: #b74718;}*/
#static_nav li:hover ul {
     display: block; 
     position: absolute;
}
 
#static_nav li:hover li {
  float: none;
}
 
#static_nav li:hover a {
  background: #b74718; 
  color: #fff; 
  text-decoration: none;
}
 
#static_nav li:hover li a:hover {
  background: #e9e3db; 
  color: #b74718; 
  text-decoration: none;
}