0

I need help with the following, any help would be great. I'm sure it's simple just been looking at it too long probably

Dropdown menu showing sub menus horizontally instead of vertical plus the sub menu background stays there.

Code:

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;
}
<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>
Angel Politis
  • 10,955
  • 14
  • 48
  • 66
user2916941
  • 25
  • 6

3 Answers3

1

You need to show/hide <UL> instead of <li> element for submenu and don't need to mention height on parent <UL>

Check working demo

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

Hope it's helpful

Ayatullah Rahmani
  • 892
  • 5
  • 13
0

I Think all you need to do is :-

 #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 */
}

change to this:-

 #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 */
}
Yashwardhan Pauranik
  • 5,370
  • 5
  • 42
  • 65
0

#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-->
Ganesh Putta
  • 2,622
  • 2
  • 19
  • 26