发表新帖
发表新帖

Horizontal Menu with Vertical Submenu (HTML/CSS Only)

前端 未结
关注
4 1206
日久生厌
日久生厌 2021-01-14 16:13

I\'m having a difficult time trying to make my submenu vertical instead of horizontal. Any help would be much appreciated.

HTML:
相关标签:
4条回答
  • 别跟我提以往
    2021-01-14 16:47 

        #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>

    0 讨论(0)
  • 死守一世寂寞
    2021-01-14 16:56 
    <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>

    This page might help you as well: http://mrbool.com/how-to-create-menu-with-submenu-using-csshtml/26146

    0 讨论(0)
  • 执笔经年
    2021-01-14 16:57 
    ul#menu ul
{
    display:none;
    position:absolute;
    left:0;
    top:20px;
}
ul#menu li
{
    display:block;   
}

    Most important changes. JSFIDDLE> http://jsfiddle.net/LSbvJ/ (You will have to tweak paddings, margins, text-align... but this is good start, I hope.)

    0 讨论(0)
  • 有刺的猬
    2021-01-14 17:08

    Just try this updated 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
}

    Below is a working Demo.
    http://jsbin.com/buculimi/1/edit

    0 讨论(0)
 看不清?
提交回复
热议问题