CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rizwan Ranjha
Rizwan Ranjha

Reputation: 380

HTML CSS DropDown Menu - Not Working

Hi I have created this menu and but I am unable to figure that why my second level Navigation Menu is not working. Here is my HTML Code

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden">
        <a class="page-scroll" href="#page-top"></a>
    </li>
    <li>
        <a class="page-scroll" href="#">HOME</a>
    </li>
    <li>
        <a class="page-scroll" href="#">ABOUT</a>
    </li>
    <li>
        <a class="page-scroll" href="#">SERVICES</a>
    </li>
    <li>
        <a class="page-scroll" href="#">LOCATIONS</a>
        <ul class="sub-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li><a href="#">New York</a></li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li>
        <a class="page-scroll" href="#">CONTACT US</a>
    </li>
</ul>

and I have done this CSS Trick, might be doing something silly mistake or something wrong :(

.nav {padding-left: 0;
      margin-bottom: 0;
list-style: none;
font-family:'open_sansbold_italic';
}
.nav>li {
margin: -1px !important;
position: relative;
display: block;
}
.nav>li>a {
background-color: #ececec !important;
position: relative;
display: block;
padding: 10px 15px;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav>li.disabled>a {
color: #777;
}
.nav>li.disabled>a:focus, .nav>li.disabled>a:hover {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.navbar-fixed-top {
top:0;
right:0;
left:0;
position: fixed;
border-width: 0 0 1px;
z-index: 1030;
}
.navbar-fixed-top .navbar-collapse {
max-height: 340px;
}
.navbar {
min-height: 53px;
/*margin-bottom: 10px; */
}
.navbar .sub-menu{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.navbar .sub-menu li{
position: relative;
height: 30px;
background: #999999;
}
.navbar .sub-menu li:hover{ background: #CCCCCC;
}

Please guide me or help me as I am unable to get it done :(

Upvotes: 0

Views: 62

Answers (1)

Progretarian
Progretarian

Reputation: 111

You mislabeled your ul class name for the sub-menu. It is in fact a dropdown-menu.

EDIT: Also the anchor tag needs the class="dropdown-toggle" data-toggle="dropdown" role="button" attributes in order to function as a nested menu. Refer to the navbar example on the bootstrap website and follow their code more closely. I have fixed your current HTML snippet below:

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden">
        <a class="page-scroll" href="#page-top"></a>
    </li>
    <li>
        <a class="page-scroll" href="#">HOME</a>
    </li>
    <li>
        <a class="page-scroll" href="#">ABOUT</a>
    </li>
    <li>
        <a class="page-scroll" href="#">SERVICES</a>
    </li>
    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LOCATIONS <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li><a href="#">New York</a></li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li>
        <a class="page-scroll" href="#">CONTACT US</a>
    </li>
</ul>

You can see the updated demo here at bootply

Upvotes: 3

Related Questions