CODEWITHSUNDEEP
htmlcss
ms.tery
ms.tery

Reputation: 149

how to make a sub navigation in html

here is index.html code: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="icon" type="image/png" href="SENCOR_Logo.ico">
<title>SENCOR</title>
</head>
<body>
<div class="bg-div">
    <img class="logo-img" src="SENCOR_Logo.jpg" width="130" height="45">
    <nav>
        <ul>
            <li><a href="#">Monitoring</a></li>
            <li><a href="#">Process</a></li>
            <li><a href="#">Post and Create Email/Excel</a></li>
            <li><a href="#">Reports</a>
                <ul>
                    <li><a href="#">Re-Create Email</a></li>
                    <li><a href="#">Merge and Post</a></li>
                    <li><a href="#">Create Excel Report</a></li>
                </ul>
                </li>
                <li>
            <li><a href="#">Tools</a>
                <ul>
                    <li><a href="#">Users</a></li>
                    <li><a href="#">Folder Path</a></li>
                    <li><a href="#">Change Folder Path</a></li>
                </ul>
                </li>
            <li><a href="#">Sales</a></li>
        </ul>
    </nav>
</div>
</body>
</html>

here are the style.css code:

body{
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;
    overflow: hidden;
}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;
}

nav > ul > li > a {
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;

}

nav li > ul{
    display : none;
    margin-top:1px;
    background-color: #bbb;

}

nav li > ul li{
    display: block;
}

nav  li > ul li a {
    color: #111;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
}

nav li:hover {
    background-color: #666;
}
nav li:hover > ul{
    position:absolute;
    display : block;
}

-----------
.logo-img{

    position: fixed;
    margin: 10px 15px 15px 10px;
    left: 0;
    display:inline;
}

.bg-div{
    background:#333;
    height: 50px;
}

.bg-div nav {
    position: fixed;
    display:inline;
    right: 0;
}

so i wanted to have a sub menu for may navigation bar that if the mouse pointed in the nav menu the sub menu will drop down. but my code didnt work. what seem to be the problem?

Upvotes: 0

Views: 5349

Answers (3)

mmativ
mmativ

Reputation: 1414

Same answer, just remove the overflow hidden from

nav {
background-color: #333;
border: 1px solid #333;
color: #fff;
display: block;
margin: 0;
overflow: hidden;
}

after that your code is working,

Upvotes: 0

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

remove overflow this class nav

 body{
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-family: "Lucida Grande", "Helvetica Nueue", Arial, sans-serif;
}
nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;

}
nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
nav ul li {
    margin: 0;
    display: inline-block;
    list-style-type: none;
    transition: all 0.2s;

}

nav > ul > li > a {
    color: #aaa;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;

}

nav li > ul{
      background-color: #bbb;
    display: none;
    margin-top: 1px;
}

nav li:hover ul{
    display: block;
}

nav  li > ul li a {
    color: #111;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
}

nav li:hover {
    background-color: #666;
}
nav li:hover > ul{
    position:absolute;
    display : block;
}

-----------
.logo-img{

    position: fixed;
    margin: 10px 15px 15px 10px;
    left: 0;
    display:inline;
}

.bg-div{
    background:#333;
    height: 50px;
}

.bg-div nav {
    position: fixed;
    display:inline;
    right: 0;
}

https://jsfiddle.net/28ze1wxv/1/

Upvotes: 1

ketan
ketan

Reputation: 19341

Remove overflow: hidden; from nav make it works.
Because overflow hidden not allow submenu to display on hover.

nav {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
    display: block;
    margin: 0;
//    overflow: hidden; // remove this
}

Working Fiddle

Upvotes: 3

Related Questions