html - Fixed Navigation with Dropdown -
so have been working on designing navigation in css. want fixed navigation dropdown menu on couple. can etiher top navigation or dropdown can't both. have suggestions?
css:
body {margin: 0; font-family: 'sf comic script';} .topnav-brand { float: left; margin-left: 30px; padding: 15px 15px; font-size: 24px; line-height: 20px; height: 24px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } .topnav-brand:hover, .topnav-brand:focus { text-decoration: none; color: #5e5e5e; background-color: transparent; } ul.topnav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #7a003d; background-image: -webkit-linear-gradient(top, #ad0057 0%, #7a003d 100%); background-image: -o-linear-gradient(top, #ad0057 0%, #7a003d 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#ad0057), to(#7a003d)); background-image: linear-gradient(to bottom, #ad0057 0%, #7a003d 100%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#ffad0057', endcolorstr='#ff7a003d', gradienttype=0); filter: progid:dximagetransform.microsoft.gradient(enabled = false); border-radius: 2px; position: fixed; top: 0; width: 100%; } ul.topnav li { float: left; } ul.topnav li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } ul.topnav li a:hover, .dropdown:hover .dropbtn { background-color: #470024; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; min-width: 160px; background-color: #470024; top: 100%; } .dropdown-content { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {color: #7a003d; background-color: #ffffff; background-image: -webkit-linear-gradient(top, #f2f2f2 0%, #ffffff 100%); background-image: -o-linear-gradient(top, #f2f2f2 0%, #ffffff 100%); background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#ffffff)); background-image: linear-gradient(to bottom, #f2f2f2 0%, #ffffff 100%); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#fff2f2f2', endcolorstr='#ffffffff', gradienttype=0); filter: progid:dximagetransform.microsoft.gradient(enabled = false); border-radius: 2px;} .dropdown:hover .dropdown-content { display: block; } html (properly linked)
<ul class="topnav"> <a class="topnav-brand">computer services unit</a> <li><a href="#home">infrastructure</a></li> <li class="dropdown"><a href="#news" class="dropbtn">classroom & collaborative services</a> <div class="dropdown-content"> <a href="#">mobile</a> <a href="#">network</a> <a href="#">link 3</a> </div> </li> <li><a href="#contact">tech shop</a></li> <li><a href="#about">application & web development</a></li> <li><a href="#about">business analysis & prohect management</a></li> </ul>
please try code you.
body { padding-top:50px; margin:0; } nav { position:fixed; top:0; left:0; width:100%; z-index:999; } nav ul { list-style-type: none; margin: 0; padding: 0; background-color: crimson; display: inline-block; width: 100%; } nav li { float: right; position: relative; } nav li { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } nav li a:hover { background-color: #111; } nav ul ul { position: absolute; display: none; left: 0; z-index: 999; } nav ul ul li { float: none; width:100%; } nav ul ul ul { left: 100%; top: 0; display: float; } nav li:hover > ul { display: block; }<nav> <ul class="topnav"> <li style="float:left"> <a class="topnav-brand">computer services unit</a> </li> <li><a href="#home">infrastructure</a></li> <li><a href="#news" class="dropbtn">classroom & collaborative services</a> <ul> <li> <a href="#">mobile</a></li> <li> <a href="#">network</a></li> <li><a href="#">link 3</a></li> </ul> </li> <li><a href="#contact">tech shop</a></li> <li><a href="#about">application & web development</a></li> <li><a href="#about">business analysis & prohect management</a></li> </ul> </nav>
Comments
Post a Comment