Member Avatar for dominique7

Hello,

as I mostly used horizontal menus, I'm just coming across this now:

How to have those menu items in a fixed width box and still make use of the hover feature?
I mean I want the background of the selected menu item to change it's background throughout the whole width of the surrounding menu box.

Below's my example. I tried to put padding around the text (so much that it overflows and that I used overflow hidden in the next higher div) and it worked, but then, the text isn't centered anymore!

I'd be really glad if someone could give me a hint on how to achieve what I want.

Cheers,
Dominique

menu.html

<html>
<head>
<title>menu test</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="menu">
<ul>
<li><a href="#"> home </a></li>
<li><a href="#"> vita </a></li>
<li><a href="#"> concerts </a></li>
<li><a href="#"> photos </a></li>
<li><a href="#"> extraits </a></li>
<li><a href="#"> presse </a></li>
<li><a href="#"> liens </a></li>
<li><a href="#"> contact </a></li>
</ul>
</div>

</body>
</html>

menu.css

body {
	background: #333;
}

div#menu {
	text-align: center;
	float: right;
	margin: 15px 15px 10px 10px;
}

ul { }

li {
	text-align: center;
	overflow: hidden;
	width: 130px;
	margin: 10px 0px;
	list-style: none;
	color: #fff;
	border: 1px dotted #999;
}

li a {
	text-decoration: none;
	margin: 0px;
	padding: 10px 60px;
	color: #fff;
}

li a:hover {
	background: #888;
}
  • 6 Contributors
  • 8 Replies
  • 174 Views
  • 2 Years Discussion Span
  • Latest Post Latest Post by ngprnk
Member Avatar for cloud09

I would remove the ul and simply style the anchors like so:

#menu a {
	width: 100px;
	padding: 10px;
	border: 1px white solid;
	background: #000;
	text-align: center;
	text-decoration: none;
	font-size: 1.4em;
	color: #abcdef;
	float: left;
}
#menu a:hover {
	background: #444;
}

adjust the width, colors, and padding, etc to fit your menu.
EDIT: The float may not be needed.

Edited by cloud09 because: n/a
Member Avatar for dominique7

Oh, I kept the list, but you helped me get the display result I wanted.
Thank you already!

I still have a question:
Why can you set the width with "#menu a" but not with "#li a"?
At least I tried before and it didn't work.

Cheers,
Dominique

Member Avatar for master_99

just add "display:block and padding" more detail look at this.you found professional help

li a {
	text-decoration: none;
	margin: 0px;
	padding: 10px 60px;
	color: #fff;
        display:block;
	padding:10px;
}
Edited by Ezzaral because: Snipped link and added code tags.
Member Avatar for MoonTraveller

I would remove the ul and simply style the anchors like so:

It's worth pointing out that you should keep the <ul> for accessibility. A bunch of links like this in not accessible:

<a href="#">Home</a> <a href="#">Vita</a> <a href="#">Concerts</a>

Whereas in a list, it is accessible:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Vita</a></li>
<li><a href="#">Concerts</a></li>
</ul>
Member Avatar for diafol

MT - well said. Lists are right.

'a' tags have always been a pain. They are inline elements so that they can't be 'dimensioned' unless you change them to block.

Try an 'old' tutorial:
http://www.ssi-developer.net/css/menu-rollover-effect.shtml

A List Apart, Stu Nicholls (CSSPlay) have good tutorials.

Member Avatar for master_99

just add "display:block and padding" more detail look at this.you found professional help see tutorials99.com
1.
li a {
2.
text-decoration: none;
3.
margin: 0px;
4.
padding: 10px 60px;
5.
color: #fff;
6.
display:block;
7.
padding:10px;
8.
}

Member Avatar for ngprnk 
    <html
    <head>
    <link href="menu.css" rel="stylesheet" type="text/css" />
    </head>
    <div id="menu">
    <ul>
    <li><a href="#"> home </a></li>
    <li><a href="#"> vita </a></li>
    <li><a href="#"> concerts </a></li>
    <li><a href="#"> photos </a></li>
    <li><a href="#"> extraits </a></li>
    <li><a href="#"> presse </a></li>
    <li><a href="#"> liens </a></li>
    <li><a href="#"> contact </a></li>
    </ul>
    </div><li><a href="#"> contact </a></li>
    </ul>
    </div>




    /*css code for this

    .menu{
    width 250px;
    overflow:hidden;}

    li{
    text-decoration:none
    }

     a:hover
    {   padding-right: 80px;
        background-color:#0eaff7 ;
        border: 6px solid 0eaff7;
    }

    */
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.