Menu Problems - Trying to create CSS Menu failing miserably

Ok starting to get pretty frustrated with this one, tried several options and think I’m doing more css damage than good!

Basically I’m tring to create an in-page menu to look similar to the one on the tesco .com homepage under ‘Direct’ with sub items; pc, phones, home electrical.

Among other problems I can’t get my width consistent for all items, tried the width attribute in several areas of my css with no success. Here is a copy:


#content ul.mainpagenav {
                          font-size: 13px;
		          text-indent: none;
                          list-style-type: none;
                          
                          width: 200px;
                          margin-left: 0px;
                             padding-left: 0px;
                          height: auto;
                          line-height: 124%;
}

#content ul.mainpagenav li{
                             border-bottom: 1px solid #ffffff;
                             margin-left: 0px;
                             padding-left: 0px;
                             padding: 7px 0 5px 7px;
                             
                             
}

#content a.mpn {
                 color: black;
                 background: #ccccff;
                 padding: 7px 0 5px 7px;
 }

#content a.mpn:hover {
                        background: #ECF2F9;
	                width: 200px;

}

My HTML


<ul class="mainpagenav">
	<li><a class="mpn" href="#tfg-baitrunner">TFG Baitrunner Reels</a></li>
	<li><a class="mpn" href="#shimano-baitrunner">Shimano Baitrunner Reels</a></li>
	<li><a class="mpn" href="#okuma-baitrunner">Okuma Baitrunners</a></li>
	<li><a class="mpn" href="#fox-baitrunner">Fox Baitrunners</a></li>
	<li><a class="mpn" href="http://carp-fishing-reels.com/big-pit-reels/#d">Daiwa Baitrunner Reels</a></li>
	<li><a class="mpn" href="#other">Other Baitrunners</a></li>
</ul>

Am I going about this the wrong way? Any help is appreciated, thanks guys

Hi,

Anchors are inline elements and therefore are only as wide as the content they hold. You cannot apply dimensions to inline elements so you need to set them to display:block instead.
e.g.


#content a.mpn {
    color: black;
    background: #ccccff;
    padding: 7px 0 5px 7px;
 [B]   display:block;
    position:relative;/* ie6 fix*/[/B]
}

There is no need to add a class to every anchor in that list because all are reachable via the parent without needing an extra class.


[B]ul.mainpagenav li a {[/B]
    color: black;
    background: #ccccff;
    padding: 7px 0 5px 7px;
    display:block;
    position:relative;/* ie6 fix*/
}

There is also no need to put Content in front of all the classes unless you have a specific reason for doing so (such as over-riding existing styles or to give more weight). Otherwise just keep it simple.:slight_smile:

How about something like this? I didn’t check it but this is what I would do before checking it in the browser. Not sure about the line-height though because there also is a padding-top and -bottom in the link.


ul.mainpagenav {
 font-size: 13px;
 list-style: none;
 width: 200px;
 margin: 0px;
 padding: 0px;
 /* removed the width */
}
 
ul.mainpagenav li {
 border-bottom: 1px solid #ffffff;
 }
 
ul.mainpagenav a { /* no need for the classname because they are all the same */
 color: black;
 background: #ccccff;
 display:block;
 width:193px; /* width moved from a:hover to here, 193px + 7px (padding-right) = 200px */
 line-height: 124%;
 padding: 7px 0 5px 7px;
 }
 
ul.mainpagenav a:hover {
 background: #ECF2F9;
}

Is something like this what you are looking for?


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Experiment</title>
	
<style type="text/css" media="all">
ul.mainpagenav {
  font-size: 13px;
  text-indent: none;
  list-style-type: none;
  width: 200px;
  margin-left: 0px;
  padding-left: 0px;
  line-height: 124%;
}
 
ul.mainpagenav li {
  border-bottom: 1px solid #ffffff;
  padding: 0 0 0 7px;
}
 
.mainpagenav a {
  color: black;
  background: #ccccff;
  padding: 7px 0 5px 7px;
  display: block;
}
 
.mainpagenav a:hover {
  background: #ECF2F9;
}
</style>
	
</head>

<body>
<ul class="mainpagenav">
    <li><a href="#tfg-baitrunner">TFG Baitrunner Reels</a></li>
    <li><a href="#shimano-baitrunner">Shimano Baitrunner Reels</a></li>
    <li><a href="#okuma-baitrunner">Okuma Baitrunners</a></li>
    <li><a href="#fox-baitrunner">Fox Baitrunners</a></li>
    <li><a href="http://carp-fishing-reels.com/big-pit-reels/#d">Daiwa Baitrunner Reels</a></li>
    <li><a href="#other">Other Baitrunners</a></li>
</ul>

</body>
</html>

The key is display: block on the <a> elements. I removed the unnecessary classes on the anchors.

EDIT: Bleh! Must remember to refresh the thread before posting. :blush:

@Paul: ninja’d again. I guess that’s the difference between 31K+ and 15 posts :lol: BTW I really like that you explain why you do something instead of just giving a solution.

Sorry for being off-topic.

Sorry :slight_smile: I’m going to sleep now so its all yours for the night :wink:

Awesome :smiley:

Thanks for the help and explainations, time to put the new knowledege to the test.