here 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 , create email/excel</a></li> <li><a href="#">reports</a> <ul> <li><a href="#">re-create email</a></li> <li><a href="#">merge , 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 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: 0.2s; } nav > ul > li > { 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 { 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 wanted have sub menu may navigation bar if mouse pointed in nav menu sub menu drop down. code didnt work. seem problem?
remove overflow: hidden; nav make works.
because overflow hidden not allow submenu display on hover.
nav { background-color: #333; border: 1px solid #333; color: #fff; display: block; margin: 0; // overflow: hidden; // remove } 
Comments
Post a Comment