Member Avatar for neoseeker191

I was wondering if someone could tell me if it is possible to take the navbar I made for the website, which was created using Dreamweaver and Fireworks, and convert it to CSS. What I am trying to do is convert the site to mainly CSS. I'm not looking for someone to tell me exactly how to do it, just if its possible and maybe how I would get started. I have already made an attempt at it but it didn't turn out well.

  • 3 Contributors
  • 2 Replies
  • 133 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ccube921

Dani AI

Generated

: yes — converting that Dreamweaver/Fireworks navbar to CSS is entirely doable. Two practical routes: (A) rebuild the nav with clean, semantic markup (recommended), or (B) progressively replace the Fireworks-sliced images with CSS backgrounds/sprites while keeping the existing structure. Rebuilding avoids the clutter of DW-generated HTML and makes styling, accessibility, and maintenance much easier.

A minimal, practical pattern to follow (structure + show/hide for a dropdown):

<nav>
  <ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a>
      <ul class="submenu">
        <li><a href="#">Prod 1</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>
.nav { list-style:none; margin:0; padding:0; }
.nav > li { display:inline-block; position:relative; }
.nav a { display:block; padding:10px 14px; text-decoration:none; }
.submenu { display:none; position:absolute; top:100%; left:0; margin:0; padding:6px 0; }
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu { display:block; }

Accessibility and mobile notes: add keyboard support via :focus-within and ensure links receive focus. For touch devices, :hover is unreliable — either add a tiny script to toggle a class on click or use a CSS checkbox toggle (less ideal). Use ARIA attributes (aria-haspopup, aria-expanded) if JavaScript controls visibility. Replace any image text with real text and visually hide it for decorative images using an sr-only helper so screen readers still get content:

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; white-space:nowrap; }

Troubleshooting tips: inspect DW output with browser dev tools and strip inline styles; check z-index on dropdowns; watch gaps caused by inline-block (use float:left or parent font-size:0); consolidate hover images into one sprite or use SVG/CSS gradients to reduce requests. is right — many pure-CSS tutorials exist; ’s pointer to “pure CSS menus” is useful for simple menus, but for multi-level menus and reliable mobile behavior a small amount of JS for toggling is often the most robust solution.

Recommended Answers

All 2 Replies

Member Avatar for almostbob

Emphatically yes
and there are dozens of tutorials on creating css menu bars on the web
with drop downs on some items, mouseover and onclick effects
(hover and active effects)
they work the same in browsers with/without javascript, only better

Member Avatar for ccube921

Google pure css menus and take your pick

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.