phpwcms Support Forum

Code: Select all

/* 27.06.07  Horizontales Menü mit einer horiz. Unterebene
   Navigation core    
  http://www.phpwcms.de/forum/viewtopic.php?p=88630#88630
  [EDIT 05.05.08 KH: ]
  - All ".navig" converted to ".navig ul"
  - Call: <div class="navig">{NAV_LIST_UL:,0,2,,selected}</div>
  [/EDIT]
*/

.navig {
   line-height: 1;
   margin: 0 0 1.2em -100px; /* -- EDIT --  */
   display: block;
   position: relative;
   width: 800px;  /*  -- EDIT --  */
}

/* remove all list stylings */
.navig ul, .navig ul ul {
   margin: 0;
   padding: 0;
   border: 0;
   list-style-type: none;
}

/* move all list items into one row, by floating them */
.navig ul li {
   margin: 0;
   padding: 0 1px;
   border: 0;
   display: block;
   float: left;
   background: url(../../picture/navi/menubg.gif) repeat-x;
}

/* initialy hide all sub menus */
.navig ul ul {
   width: 100%;
   display: block;
   visibility: hidden;
   position: absolute;
   clear: both;
   top: 1.8em;/* watch for this value! you must make sure that this value and value of line-height for the parent items are such that it is possible to move the mouse over to submenu */
   left: 0;
}

/* -- float.clear -- force containment of floated LIs inside of main UL */
.navig ul:after {
   content: ".";
   height: 0;
   display: block;
   visibility: hidden;
   overflow: hidden;

   clear: both;
}
/* -- float.clear.END --  */

.navig ul li.selected ul, .navig ul li:hover ul {
   visibility: visible;
}

.navig ul li.selected ul {
   z-index: 10;
}

.navig ul li:hover ul {
   z-index: 100;
}

/*      Navigation make-up    */

.navig ul {
   font-size: 12px;
   font-weight: bold;
   color: #000000;
   background: url(../../picture/navi/menubg.gif) repeat-x;
   margin: 0em auto 2em;
   padding: 0 1em;
   width: 550px;   /* this value should be close to what is needed for elements to stay on one line */
}

.navig ul a {
   color: #000000;
   text-decoration: none;
   padding: 1em 15px 1.05em; /*THIS DEFINES NAV LI HEIGHT*/
   display: block;
   text-transform: uppercase;
}

.navig ul li {
   margin: 0;
   /*border-right: 1px dotted #000000;*/
}
.navig ul li li{
border: 0px;
}

/* if the following selector was ".navig ul li:hover a" IE7 will NOT render nested UL! the reason is the background-color rule. */
.navig ul li:hover {
   color: #000;
   background-color: #dbd4a6; 

}
/* which is why the link is styled separatelly */
.navig ul li:hover a {
   color: #000000;
}

 .navig ul li:hover ul {
   background-color: #ffffff;
}

/* always pay attention that the value for top is such that it is possible to move the mouse over to submenu */
.navig ul ul {
   top: 3em;
   padding: 0 1em;/* should be identical to .navig ul, for best results */
   color: #000000;

   width: 850px;
}

.navig ul li li {
   padding: 0 6px;
   background: url(../../picture/navi/sub_bg.gif) repeat-x;

}

.navig ul li ul {
   background: url(../../picture/navi/sub_bg.gif) repeat-x;

}

.navig ul li li a {
   color: #000;
   padding: 1.3em;
   font-family: sans-serif, 'Arial';
   font-size: 12px;
   text-transform: none;

}

/* fix the colors for selected item and submenu, for better usability */

.navig ul li.selected li a, .navig ul li.selected li a:hover {
   color: #000000;
   background: url(../../picture/navi/sub_bg.gif) repeat-x;
}

.navig ul li.selected li, .navig ul li.selected:hover li a, .navig ul li.selected ul {
   background: url(../../picture/navi/sub_bg.gif) repeat-x;
   text-decoration:none;
}

.navig ul li li.selected, .navig ul li.selected:hover li.selected a, .navig ul li li.selected a{
  background: url(../../picture/navi/sub_hover_bg.gif);
}
.navig ul li.selected li a:hover, .navig ul li.selected:hover li a:hover{
color: #eee;
}


/* IE5/Mac: \*//*/

.navig ul {
   display: inline-block;
}

.navig ul a {
   float: left;
}

.navig ul li ul {
   top: 1.8em;
   height: 2em;
}

.navig ul li li, .navig ul li li a {
   display: inline;
   float: none;
}

/*  */