✔ dropdown-menu formatieren (.parent Elemente mit besonderer Formatierung)

Status
Nicht offen für weitere Antworten.
joseba

joseba

Grünschnabel
Hallo,
ich habe die folgende Liste, aus welcher ich mit Hilfe dieser Anleitung ein Dropdown Menu erstellt habe:

HTML: 
<ul id="navmenu-h">
  <li>item1</li>
  <li class="parent">item2
    <ul>
      <li>item2.1</li>
    </ul>
  </li>
  <li class="parent">item3
    <ul>
      <li class="parent">item3.1
        <ul>
          <li>item3.1.1</li>
          <li>item3.1.2</li>
        </ul>
      </li>
      <li>item3.2</li>
      <li>item3.3</li>
    </ul>
  </li>
</ul>

Mein CSS:
HTML: 
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 971px; /*For KHTML*/
  background: #002652;
  list-style: none;
  height: 28px;
}
ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 28px;
}
ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 180px;
  list-style: none;
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
}
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
/* Root Menu */
ul#navmenu-h a {
  padding: 0 15px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #FFF;
  font: bold 9pt arial, verdana, sans-serif;
  line-height: 28px;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
/* Secondary Menu */
ul#navmenu-h ul li {
  width: 180px;
  height: 21px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
ul#navmenu-h ul a {
  font: bold 9pt arial, verdana, sans-serif;
  line-height: 16px;
  text-decoration: none;
  border: 1px solid #FFF;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #812990;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  text-decoration: underline;
  float: none;
  background: #F4F4F4;
  color: #000;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #812990;
  color: #FFF;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #F4F4F4;
  color: #000;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #812990;
  color: #FFF;
}
ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 179px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}
ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}

Jetzt möchte ich noch alle Elemente der Klasse .parent formatieren, dass ein kleiner Pfeil rechts vom Element erscheint, welcher dem Bunutzer signalisiert, dass es hier noch Unterelemente gibt.

Komme an dieser Stelle aber nicht weiter. Erweitere ich mein CSS um den folgenden Teil, so werden alle meine darunter liegenden Elemente ebenfalls so formatiert, was ich natürlich nicht möchte.
Es soll ausschließlich die oberste Ebene, welche weitere Unterebenen enthält (.parent) formatiert werden.

HTML: 
ul#navmenu-h .parent a {
  background: #002652 url('../images/arrow-top.gif') center right no-repeat;
}
/* Root Menu .parent Hover Persistence */
ul#navmenu-h a:hover.parent,
ul#navmenu-h li:hover.parent a,
ul#navmenu-h li.iehover.parent a {
  background: #812990 url('../images/arrow-top.gif') center right no-repeat;
}

Vielen Dank für Eure Hilfe!
 
Hi,

versuch es mal mit diesen CSS-Selektoren:

Code: 
ul#navmenu-h .parent a,
ul#navmenu-h .parent ul li.parent a {
  background: #002652 url('../images/arrow-top.gif') center right no-repeat;
}
/* Root Menu .parent Hover Persistence */
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #812990 url('../images/arrow-top.gif') center right no-repeat;
}
 
Mein Problem ist das Folgende: Falls ich z.B. auf der Menuebene 2 (2nd Menu .parent) eine Formatierung vorgebe, dann wird diese in Ebene 3 ebenfalls benutzt, was ich nicht möchte.

Hier nochmal mein Vollständiger HTML Code zum testen:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
  
  <link rel="stylesheet" href="nav.css" type="text/css" />
  
  <title>Navigation</title>
  
  <script type="text/javascript"><!--//--><![CDATA[//><!--

  navHover = function() {
  	var lis = document.getElementById("navmenu-h").getElementsByTagName("LI");
  	for (var i=0; i<lis.length; i++) {
  		lis[i].onmouseover=function() {
  			this.className+=" iehover";
  		}
  		lis[i].onmouseout=function() {
  			this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  		}
  	}
  }
  if (window.attachEvent) window.attachEvent("onload", navHover);

  //--><!]]></script>
  
  </head>
  <body>

  <ul id="navmenu-h">
    <li><a href="./navigation.html">item1</a></li>
    <li class="parent"><a href="./navigation.html">item2</a>
      <ul>
        <li><a href="./navigation.html">item2.1</a></li>
      </ul>
    </li>
    <li class="parent"><a href="./navigation.html">item3</a>
      <ul>
        <li class="parent"><a href="./navigation.html">item3.1</a>
          <ul>
            <li><a href="./navigation.html">item3.1.1</a></li>
            <li><a href="./navigation.html">item3.1.2</a></li>
          </ul>
        </li>
        <li><a href="./navigation.html">item3.2</a></li>
        <li><a href="./navigation.html">item3.3</a></li>
      </ul>
    </li>
  </ul>

  </body>
