Member Avatar for LucyB

Hello,

I used DW CS3 and photoshop to create a few sites. Currently I create spliced layout in PS and create the rest of the page in DW. Very simple generally..

However, I'm wondering how I would anchor or fix a drop-down style menu to my page. See wwwDOTomarimckenzieDOTcom Here I have some buttons for navigation, this is generally OK but I'd like to have a drop down menu that was anchored instead.

Please advise.

Appreciated.

  • 2 Contributors
  • 2 Replies
  • 106 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by Grn Xtrm

Dani AI

Generated

Two ways to interpret "anchored" here: keep the menu stuck to the page top as the user scrolls (fixed/sticky), or keep a dropdown visually tied to its parent button so the submenu appears exactly beneath it. your current sliced header can work with either — pick fixed/sticky when you want persistent navigation; pick a positioned submenu when you want flyouts tied to each button.

A simple, semantic pattern that works for both:

<nav class="main-nav" role="navigation">
  <ul>
    <li class="has-sub">
      <a href="#">Menu</a>
      <ul class="sub-menu"> ... </ul>
    </li>
  </ul>
</nav>
/* fixed to viewport */
.main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }

/* submenu anchored to parent */
.has-sub { position: relative; }
.sub-menu { position: absolute; top: 100%; left: 0; display: none; }
.has-sub:hover .sub-menu,
.has-sub:focus-within .sub-menu { display: block; }

Notes and troubleshooting:

  • : a form <select> renders a dropdown but is not ideal for site navigation or styling and has poor keyboard semantics for multi-level menus.
  • If a submenu is clipped, check ancestor overflow (any overflow: hidden will cut off absolutely positioned children). Add position: relative to the menu parent so position: absolute is anchored correctly.
  • Use z-index and test stacking contexts if the dropdown is hidden behind other elements.
  • For touch devices, replace hover-only behavior with a click/toggle plus aria-expanded and keyboard support. See MDN on CSS positioning and ARIA nav guidance for details.

Further reading: CSS position on MDN and .

Recommended Answers

All 2 Replies

Member Avatar for LucyB

Help?

Member Avatar for Grn Xtrm

Off the top of my head, I'm pretty sure you must use:
<select>
<option> whatever you want in drop down menu</option>
repeat this for as many items you want in the drop down menu.
Be sure to enclose all of these items in option tags.
Also make sure to close your select tag.
Hope this examples helps.

<select name = "toppings">
		<option> Pepperoni </option>
		<option> Suasage </option>
		<option> Peppers </option>
		<option> Garlic</option>
</select>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.