✔ Hilfe mit CSS Navigation

Status
Nicht offen für weitere Antworten.
na klar...

die aktuelle css:
Code: 
div#Rahmen {
   /* width: 10.1em;*/
    padding: 0.3em 0.1em;
    border: 1px solid black;
    background-color: #ffffff;
  }
  div#Rahmen div {
     clear: left;
  }

  ul#Navigation {
    margin: 0; padding:-2em;
    text-align: center;
    }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 4.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }

  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.1em;
  }

  ul#Navigation a, ul#Navigation span {
    display:block;
    width:6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:1.2em 1.2em 1.2em 1.2em; */
    text-decoration: none; font-weight: bold;
    border: 0.2px solid black;
    border-left-color: white; border-top-color: white;
    color: white; background-color: #FFFFFF;

  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
    w\idth: 8.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: Blue;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: #FFFFFF;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }
  /* Hintergrundfarben der einzelnen Spalten im Menü */
  ul#Navigation li a#menu1 { background:url(images/vcdleft1.gif) 100% 100% no-repeat    }
  ul#Navigation li a#menu2 { background:url(images/vcdleft2.gif) 100% 75% no-repeat;   }
  ul#Navigation li a#menu3 { background:url(images/vcdright1.gif) 100% 75% no-repeat;   }
  ul#Navigation li a#menu4 { background:url(images/vcdright2.gif) 100% 75% no-repeat;   }

  /* Das Submenü */
  ul#Navigation li ul li #submenu1 { background-color: #003399;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu2 { background-color: #330066;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu3 { background-color: #208012;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu4 { background-color: #66CC33;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu11 { background-color: #003399;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu21 { background-color: #330066;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu31 { background-color: #006600;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}
  ul#Navigation li ul li #submenu41 { background-color: #66CC33;
    display:block;
    width: 14.1em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding:0.1em 0.1em ; */
    border: 0px solid black;
    border-left-color: white; border-top-color: white;
    color: white;}

  /* Formatierungen für die Klasse LongVCD */
.longVCD{border-bottom:solid 5px #ffffff;font-family:Arial;font-size:9pt;text-align:center;color:#000000;font-weight:bold;background-image:url(images/vcdlong.gif)}
.longVCD a:visited{color:#ffffff;text-decoration:none;}
.longVCD a:active{color:#ffffff;text-decoration:none;}
.background a:{background:url(images/vcdleft2.gif) 100% 0% no-repeat;}

div#lyr1 {
  position:absolute; left:300px; top:10px;
  width:250px; height:70px;
  background-color:#eee; border:1px solid black;
  padding:6px; font-size:11px; line-height:1.4
  }

* html ul#Navigation a {  /* Breitenangaben nur fuer IE */
    width: 100%;
    w\idth: 12.8em;
    height: 5em;
    }
* html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
              }
 * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
}

und hier der aktuelle html code:
HTML: 
<html>
<head>
<title></title>
<meta name="author" content="D048626">
<link rel="stylesheet" type="text/css" href="testcss1.css">
<link rel="stylesheet" type="text/css" href="wmcs.css">
</head>
<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block";
    //UL.style.backgroundColor = "blue";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
function changeContent(id,shtml) {
   if (document.getElementById || document.all) {
      var el = document.getElementById? document.getElementById(id): document.all[id];
      if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;
   }
}
var msgDflt = ""; // To display an optional message onmouseout
var msg1 = 'New content for the layer. Content written to the element can be plain text or <span class="hot">rich html,</span> including images.';
var msg2 = "You can enclose your message string in single quotes so html tags in the string can use double quotes for attributes.";
var msg3 = 'There are lots of writing to layers examples at <a href="http://www.dyn-web.com">www.dyn-web.com</a>.';
</script>


<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<ilayer id="headline" top="0" left="0" width="50">


<h3 style="background-color:#DEDEDE" align="center" style="margin-right:18em" style="font-size:1.2em"> 1. Operating Processes</h3> </ilayer>
<div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel" id="menu1"> 1. Idea-to-Market</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu1">1.1 Solution Portfolio Management <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
        	<li><a href="#Beispiel" id="submenu11">1.2 Solution Definition-to-Deployment <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu11">1.3 Service & Knowledge Productization <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu11">1.4 Solution Go-to-Market<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
    </ul>
    </li>


    <li><a href="#Beispiel" id="menu2">2. Demand-to-Close</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu2">2.1 Marketing & Sales Strategy & Planning <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
        	<li><a href="#Beispiel" id="submenu21">2.2 Marketing & Demand Generation<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu21">2.3 indirect Channel Management <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu21">2.4 Direct Account & Opportunity Management<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
    </ul>
    </li>

    <li><a href="#Beispiel" id="menu3">3. Order-to-Cash</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu3">3.1 Order Management<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"> </a></li>
        	<li><a href="#Beispiel" id="submenu31">3.2 Licence Management<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu31">3.3 Services Billing<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu31">3.4 Invoice Management <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
    </ul>
    </li>

    <li><a href="#Beispiel" id="menu4">4. Delivery</a></li>
    <ul>
    	<li><a href="#Beispiel" id="submenu4">4.1 Software Delivery <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"> </a></li>
        	<li><a href="#Beispiel" id="submenu41">4.2 Support & Maintanance Delivery<img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
         <li><a href="#Beispiel" id="submenu41">4.3 Field & Operations Services Delivery <img src="http://www.tutorials.de/forum/images/info.gif" border="0" onMouseover="changeContent('lyr1', msg1)" onmouseout="changeContent('lyr1',msgDflt)"></a></li>
    </ul>
    </li>
  </ul><div></div></div>


<h4 align="center" style="margin-right:18em" style="background-color:#DEDEDE" style="font-size:1.2em">2 Management & Support Services</h4>
<table>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.1 Procurement</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.2 Financials & Controlling</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.3 Human Resources</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.4 Information Technology</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.5 Strategy Management</td>
</tr>
<tr>
 		<td colspan="4" class="longVCD" width="700" height="42">2.6 Security Management</td>
</tr>
</table>


<div style="top:180px; left: 728px;" id="lyr1">Watch here for more informations.</div>
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück