Home/ Questions/Q 6736917
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T11:11:12+00:00

I am trying to create a menu that looks like the image linked. (https://i.stack.imgur.com/BCiqJ.jpg).

  • 0

I am trying to create a menu that looks like the image linked. (https://i.stack.imgur.com/BCiqJ.jpg).
I thought it would be really simple, but I ran into problems with trying to break the words with CSS only. This is for a cms, so it would be important for the markup to be:

<ul>
  <li></li>
  <li></li> etc...
</ul>

In case the image link is broken, Im trying to create a menu with no space between words and with words breaking in the middle to accommodate to the width of the <ul>

such as:

HOMEVID
EOSMUSI
CCALEND
AREVENT
SPHOTO
SABOUTC
ONTACT

I faked it here by using manually inputed <br /> line break tags… is there a way to make this happen with CSS?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Well I know you said you wanted to use an un-ordered list, but I think I’ve got a solution for you that uses divs and spans instead:

    <style type="text/css">
    #navigation span:nth-child(even)
    {
        font-weight: bold;
    }
</style>
<div id="navigation" style="width: 76px; word-wrap: break-word">
    <span>HOME</span><span>VIDEOS</span>
    <span>MUSIC</span><span>CALENDAR</span><span>EVENTS</span>
    <span>PHOTOS</span><span>ABOUT</span><span>CONTACT</span>
</div>

    I tested this in Chrome only, so your mileage my vary. Nothing in there is browser specific, I don’t think, so this should be a workable cross-browser solution.

    • 0