2

I want to create menu like this:

Menu

I want to see red square on acitve page and after hover. Menu is created by:

<div id="menu">
    <ul>
    <li><a href="#"><span>Home</span><a></li>
    <li><a href="#"><span>About</span><a></li>
    <li><a href="#"><span>Contact</span><a></li>
    </ul>
</div>

I am trying to create this for 2 hours and nothing:( Can you give me an advice?

3
  • 6
    Can you provide a jsFiddle or show your current CSS? Commented Apr 24, 2013 at 20:19
  • 1
    Please close your <a>-Tag! It have to be a </a> after the </span> Commented Apr 24, 2013 at 20:25
  • the main problem for me is that this red square is bigger then menu. I cannot show it in a proper way. In every case it begins at the same height as this grafient Commented Apr 24, 2013 at 20:35

3 Answers 3

3

Here is a working jsfiddle for you:

http://jsfiddle.net/6sCZh/

li { list-style: none; float: left; background: url(http://getpersonas.cdn.mozilla.net/static/9/0/66090/preview_small.jpg) repeat-x; background-position: 0px 10px;   }

ul {  }

li a { display: block;   color: #fff; text-decoration: none; margin: 14px;   }

li a.active, li a:hover {  background-color: brown;  padding: 11px; margin: 3px; }

I've added a css class "active", which should be set server-sided with your php code or by setting it static in the html markup. Unfortunately I don't know a better way. Also a "clear"-tag would be nice because of the float :)

But maybe it helps a bit ;-)

Sign up to request clarification or add additional context in comments.

1 Comment

Thank's a lot. I had more complicated situation but example helped me :)
0

The easy way to do this is to give your anchor tags (or, better, their parent li elements) a class when they are selected.

Then create a rule that targets li.selected and li:hover which places the red box.

I cannot be more specific without seeing your HTML AND CSS.

Comments

0

For the gradient you'll need CSS3 or image. I used gradient generator for the demo - http://www.colorzilla.com/gradient-editor/

The idea is the active link to be higher that the menu and with negative top and bottom margins which compensate for the height difference. And don't put overflow: hidden to the menu :)

http://jsfiddle.net/23zZE/

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.