html - How can you create a vertical navbar with drop down menus? -


i have vertical navbar. now, navbar supposed have drop down menus. problem me is, unable make drop down menus side of menu. have html , css code on jsfiddle here: http://jsfiddle.net/maxkoenig/zyuex/ here if don't want go on website: html:

<div id="wrap">           <ul class="navbar">              <li><a href="/index.php">home</a></li>              <li><a href="/boattypes/featureboats.php">boat types</a>                 <ul>                     <li><a href="/boattypes/sprint/sprint.php">sprint</a></li>                    <li><a href="/boattypes/fitnesstouring/fitnesstouring.php">fitness-touring</a></li>                    <li><a href="/boattypes/marathon/marathon.php">high performance</a></li>                     <li><a href="/boattypes/surfski/surfskis.php">surf skis</a></li>                 </ul>                       </li>              <li><a href="/rent/services.php">inventory</a>                 <ul>                     <li><a href="/rent/memb.php">membership</a></li>                    <li><a href="/rent/rboat.php" >rentals</a></li>                     <li><a href="/rent/rb.php">banquet</a></li>                     <li><a href="/rent/faq.php">faq</a></li>                  </ul>                       </li>              <li><a href="/ages/ages.php">ages</a>                 <ul>                    <li><a href="/ages/adult.php">adults</a></li>                     <li><a href="/ages/children.php">children</a></li>                  </ul>                       </li>              <li><a href="about.php">about us</a>                  <li><a href="contact_us.php">contact us</a>                 </ul>        </div>

css:

#wrap {     width: 150px;      height: 50px;      padding-bottom: 10px;     margin: 0; /* ensures there no space between sides of screen , menu */     z-index: 1; /* makes sure menu remains on top of other page elements */     position: fixed;     background-color: royalblue;      } .navbar {     height: 50px;     padding: 0;     padding-bottom: 10px;     margin: 0;     position: fixed; /* ensures menu doesn’t affect other elements */     border-right: 1px solid #54879d;      z-index: 12;     } .navbar li  {             padding-bottom: 10px;             height: auto;             width: 150px;  /* each menu item 150px wide */             /*float: left;   lines menu items horizontally */             object-position: top;             text-align: center;  /* text placed in center of box */             list-style: none;  /* removes default styling (bullets) list */             font: normal bold 12px/1.2em arial, verdana, helvetica;               padding: 0;             margin: 0;             background-color: royalblue;                         } .navbar   {                                    padding: 18px 0;  /* adds padding on top , bottom text appears centered vertically */         border-left: 1px solid #0026ff; /* creates border in lighter shade of blue background.  combined right border, creates nice effect. */         border-right: 1px solid #0026ff; /* creates border in darker shade of blue background.  combined left border, creates nice effect. */         text-decoration: none;  /* removes default hyperlink styling. */         color: #000; /* text color black */         display: block;         }  .navbar li:hover, a:hover {     background-color: rgba(4, 6, 0, 0.00); }  .navbar li ul   {         display: none;  /* hides drop-down menu */         height: auto;                                            margin: 0; /* aligns drop-down box underneath menu item */         padding: 0; /* aligns drop-down box underneath menu item */                  }                 .navbar li:hover ul     {                         display: block; /* displays drop-down box when menu item hovered on */                         z-index: 12;                         padding-left: 1px;                          }  .navbar li ul li {     background-color: #2ba6ff; }  .navbar li ul li  {         border-left: 1px solid #0026ff;         border-right: 1px solid #0026ff;         border-top: 1px solid #0026ff;         z-index: 1001;         }  .navbar li ul li a:hover {     background-color: #0094ff;     z-index: 1000; }

do this:

.navbar li ul {     display: none; /* hides drop-down menu */        margin-left: 150px;     margin-top: -50px;     float:left;     height: 0; }

here's jsfiddle demo: http://jsfiddle.net/leniel/zyuex/3/


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more