1. 首頁
  2. 問答
  3. CSS 3級導航對齊父母

CSS 3級導航對齊父母

2014-01-25 70 views
1

我已經看了幾個教程和其他問題，這些都很接近，但無法讓我的腦袋圍繞一些代碼。我試過在評論部分詢問後續問題，但我無法做到，因爲我剛剛加入了StackOverflow並且沒有很高的聲譽。CSS 3級導航對齊父母

我正在使用css進行3級導航練習，並遇到了一個小障礙。 我遇到的問題是獲得第三級以「第二級」下拉到位。如果你有一段時間以下是jsfiddle。

http://jsfiddle.net/JustALittleHeat/4KnP2/3/#&togetherjs=akTj3NGGcf

你會看到它是一個水平導航欄首頁分類之作 - 等等...... 當你將鼠標懸停在工作菜單它垂直落下，然後當你將鼠標懸停在該層的菜單項他們在右側顯示另一個子菜單。但是，右側的子菜單不會向下移動以匹配其相應的父級。我在代碼中錯過了什麼？聲明類限制我獲得我想要的結果的能力，而不是元素選擇器的路徑？

感謝

<!doctype html> 
<html> 
<head>`enter code here` 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 

<link rel="stylesheet" type="text/css" href="Assets/styles2.css" 

</head> 

<body> 

<ul id="menu"> 
<li class ="menuHeader"><a class="menuHeaderText" href="#">Home</a></li> 
<li class ="menuHeader"><a class="menuHeaderText" href="#">Categories</a> 
<ul class="dropDown"> 
<li class="subMenu"><a class="subMenuText" href="#">CSS</a></li> 
<li class="subMenu"><a class="subMenuText" href="#">Graphic Design</a></li> 
<li class="subMenu"><a class="subMenuText" href="#">Development</a></li> 
<li class="subMenu"><a class="subMenuText" href="#">Web Design</a></li> 
</ul> 
</li> 
<li class ="menuHeader"><a class="menuHeaderText" href="#">Work</a> 
<ul class="dropDown"> 
<li class="subMenu"><a class="subMenuText" href="#">Company A</a> 
<ul class="dropDown2"> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Branding</a></li> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Advertising</a></li> 
</ul> 

</li> 
<li class="subMenu"><a class="subMenuText" href="#">Company B</a> 
<ul class="dropDown2"> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Marketing</a></li> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Copywriting</a></li> 
</ul>      
</li> 
<li class="subMenu"><a class="subMenuText" href="#">Company C</a> 
<ul class="dropDown2"> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Advertising</a></li> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Copywriting</a></li> 
</ul>       
</li> 
<li class="subMenu"><a class="subMenuText" href="#">Company D</a> 
<ul class="dropDown2"> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Branding</a></li> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Marketing</a></li> 
<li class="lvl2SubMenu"><a class="lvl2subMenuText" href="#">Copywriting</a></li> 
</ul> 
</li> 
</ul>     
</li> 
<li class ="menuHeader"><a class="menuHeaderText" href="#">About</a> 
<ul class="dropDown"> 
<li class="subMenu"><a class="subMenuText" href="#">Company</a></li> 
<li class="subMenu"><a class="subMenuText" href="#">Team</a></li> 
</ul> 
</li> 
<li class ="menuHeader"><a class="menuHeaderText"href="#">Contact</a></li> 
</ul> 

</body> 
</html> 
@charset "UTF-8"; 
/* CSS Document */ 

#menu, #menu ul {margin:0; padding:0; list-style:none; z-index:0;} 

#menu {width: 960px; height: 40px; margin:60px auto; border: 1px solid #222;background-color:#111; 
     background-image: -moz-linear-gradient(#555, #444 5%, #333 15%, #999 25%, #111 75%); 
     background-image: -o-linear-gradient(#555, #444 5%, #333 15%, #999 25%, #111 75%); 
     background-image: -webkit-linear-gradient(#555, #444 5%, #333 15%, #999 25%, #111 75%); 
     background-image: linear-gradient(#555, #444 5% ,#333 15%, #999 25%, #111 75%); 
     border-radius:6px; box-shadow: 0px 0px 1px #333, 1px 1px 2px #FFF inset; Transition:all 1s ease-in-out; } 


.menuHeader {float:left; border-left:thin solid rgba(153,204,255,0.3); position:relative; 
      -moz-transition:all 1s ease-in-out; 
      Transition:all 0.3s ease-in-out;} 

.menuHeader:hover {background-image: -moz-linear-gradient(#555, #777 5%, #555 15%, #FFF 25%, #111 75%); 
        box-shadow: 1px 1px 4px #FFF inset } 

.menuHeaderText {float:left; padding:12px 30px; text-decoration:none; color:white; font-family:Arial, Helvetica, sans-serif; font:bold; font-size:14px;} 



.dropDown { width:120%; opacity:0; visibility:hidden; position:absolute; top: 38px; z-index:1; 
      background:#444; box-shadow:1px 1px 2px #333; Transition:all 0.2s ease-in-out;} 

.subMenuText {width:90%; float:left; padding:5%; text-decoration:none; color:white; 
      font-family:Arial, Helvetica, sans-serif; border-bottom:thin solid rgba(153,204,255,0.3); 
      Transition:all 0.2s ease-in-out;}  

.dropDown a:hover {background:rgba(0%,80%,100%,1); width:90%; } 

    #menu li:hover > ul {opacity:1; visibility:visible; margin:0;} 


.dropDown2 { width:120px; opacity:0; visibility:hidden; position:absolute; display:inline-block; left:100%; z-index:1; 
      background:#444; box-shadow:1px 1px 2px #333; Transition:all 0.2s ease-in-out;} 



.lvl2subMenuText {width:90%; float:left; padding:5%; text-decoration:none; color:white; 
      font-family:Arial, Helvetica, sans-serif; border-bottom:thin solid rgba(153,204,255,0.3); 
      Transition:all 0.2s ease-in-out;} 

#menu li ul li:hover > ul li {opacity:1; visibility:visible; margin:0;}

來源

2014-01-25 justalittleheat

回答

相關問題

 相關問題