How to make a nested sub menu on horizontal navigation bar vertical?

html css navigation submenu

11,238

Solution 1

I have changed your code little bit try with this answer , i have remove the nested li float:left , check the below of css i have added new lines

.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav ul li {
    font-family: 'Roboto', sans-serif;
    border-bottom: none;
    height: 86px;
    line-height: 86px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

.nav ul li a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
  padding:0 24px;
}

.nav ul li a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}

.nav a {
    border-bottom:none;
}

.nav li ul {
    position:absolute;
    display:none;
    width:inherit;
	text-align:left;
}

.nav li:hover ul {
    display:block;
}

.nav ul li ul li {
  display: block;
  float:none !important; /* newly added */
  height:auto; /* newly added */
  line-height:34px; /* newly added */
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>

<div class="nav"> <!-- Start of Nav Bar -->
    <ul>
        <li class="home"><a href="#">HOME</a></li>
        <li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li>
        <li class="services"><a href="#">SERVICES</a>
            <ul>
                <li class="programs"><a href="#">PROGRAMS</a></li>
                <li class="events"><a href="#">EVENTS</a></li>
            </ul>
        </li>
        <li class="resources"><a href="#">RESOURCES</a></li>
        <li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li>
        <li class="contactus"><a href="#">CONTACT&nbsp;US</a></li>
    </ul>
</div>

</body>
</html>

Solution 2

try to something like this. Add the following css

.dropdown li{
  float: none !important;
}

Add .dropdown class in your sub-menu UL like this.

<ul class="dropdown">

Solution 3

put display flex and flex-direction on your wrap of submenu itself.

check this out

nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

nav ul li {
    font-family: 'Roboto', sans-serif;
    border-bottom: none;
    height: 86px;
    line-height: 86px;
    font-size: 14px;
    margin: 0 auto;
  position:relative;
}

nav ul li a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
  padding:0 24px;
}

nav ul li a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}

nav a {
	border-bottom:none;
}




nav .withSubMenu ul{
  display: none;
}


.withSubMenu:hover ul {
  display:flex;
  width:100%;
  flex-direction:column;
}

<nav> <!-- Start of Nav Bar -->
<ul>
<li class="home"><a href="#">HOME</a></li>
<li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li>
<li class="services withSubMenu"><a href="#">SERVICES</a>
    <ul>
    <li class="programs"><a href="#">PROGRAMS</a></li>
    <li class="events"><a href="#">EVENTS</a></li>
    </ul>
</li>
<li class="resources"><a href="#">RESOURCES</a></li>
<li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li>
<li class="contactus"><a href="#">CONTACT&nbsp;US</a></li>
</ul>
</nav>

11,238

Author by

Eden Chew

Updated on June 04, 2022

Comments

Eden Chew almost 2 years

So I created a horizontal navigation bar, but I want the sub menu to appear vertically when hovered over, but whatever I tried, it still appears horizontally.

Here's a JSFiddle of my code: https://jsfiddle.net/ma85nbgx/

And below is my HTML and CSS.

HTML

<div class="nav"> <!-- Start of Nav Bar -->
    <ul>
        <li class="home"><a href="#">HOME</a></li>
        <li class="aboutus"><a href="#">ABOUT&nbsp;US</a></li>
        <li class="services"><a href="#">SERVICES</a>
            <ul>
                <li class="programs"><a href="#">PROGRAMS</a></li>
                <li class="events"><a href="#">EVENTS</a></li>
            </ul>
        </li>
        <li class="resources"><a href="#">RESOURCES</a></li>
        <li class="getinvolved"><a href="#">GET&nbsp;INVOLVED</a></li>
        <li class="contactus"><a href="#">CONTACT&nbsp;US</a></li>
    </ul>
</div>

CSS

.nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav ul li {
    font-family: 'Roboto', sans-serif;
    border-bottom: none;
    height: 86px;
    line-height: 86px;
    font-size: 14px;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

.nav ul li a {
  text-decoration: none;
  color:#000000;
  display: block;
  transition: .3s background-color;
  padding:0 24px;
}

.nav ul li a:hover {
  background-color: #5c89c7;
  color:#FFFFFF;
}

.nav a {
    border-bottom:none;
}

.nav li ul {
    position:absolute;
    display:none;
    width:inherit;
}

.nav li:hover ul {
    display:block;
}

.nav ul li ul li {
  display: block;
}

Most of the websites or answer I went through said to put display:block on the nested sub menu, but I tried that and it still displays horizontally, any help would be appreciated!