Question

我需要以下帮助，任何帮助都会很棒。我确定它很简单，只是看了太久可能

下拉菜单显示水平而不是垂直的子菜单以及子菜单背景。

代码：

＆＃13;

body {
  font-family: arial, sans-serif;
}
* {
  padding: 0px;
  margin: 0px;
}
#Header {
  width: 100%;
  height: 100vh;
  background: url(images/glasgow.jpg);
  background-size: cover;
}
/*Top Logo*/

#Logo {
  width: 115px;
  height: auto;
  float: left;
  margin: 15px;
  cursor: pointer;
}
/*Navigation ul*/

#NavBar ul {
  width: 100%;
  height: 100px;
  background: #6563af;
  line-height: 100px;
}
/*Navigation li*/

#NavBar ul li {
  list-style-type: none;
  display: inline;
  float: right;
}
/*Navigation a*/

#NavBar ul li a {
  color: white;
  text-decoration: none;
  padding: 20px;
}
/*Navigation li HOVER*/

#NavBar ul li:hover {
  background: #8269e0;
  transition: all 0.40s;
}
#NavBar ul li ul li {
  display: none;
}
#NavBar ul li:hover ul li {
  display: inline;
}

＆＃13;

<body>
  <div id="MainContainer">
    <!--Start of MainContainer-->

    <div id="Header">
      <!--Start of Header-->

      <div>
        <img id="Logo" src="images/logo.png">
      </div>

      <div id="NavBar">
        <ul>
          <li><a href="#">Item 5</a>
          </li>
          <li><a href="#">Item 4</a>
            <ul>
              <li><a href="#">Sub 1</a>
              </li>
              <li><a href="#">Sub 2</a>
              </li>
              <li><a href="#">Sub 3</a>
              </li>
            </ul>
          </li>
          <li><a href="#">Item 3</a>
          </li>
          <li><a href="#">Item 2</a>
          </li>
          <li><a href="#">Item 1</a>
          </li>
        </ul>
      </div>

    </div>
    <!--End of Header-->




  </div>
  <!--End of MainContainer-->
</body>

＆＃13;

Answer 1

您需要为子菜单显示/隐藏 <UL> 而不是 <li> 元素并且不需要提及父 <UL>

的身高

检查工作演示

＆＃13;

body {
  font-family: arial, sans-serif;
}
* {
  padding: 0px;
  margin: 0px;
}
#Header {
  width: 100%;
  height: 100vh;
  background: url(images/glasgow.jpg);
  background-size: cover;
}
/*Top Logo*/

#Logo {
  width: 115px;
  height: auto;
  float: right;
  margin: 15px;
  cursor: pointer;
}
/*Navigation ul*/

#NavBar ul {
  width: 100%;
  background: #6563af;
  line-height: 100px;
}
/*Navigation li*/

#NavBar ul li {
  list-style-type: none;
  float: left;
  position:relative;
}

#NavBar ul:after{content:"";display:block;clear:both}

/*Navigation a*/

#NavBar ul li a {
  color: white;
  text-decoration: none;
  padding: 20px;
}
/*Navigation li HOVER*/

#NavBar ul li:hover {
  background: #8269e0;
  transition: all 0.40s;
}

/*hide submenu*/
#NavBar ul li ul {
  display: none;
}

/*Show submenu at hover*/
#NavBar ul li:hover ul {
  display:block;
  position:absolute;
  top:100px
  
}

/*Make submenu vertical */
#NavBar ul li ul li{
  display: block;
 float:none;
  line-height:50px
}

＆＃13;

<div id="MainContainer"><!--Start of MainContainer-->

    <div id="Header"><!--Start of Header-->

        <div><img id="Logo"src="images/logo.png"></div>

        <div id="NavBar">
            <ul>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 4</a>
                    <ul class="sub-ul">
                        <li><a href="#">Sub 1</a></li>
                        <li><a href="#">Sub 2</a></li>
                        <li><a href="#">Sub 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 1</a></li>
            </ul>
        </div>

</div><!--End of Header-->




</div><!--End of MainContainer-->

＆＃13;

希望它有用

Answer 2

我认为你需要做的就是： -

 #NavBar ul li:hover ul li{
        display:inline;
    }
#NavBar ul{
    width:100%;
    height:100px;
    background:#6563af;
    line-height:100px;
    display: inline /* just a safe side */
}

改为： -

 #NavBar ul li:hover ul li{
            display:block;
        }
#NavBar ul{
    width:100%;
    height:100px;
    background:#6563af;
    line-height:100px;
    display: block /* just a safe side */
}

Answer 3

#NavBar
{
	margin-top:15px
}

#NavBar ul
{
	list-style:none;
	
	margin:0;
	padding:0
       width: 100% !important;
  height: 100px;
  background: #6563af;
  line-height: 100px;
}

#NavBar ul a
{display:block;
	 color: white;
	text-decoration:none;
	font-weight:700;
	font-size:12px;
	line-height:32px;
	padding:0 15px;
	
}

#NavBar ul li
{
	position:relative;
	float:left;
	margin:0;
	padding:0
}



#NavBar ul li:hover
{
	background: #8269e0;
  transition: all 0.40s;
}

#NavBar ul ul
{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	background:#6563af;
	padding:0
}

#NavBar ul ul li
{
	float:none;
	width:200px
}

#NavBar ul ul a
{
	line-height:120%;
	padding:10px 15px
}



#NavBar ul li:hover > ul
{
	display:block
}

<div id="MainContainer"><!--Start of MainContainer-->

    <div id="Header"><!--Start of Header-->

        <div><img id="Logo"src="images/logo.png"></div>

        <div id="NavBar">
            <ul>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 4</a>
                    <ul class="sub-ul">
                        <li><a href="#">Sub 1</a></li>
                        <li><a href="#">Sub 2</a></li>
                        <li><a href="#">Sub 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 1</a></li>
            </ul>
        </div>

</div><!--End of Header-->




</div><!--End of MainContainer-->

下拉菜单水平显示子菜单而不是垂直

3 个答案: