帶垂直子菜單的水平菜單（僅適用於HTML/CSS）

我正在嘗試使子菜單垂直而不是水平。任何幫助將非常感激。帶垂直子菜單的水平菜單（僅適用於HTML/CSS）

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

帶垂直子菜單的水平菜單（僅適用於HTML/CSS）

回答

相關問題