html - Turning navigation bar into a drop down navigation -

-

i'm trying edit code when hovers on products, drop down , show different sub categories, want display 4 options, 450, 250, 2 strokes , junior.

here html:

<link rel="stylesheet" type="text/css" href="website.css"> <font face="tahoma"> <font color="lightgray"> <html>   <head>      <meta http-equiv="content-type" content="text/html; charset=utf-8">      <style type="text/css">       body {         font-family: verdana,  helvetica, sans-serif;         font-size: 20px;        }       .horizontal_menu {         display: inline;         text-align:center;         border: 1px lightgray;         background-color: white; opacity: 0.5; filter: alpha(opacity=50);          margin: 2px;         border: 2px solid #a1a1a1;         padding: 5px 20px;         width: 800px;         border-radius: 10px;       }       .horizontal_menu li {         text-align:center;         display: inline;         list-style: none;         margin: 5px;       }       .horizontal_menu li {         text-decoration: none;         color: black;       }       .horizontal_menu li a:hover {         text-decoration: underline;       }     </style>   </head>   <body>     <center>     <ul class="horizontal_menu">       <li>         <a href="homepage.php" title="back home page">home</a>       </li>       <li>         <a href="products.php" title="check out products in stock">products</a>       </li>         <li>         <a href="aboutus.php" title="check out products in stock">about us</a>       </li>         <li>         <a href="contact.php" title="check out products in stock">contact</a>       </li>      </center>       </ul>   </body> </html> <?php  ?>

and css:

body {     background-image: url("http://p1.pichost.me/i/5/1282860.jpg");     background-size: cover; } h2 {     color: lightgray;     margin-left: 5px; } legend {      display: block;     padding-left: 2px;     padding-right: 2px;     border: none; } div {      border: 2px solid #a1a1a1;     padding: 10px 40px;     background #dddddd;     width: 300px;     border-radius: 25px; }  { list-style:none; list-style-type:none; }

thanks in advance!

nest second list inside first, below example of how works. here fiddle completed example:

http://jsfiddle.net/x5pmmcyq/

html:

  <ul class="horizontal_menu">       <li>         <a href="homepage.php" title="back home page">home</a>           <ul>           <li>nested item</li>           <li>nested item</li>           <li>nested item</li>           </ul>       </li>

and add in css hidden nested items show on hover this:

css:

.horizontal_menu li > ul {         display: none        }  .horizontal_menu li:hover > ul {         display: block;     }

the example used in fiddle taken site: http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu


Comments

Post a Comment

Popular posts from this blog

matlab - "Contour not rendered for non-finite ZData" -

-
i'm trying plot frequency characteristic equation using ezplot, matlab gives following warning, "contour not rendered non-finite zdata". have used command plot frequency equations warning , plot display empty , not change axis range well. can please help. appreciated. here's code i'm using. % transfer matrix case-i, thin rotor clear all; clc; ei = 1626; l = 0.15; m = 0.44108; = 2.178*10^-4; i_p = 2.205*10^-5; itr = 0.24; i_pr = 0.479; syms p n; f = [1 l*1i l^2/(2*ei)*1i l^3/(6*ei); 0 1 l/ei -l^2/(2*ei)*1i; 0 0 1 -l*1i; 0 0 0 l]; p = [ 1 0 0 0; 0 1 0 0; 0 -it*p^2+i_p*n*p 1 0; -m*p^2 0 0 1]; p_r = [1 0 0 0; 0 1 0 0; 0 -itr*p^2+i_pr*n*p 1 0; -m*p^2 0 0 1]; = f*p*f*p*f*p*f; b = p_r*f*p*f*p*f; r = a(1,2)/a(1,4); a12_p = 0; a22_p = a(2,2)-r*a(2,4); a32_p = a(3,2)-r*a(3,4); a42_p = a(4,2)-r*a(4,4); ap(2,2) = a22_p; ap(3,2) = a32_p; ap(4,2) = a42_p; ap(4,4) = 1; c = b*ap; m = [c(3,2) c(3,4); c(4,2) c(4,...
Read more

delphi - Indy UDP Read Contents of Adata -

-
i using indy udp server read string of data. however, not know how work adata parameter. can around converting binary using bytetobin function below , convert hex using bintohex1 . feel stupid , works slow. know how can directly results without 2 conversions? thanks!! here codes: procedure tform1.idudpserver1udpread(athread: tidudplistenerthread; const adata: tidbytes; abinding: tidsockethandle); var buf: tidbytes; buffer: string; data_received: string; begin if bytestostring(adata) <> 'hello' begin buffer := hextostring('00'); setlength(buf, length(buffer)); copytidstring(buffer, buf, 0); abinding.sendto(abinding.peerip, abinding.peerport, buf); data_received := bintohex1(bytetobin(adata[1]) + bytetobin(adata[2]) + bytetobin(adata[3]) + bytetobin(adata[4]) + bytetobin(adata[5]) + bytetobin(adata[6]) + bytetobin(adata[7]) + bytetobin(adata[8]) + bytetobin(adata[9]) + bytetobin(adata[10]) + bytetobin(adata[11...
Read more

javascript - Any ideas when Firefox is likely to implement lengthAdjust and textLength? -

-
any ideas when firefox implement lengthadjust andtextlength?..... working svg application. lengthadjust , textlength working fine in chrome not working in fire fox . <svg viewbox = "0 0 500 300" version = "1.1"> <defs> <path id="s3" d="m 10,90 q 100,15 200,70" /> </defs> <g> <text font-size = "20"> <textpath xlink:href="#s3" textlength="205"> short text</textpath> </text> <use xlink:href="#s3" fill="none" stroke="black" stroke-width="1"/> </g> </svg> this implemented in firefox text elements (not textpath or tspan) in case that's ok though can move attribute text element. <svg viewbox = "0 0 500 300" version = "1.1"> <defs> ...
Read more