如何在HTML和css中使用垂直菜單？

如何使用垂直菜單，我已經嘗試了垂直菜單欄。我不使用jQuery或JavaScript只有html和css.hhile IAM鼠標懸停此垂直菜單它不正常working.Please幫助我。如何在HTML和css中使用垂直菜單？

下面是代碼：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Vertical menu</title> 
<style type="text/css"> 
.headerouter1{clear:both;} 
.headerinner1{ margin:0 auto; width:990px;} 
.menustart{ background:url(images/menustart.png) no-repeat; width:16px; height:40px; float:left;} 
.menumiddle{background:url(images/menumiddle.png) repeat-x; width:900px; height:40px; float:left; } 
.menumiddle ul li{ float:left; font-family:Arial, Helvetica, sans-serif; padding:15px 20px 0px 20px;font-size:14px; background:url(images/menudivider.png) no-repeat;} 
.menumiddle ul li a{text-decoration:none; font-family:Arial, Helvetica, sans-serif;padding:15px 20px 0 20px;color:#FFFFFF;} 
.menumiddle ul li a:hover{ color:#000;} 
.menuend{ background:url(images/menuend.png) no-repeat; width:15px; height:40px;float:left;} 
.menumiddle ul{ margin:0px; } 
.menumiddle ul li{ list-style:none; float:left; } 
.menumiddle ul li a{ text-decoration:none;} 
.menumiddle ul li a:hover{ } 
.menumiddle ul li a.active{ } 
.menumiddle ul li ul{display: none;} 
.menumiddle ul li:hover ul{ margin-top:6px;position:absolute;width:195px;display:block;padding:15px 0px 0px 0px;background:#fff; margin-left:-10px;border-bottom:2px solid #000;border-left:2px solid #000;border-right:2px solid #000;} 
.menumiddle ul li:hover ul li a{float:left;clear:both;width:185px;font:bold 12px arial;color:#000;background:none; padding:0px 5px 4px 5px; border-bottom:1px solid #fafafa; border-radius:15px;margin-left:-20px; } 
.menumiddle ul li:hover ul li a:hover{ color:#009cff;} 
</style> 
</head> 

<body> 
<div class="headerouter1"> 
<div class="headerinner1 "> 

<div class="menustart"></div> 
     <div class="menumiddle"> 
      <ul> 
      <li><a href="#">Home</a> 
      <ul style="list-style:none;"> 
      <li><a href-"#">sdsd</a></li> 
      <li><a href-"#">sdsd</a></li> 
         <li><a href-"#">sdsd</a></li> 
         <li><a href-"#">sdsd</a></li> 
         <li><a href-"#">sdsd</a></li> 
      </ul></li> 
      <li><a href="#">Home</a> 
      <ul style="list-style:none;"> 
      <li><a href-"#">sdsd</a></li> 
         <li><a href-"#">sdsd</a></li> 
         <li><a href-"#">sdsd</a></li> 
         <li><a href-"#">sdsd</a></li> 
      </ul></li> 
      </li> 

<li><a href="#">Home</a></li> 
<li><a href="#">Home</a></li> 
<li><a href="#">Home</a></li> 
</ul> 
</div> 
<div class="menuend"></div> 

</div> 
</div> 
</div> 
</div> 
</body> 
</html>

來源

2012-12-07 raghu

嘗試檢查谷歌中的jQuery superfish菜單並查看它們的垂直實現的css。這可能會幫助你。 –

raghu告訴我們什麼是精確問題.... –

請讓我知道你的問題究竟是什麼？所以我可以解決這個問題。 – w3uiguru

Raghu你需要這樣的http://jsfiddle.net/K6dvs/有些東西你垂直下拉菜單往下滑時，懸停。

.menumiddle > ul{height:40px; overflow:hidden;}

並改變一些填充看到小提琴。

來源

2012-12-07 09:31:53 w3uiguru

非常感謝你 – raghu

如果我的回答是正確的然後標記爲正確的（在右邊打勾） – w3uiguru

其工作，但我需要在sdsd每個垂直菜單 – raghu

你的CSS寫得很差。您應該只列出一次元素並在其中定義所有屬性。當創建一個HTML錨點use =而不是 - 時。

<a href="#">sdsd</a>

下面是您試圖在HTML5中實現的基本知識。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 

     <style type="text/css"> 
      .menumiddle ul {list-style: none; padding: 0px; font-family:Arial, Helvetica, sans-serif;} 
      .menumiddle li a {text-decoration: none;} 
      .menumiddle li a:hover {text-decoration: underline;} 
     </style> 


     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <div class="menumiddle"> 
      <ul> 
       <li><a href="page1.html">Page 1</a></li> 
       <li><a href="page2.html">Page 2</a></li> 
       <li><a href="page3.html">Page 3</a></li> 
      </ul> 
     </div> 
    </body> 
</html>

默認列表元素彼此（塊）下方的位置，如果你更喜歡這種更改爲水平列表中添加以下CSS語句。

.middlemenu li {display: inline;}

您不需要在列表中的位置元素時隨時使用float：left。

來源

2012-12-07 09:47:35

如何在HTML和css中使用垂直菜單？

回答

相關問題