Custom Ordered List <li>TEXT <a href

HTML & CSS
1

I’ve done my hours worth of searching and I just can’t find an example of this that I need to complete my site design and move forward.

CSS:


.sidebarbox ul{margin:0px; padding:3px 3px 2px 3px; background:#FFF}
.sidebarbox ul li{list-style:none; display:inline}
.sidebarbox ul li a{display:block; padding:4px 4px 6px 10px; line-height:18px; background:#F0F3F4; text-decoration:none; font-family:Arial,Helvetica,sans-serif; font-weight:bold; border-bottom:1px solid #FFF; color:#20252B; font-size:12px}
.sidebarbox ul li a:hover{text-decoration:none; background:#A63201; color:#FFF}

I just need the ability to have the styled sidebar menu but have text outside of the <a href like this:
<li>UNLINKED <a href=“#”>Linked Text</a></li>

And have it show inline. Can anyone assist?

2

Yeah I would guess that the LIs’ need to stack on one another since it is for a sidebar nav.

In that case you would want to set display:block on the LI as ralph just mentioned.

3

You need to describe what you actually want so we can tell you what to do. do you want list items one above the other? In that case, remove display: inline from the list items. Too many unknown here.

4

Yes, it is. Without it, all the lists collapse into each other and the hover effect won’t work on the unlinked too.

5

Obviously the easiest way is to remove display: block from the <a>. Is that needed?

If you need block-like behavior, you could try display: inline-block instead.

6

Sounds like some vertical alignment issues, which should be easy to fix.

7

What do you mean wonky? We can help with that if you give us a bit more details.

8

Cool, moved the display:block to the LI, this fixed everything except the hover is a bit wonky now. I’ll play around with it.