세로 서브 메뉴가있는 가로 메뉴

가로 대신 내 하위 메뉴를 세로로 만들려고 힘듭니다. 어떤 도움이라도 대단히 감사 할 것입니다.세로 서브 메뉴가있는 가로 메뉴

HTML :

<ul id="menu"> 
    <li><a href="/" title="HOME">HOME</a></li> 
    <li> 
    <a href="/" title="ECO ENERGY">ECO ENERGY</a> 
    <ul> 
     <li><a href="/Evaluations" title="Evaluations">Evaluations</a></li> 
     <li><a href="/Incentives" title="Incentives">Incentives</a></li> 
     <li><a href="/HouseFiles" title="House Files">House Files</a></li> 
     <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li> 
    </ul> 
    </li> 
    <li> 
     <a href="/" title="NEW HOMES">NEW HOMES</a> 
     <ul> 
     <li><a href="/NH" title="Evaluations">Evaluations</a></li> 
     </ul> 
    </li> 
</ul>

CSS :

#menu { 
    background-color: #206676; 
    float: left; 
    width: 100%; 
    height: 60px; 
} 

ul#menu { 
    font-size: 1.3em; 
    font-weight: 600; 
    margin: 0 0 5px; 
    padding: 0; 
    text-align: left; 
} 

ul#menu li { 
    display: inline; 
    list-style: none; 
    padding-left: 15px; 
    float: left; 
} 

ul#menu li a { 
    background: none; 
    color: #FFF; 
    text-decoration: none; 
} 

ul#menu li a:hover { 
    color: #FFF; 
    text-decoration: none; 
} 

ul#menu ul { 
    display: none; 
} 

ul#menu li { 
    display: inline; 
} 

ul#menu li:hover ul { 
    display: block; 
} 

ul#menu li:hover ul li a { 
    display: block; 
    color: red; 
}

내가 메인 메뉴 항목 맴돌고 때 나는 색상을 전환 할 수있는 지점을 가지고 있지만, 그냥 수직 얻을 수 없다 .

fiddle HERE

출처

2014-02-24 Batsu

ul#menu ul 
{ 
    display:none; 
    position:absolute; 
    left:0; 
    top:20px; 
} 
ul#menu li 
{ 
    display:block; 
}

에서 가장 중요한 변화. JSFIDDLE>http://jsfiddle.net/LSbvJ/ (패딩, 여백, 텍스트 정렬 등을 조정해야합니다. 그러나 이것은 좋은 출발입니다.)

출처

2014-02-24 20:11:34 sinisake

했다! 도와 줘서 고마워! – Batsu

문제 없으니 기꺼이 도와 드리겠습니다. ;) – sinisake

이 업데이트 된 CSS를 사용해보십시오.

ul#menu li:hover ul { 
    display: block; 
    position: absolute; 
    top: 10x; 
    width: 200px; 
} 

ul#menu { 
    font-size: 1.3em; 
    font-weight: 600; 
    margin: 0 0 5px; 
    padding: 0; 
    text-align: left; 
    position: relative 
}

아래는 유용한 데모입니다.
http://jsbin.com/buculimi/1/edit

출처

2014-02-24 20:14:50

<html> 
<head> 
<style type="text/css" media="screen"> 
#menu{ 
    width:100%; 
    display:block; 
    position:relative; 
    height:60px; 
    color:#fff; 
    text-decoration:none; 
    border-style:inset; 
} 
#menu a{ 
    text-decoration:none; 
    color:#fff; 
} 
#menu ul { 
    padding:1; margin:1; list-style:none;font-size: 1.3em; 
    font-weight: 600; 
} 
#menu li { 
    float:left; position:relative; padding-right:100; display:block; 
    border:none; 
} 
#menu li ul { 
    display:none; 
    position:absolute; 
} 
#menu li:hover ul{ 
    display:block; 
    background:red; 
    height:auto; width:8em; 
} 
#menu li ul li{ 
    clear:both; 
    border-style:none; 
} 
</style> 
</head> 
<body> 
    <div style="background-color:#206676;;width:100%;"> 
    <div id="menu"> 
     <ul> 
      <li><a href="#" title="HOME">HOME</a></li> 
      <li> 
      <a href="#" title="ECO ENERGY">ECO ENERGY</a> 
      <ul> 
       <li><a href="/Evaluations" title="Evaluations">Evaluations</a></li> 
       <li><a href="/Incentives" title="Incentives">Incentives</a></li> 
       <li><a href="/HouseFiles" title="House Files">House Files</a></li> 
       <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a></li> 
      </ul> 
      </li> 
      <li><a href="/" title="NEW HOMES">NEW HOMES</a> 
      <ul> 
       <li><a href="/NH" title="Evaluations">Evaluations</a></li> 
      </ul> 
      </li> 
     </ul> 

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

이 페이지는뿐만 아니라 당신을 도울 수 있습니다 그것은 http://mrbool.com/how-to-create-menu-with-submenu-using-csshtml/26146

출처

2014-02-24 20:34:29 jigsaw

#menu { 
 
     background-color: #206676; 
 
     float: left; 
 
     width: 100%; 
 
     height: 60px; 
 
    } 
 
    ul#menu { 
 
     font-size: 1.3em; 
 
     font-weight: 600; 
 
     margin: 0 0 5px; 
 
     padding: 0; 
 
     text-align: left; 
 
    } 
 
    ul#menu li { 
 
     display: inline; 
 
     list-style: none; 
 
     padding-left: 15px; 
 
     float: left; 
 
    } 
 
    ul#menu li a { 
 
     background: none; 
 
     color: #FFF; 
 
     text-decoration: none; 
 
    } 
 
    ul#menu li a:hover { 
 
     color: #FFF; 
 
     text-decoration: none; 
 
    } 
 
    ul#menu ul { 
 
     display: none; 
 
    } 
 
    ul#menu li { 
 
     display: block; 
 
    } 
 
    ul#menu li:hover ul { 
 
     display: block; 
 
     position: absolute; 
 
     width: 50px; 
 
    } 
 
    ul#menu li:hover ul li a { 
 
     display: block; 
 
     color: red; 
 
    }

<ul id="menu"> 
 
    <li><a href="/" title="HOME">HOME</a> 
 
    </li> 
 
    <li><a href="/" title="ECO ENERGY">ECO ENERGY</a> 
 

 
    <ul> 
 
     <li><a href="/Evaluations" title="Evaluations">Evaluations</a> 
 
     </li> 
 
     <li><a href="/Incentives" title="Incentives">Incentives</a> 
 
     </li> 
 
     <li><a href="/HouseFiles" title="House Files">House Files</a> 
 
     </li> 
 
     <li><a href="/UpdateSubmissions" title="Update Submissions">Update Submissions</a>/li> 
 

 
    </ul> 
 
    </li> 
 
    <li><a href="/" title="NEW HOMES">NEW HOMES</a> 
 

 
     <ul> 
 
     <li><a href="/NH" title="Evaluations">Evaluations</a> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
</ul>

출처

2015-09-10 10:49:45 deepika

세로 서브 메뉴가있는 가로 메뉴

답변

관련 문제