HTML 및 CSS에서 수직 메뉴를 사용하는 방법은 무엇입니까?

세로 메뉴를 사용하는 방법 및 세로 메뉴 bar.Iam 사용하지 jquery 또는 javascript html 및 css.While iam mouseover이 세로 메뉴 제대로 작동하지 않습니다. 날 도와 줘.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

google에서 jQuery superfish 메뉴를 확인하고 수직 구현을위한 CSS를 확인하십시오. 그게 너에게 도움이 될거야. –

무슨 문제가 라그가 말해 주는지 ... –

정확하게 당신의 문제를 알려주십시오. 그래서 나는 그 일을 해결할 수있다. – w3uiguru

라구 당신이하는 당신 수직 드롭 다운 메뉴 때 가져가 아래로 슬라이딩되는 http://jsfiddle.net/K6dvs/ 같은 몇 가지 일을해야합니까 : 여기

는 코드입니다.

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

일부 수정은 바이올린에서 볼 수 있습니다.

출처

2012-12-07 09:31:53 w3uiguru

내 대답이 맞다면 – raghu

고마워요. 그때 올바른 (정확한 틱)으로 표시합니다. – w3uiguru

작동하지만 모든 수직 메뉴에 href가 필요합니다. – raghu

CSS가 잘못 작성되었습니다. 한 번만 요소를 나열하고 그 안에 정의 된 모든 특성 만 가져야합니다. 또한 HTML 앵커를 만들 때 - 대신 -를 사용하십시오.

<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;}

목록에서 요소를 배치 할 때 언제든지 왼쪽으로 사용할 필요가 없습니다.

출처

2012-12-07 09:47:35

HTML 및 CSS에서 수직 메뉴를 사용하는 방법은 무엇입니까?

답변

관련 문제