CODEWITHSUNDEEP
htmlcss
baron
baron

Reputation: 129

CSS <ul> - <li> menu: <a> element width height setting

enter image description here

I am trying to solve this issue for a few days now. I am unable to place the Child1, 2 and 3 between the 25px orange spot. The parent and child menu is a CSS based ul - li menu, where I set the <a> as an inline-block and set the width and height but it still ignores those parameters. I am out of ideas on how to solve this matter. Thank you for your help in advance.

Due to the length of the code I decided to upload the "whole" source code: source.zip

Upvotes: 0

Views: 1761

Answers (3)

manderson
manderson

Reputation: 98

It looks like the Child 1, 2, 3 a tags have padding applied to them, which is pushing them down past the orange. See screenshot: screenshot

Try removing the padding from the a tags (bodystyle.css, line 78), and reapplying it only to the parent menu items.

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191729

You have 15px of padding around all of the <a> elements in the nav list (including PARENT), but this also applies to the "Childs." Add the rule:

#header li li a {
    padding-top: 0;
}

This may not look exactly like you want because the <a> is set at 25px high, but the font is smaller than that. Also add

#header li li a span {
    line-height: 25px;
}

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

The problem is that your <a> tags on the sub-menu have the padding:15px from the main menu. You will need to set it to 0. You can then set the line-height of the element to match the orange bar's height to center it vertically.

Add this to fix it:

#header .cssMenuA a{
    padding:0;
    line-height:25px;
}

Upvotes: 3

Related Questions