Making current menu dropdown.
hello, have menu on site not coded have dropdown links. have search internet answears on how make menu drop down information can find involves making new menu whereas wish keep existing 1 (if possible).
the css menu follows:
#navigation-row { background: #aeb5b8 url("../images/navigation-bg.gif") repeat-x left top; height: 38px; border-left: solid 1px #818b8f; border-right: solid 1px #818b8f; width: 920px; margin: 0px auto; } ul#navigation { display: block; float: left; list-style: none; background: url("../images/nav-spacer.gif") repeat-y -1px top; height: 38px; } ul#navigation li { display: block; float: left; background: url("../images/nav-spacer.gif") repeat-y right top; height: 38px; padding-right: 2px; } ul#navigation li { display: block; float: left; line-height: 38px; padding: 0px 20px; font-family: verdana; font-size: 14px; color: #313a3e; text-decoration: none; text-transform: uppercase; letter-spacing: -1px; } ul#navigation li a:hover, ul#navigation li a.active { background: url("../images/nav-bg-hover.gif") repeat-x left top; }
and html menu below:
<div id="navigation-row"> <ul id="navigation"> <li><a href="#" class="active">home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">faq</a></li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul> <form action="" method="post" id="search-form"> <div> <input type="text" class="search-input" value="type , hit enter search" onfocus="clearinput(this);" onblur="restoreinput(this);" /> <input type="image" src="images/icon-search.gif" /> </div> </form> <div class="clearer"></div> </div>
unfortunatly website not online yet cannot provide link.
any grately appreciated , can provide more info if needed.
thanks!
first, you'll need create html list sub-lists. , need add sufficient css code sub-lists display on hover. new menu required.
copy & paste following code new, blank page. change css colors & backgrounds desired.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>horizontal drop menu</title> <!--[if lt ie 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <style> body { font-family: "trebuchet ms", arial, helvetica, sans-serif; } /* begin horizontal drop-menu */ nav { position: relative; width: 800px; /**adjust width needed**/ margin: 0 auto; padding: 0; text-align: center; border: 1px dotted red; } nav ul { margin: 0; padding: 0 } nav li { list-style: none; font-size: 12px; float: left; text-align: center; } /**top level menu**/ nav li { display: block; text-decoration: none; margin-right: 12px; /* space between links */ color: #fff; width: 9em; /* adjust needed or use auto */ padding: 8px; font-weight: bold; line-height: 1.50em; background: #c33; border: 1px solid #000; border-top: none; } /**top menu style on mouse on - in browsers**/ nav li:hover > { color: #fff; background: #333; } /**sub-menu**/ nav li ul { display: none; text-align: center; margin: 0; padding: 0 1em; background: none; } /**sub-menu, older ie**/ nav li:hover ul, nav li.hover ul { display: block; position: absolute; padding: 0; } nav li:hover li, nav li.hover li { float: none; } /**drop-menu style**/ nav li:hover li a, nav li.hover li { width: 9em; /* adjust width needed or use auto */ margin-top: 0; } /**drop-menu style on mouse over**/ nav li li a:hover { background: maroon; color: gold; } /* clear floated elements @ end*/ nav:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } /**end horizontal drop-menus**/ </style> </head> <body> <nav> <ul> <li><a class="first" href="#">about ▼</a><ul> <li><a href="#">videos</a></li> <li><a href="#">newsletter</a></li> </ul> </li> <li><a href="#">products ▼</a><ul> <li><a href="#">broken glass</a></li> <li><a href="#">mosaic tiles</a></li> <li><a href="#">adhesives</a></li> <li><a href="#">grout</a></li> </ul> </li> <li><a href="#">accessories ▼</a><ul> <li><a href="#">gloves</a></li> <li><a href="#">rubber mallets</a></li> <li><a href="#">sponges</a></li> <li><a href="#">safety glasses</a></li> </ul> </li> <li><a href="#">contact</a></li> </ul> </nav> </body> </html>
nancy o.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment