Creating menu in html and css

Question

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?

Please close your <a>-Tag! It have to be a </a> after the </span> — Stefan Brendle
– Stefan Brendle, 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 — Chris
– Chris, Commented Apr 24, 2013 at 20:35

Stefan Brendle · Accepted Answer · 2013-04-24 20:36:35Z

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 ;-)

answered Apr 24, 2013 at 20:36

Stefan Brendle

1,5646 gold badges20 silver badges39 bronze badges

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

1 Comment

Chris Over a year ago

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

Jeff · Accepted Answer · 2013-04-24 20:24:55Z

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.

answered Apr 24, 2013 at 20:24

Jeff

2,8693 gold badges44 silver badges70 bronze badges

Comments

Kaloyan · Accepted Answer · 2013-04-24 20:26:14Z

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/

answered Apr 24, 2013 at 20:26

Kaloyan

7,3324 gold badges36 silver badges49 bronze badges

Collectives™ on Stack Overflow

Creating menu in html and css

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related