</html>

Und die nav.css:
Code: 
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/

/* ---- HEADERS ---- */
.contentheading {
  padding: 0;
	font-family: arial, verdana, sans-serif;
	font-size: 16pt;
	font-weight: bold;
	vertical-align: bottom;
	color: #002652;
	text-align: left;
	width: 100%;
}
/* ---- END Headers ---- */

/* ---- FORMS ---- */
div.search input {
	width: 160px;
	border: 1px solid #002652;
	background: #EEE;
	padding: 1px 5px;
}
/* ---- END Forms ---- */

/* ---- MAIN NAVIGATION ----
   important joomla settings:
   Always show sub-menu Items = yes
   Menu Tag ID = navmenu-h */

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu-h {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 971px; /*For KHTML*/
  background: #002652;
  list-style: none;
  height: 28px;
}
ul#navmenu-h li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 28px;
}
ul#navmenu-h ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 180px;
  list-style: none;
  display: none;
  position: absolute;
  top: 28px;
  left: 0;
}
ul#navmenu-h ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}
/* Root Menu */
ul#navmenu-h a {
  padding: 0 15px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  color: #FFF;
  font: bold 9pt arial, verdana, sans-serif;
  line-height: 28px;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}
/* Secondary Menu */
ul#navmenu-h ul li {
  width: 180px;
  height: 21px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}
ul#navmenu-h ul a {
  font: bold 9pt arial, verdana, sans-serif;
  line-height: 16px;
  text-decoration: none;
  border: 1px solid #FFF;
  padding-top: 2px;
  padding-bottom: 2px;
}
/* Root Menu Hover Persistence */
ul#navmenu-h a:hover,
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a {
  background: #812990;
}
/* 2nd Menu */
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
  float: none;
  background: #F4F4F4;
  color: #000;
}
/* 2nd Menu .parent */
ul#navmenu-h li:hover .parent a,
ul#navmenu-h li.iehover .parent a {
  background: #F4F4F4 url('./images/arrow.gif') center right no-repeat;
}
/* 2nd Menu Hover Persistence */
ul#navmenu-h li:hover li a:hover,
ul#navmenu-h li:hover li:hover a,
ul#navmenu-h li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover a {
  background: #812990;
  color: #FFF;
}
/* 2nd Menu .parent Hover Persistence */
ul#navmenu-h li:hover li .parent a:hover,
ul#navmenu-h li:hover li:hover.parent a,
ul#navmenu-h li.iehover li .parent a:hover,
ul#navmenu-h li.iehover li.iehover.parent a {
  background: #812990 url('./images/arrow.gif') center right no-repeat;
}
/* 3rd Menu */
ul#navmenu-h li:hover li:hover li a,
ul#navmenu-h li.iehover li.iehover li a {
  background: #F4F4F4;
  color: #000;
}
/* 3rd Menu Hover Persistence */
ul#navmenu-h li:hover li:hover li a:hover,
ul#navmenu-h li:hover li:hover li:hover a,
ul#navmenu-h li.iehover li.iehover li a:hover,
ul#navmenu-h li.iehover li.iehover li.iehover a {
  background: #812990;
  color: #FFF;
}
ul#navmenu-h ul ul,
ul#navmenu-h ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 179px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu-h li:hover ul ul,
ul#navmenu-h li:hover ul ul ul,
ul#navmenu-h li.iehover ul ul,
ul#navmenu-h li.iehover ul ul ul {
  display: none;
}
ul#navmenu-h li:hover ul,
ul#navmenu-h ul li:hover ul,
ul#navmenu-h ul ul li:hover ul,
ul#navmenu-h li.iehover ul,
ul#navmenu-h ul li.iehover ul,
ul#navmenu-h ul ul li.iehover ul {
  display: block;
}

Dabei soll ein kleiner Pfeil rechts neben dem jeweiligen Menupunkt angezeigt werden, sofern dieser weitere Unterpunkte enthält. Bild ist hier natürlich nicht mitgeliefert. (!)
 
Hi,
joseba hat gesagt.:
Mein Problem ist das Folgende: Falls ich z.B. auf der Menuebene 2 (2nd Menu .parent) eine Formatierung vorgebe, dann wird diese in Ebene 3 ebenfalls benutzt, was ich nicht möchte.
Zum Vergrößern anklicken....
in den modernen Browsern liegt das an diesem Selektor:

Code: 
/* 2nd Menu .parent Hover Persistence */
ul#navmenu-h li:hover li .parent a:hover,
ul#navmenu-h li:hover li:hover.parent a,
ul#navmenu-h li.iehover li .parent a:hover,
ul#navmenu-h li.iehover li.iehover.parent a {
  background: #812990 url('./images/arrow.gif') center right no-repeat;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück