navigations div bei hover anzeigen von chucky, 19.05.2008 12:48

navigations div bei hover anzeigen

chucky Homepage des Autors 19.05.2008 12:48

Hi
Also ich habe ein Problem und zwar:

Ich habe folgende Navigation:

http://img221.imageshack.us/img221/6059/namenloswk2.gif

ich möchte wenn ich mit der maus über die einzelnen Links der ersten Navigation gehe, sich die links in der unteren Navigation veraendern.

Wenn ein Link angeklickt wird sollen natuerlich die Unterpunkte
auch in der zweiten Navigation stehen bleiben.

hier mal mein HTML Code:

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/format.css">
</head>
<body>
<div id="container">
<div id="head">
  <a href=""><div  id="logo"></div></a>
  <div id="nav">
   <ul>
    <li><a href="">IMPRINT & PRIVACY POLICY</a></li> |
    <li><a href="">GERMAN</a></li>
   </ul>
  </div>
</div>

<li class="first"><a href="" class="selected">HOME</a></li>
   <li><a href="">NEWS</a></li>
   <li><a href="">LIP - THE PUBLISHER</a></li>
   <li><a href="">PORTFOLIO</a></li>
   <li><a href="">HOW TO BECOME AN AUTHOR</a></li>
   <li><a href="">CONTACT US</a></li>
  </ul>
</div>

<div id="subnav2">
  <ul>
   <li><a href="">Philosophy</a></li> |
   <li><a href="">Commitment</a></li> 
  </ul>
</div>
</div>

</body>
</html>

subnav1 soll kommen wenn man ueber home ist mit der maus und subnav2 soll angezeigt werden wenn man zb über news geht.

und hier mal noch mein css code:

* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
background-color: transparent;
}

ul { list-style:none;}

#container {
width: 960px;
margin: 0 auto;
position: relative;
}

#head {
float: left;
width: 960px;
background: #fff;
}

#logo {
float: left;
width: 340px;
height: 105px;
background: url(../pics/logo.gif) no-repeat;
}

#nav ul {
text-align: right;
margin: 5px 0 0;
font-size:0.7em;
}

#nav ul li {
display: inline;
padding: 0 2px;

}

#nav a {
text-decoration:none;
}

#primnav {
float: left;
width: 960px;
font-size:0.8em;
background: url(../pics/bg_nav.png) no-repeat right top;

}

#primnav ul {
width:100%;
}

#primnav ul li.first {
background:none;
}

#primnav ul li {
float: left;
height:35px;
background: url(../pics/bg-nav-divider.png) no-repeat left bottom;
}

#primnav ul li a {
color: #92adce;
text-decoration:none;
padding: 10px;
margin: 4px;
font-weight:bold;
line-height: 35px;
}

#primnav ul li a.selected {
color:#ffffff;
}

#primnav ul li a:hover {
color:#ffffff;
}

#primnav a#link1:hover div {

}

/*********SUBNAV*********/

#subnav1 {
margin: 3px 0 0 0;
width:100%;
background:#bf2b2b;
float:left;
color:#ffffff;
}

#subnav1 ul {
padding:5px;
font-size:0.7em;
}

#subnav1 ul li {
display:inline;
}

#subnav1 ul li a {
padding:5px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}

#subnav2 {
display:none;
margin: 3px 0 0 0;
width:100%;
background:#bf2b2b;
float:left;
color:#ffffff;
}

#subnav2 ul {
padding:5px;
font-size:0.7em;
}

#subnav2 ul li {
display:inline;
}

#subnav2 ul li a {
padding:5px;
color:#ffffff;
font-weight:bold;
text-decoration:none;
}

ich weiß man koennte es mit javascript machen, aber ich moechte lieber mit css arbeiten.

danke schon mal

greetz chucky

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

chucky: navigations div bei hover anzeigen

Beitrag lesen

navigations div bei hover anzeigen

navigations div bei hover anzeigen