How can I decrease the size of a li element

Get Started
1

Hi,

I’m learning html/css so this will probably seem like basic knowledge to you guys.

I have made a drop down menu, its working fine except the menu title (Link Menu) li element is way too big. I have attached the image of how it looks. Filename is img1.

Also if I remove the border from the #menu ul:


#menu ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
	background-color: grey;
	/*border: 1px solid blue;*/
}

Why does it look like the second image (img2) attachment when the mouse is not hovering over the menu?

This is the menu html code:


<!--Menu section begins-->
		<div id="menu">
			<ul>
				<li id="link_menu">
					<h2>Link Menu</h2>
					<ul class="sub_menu">
						<li><a href="#details" title="Find out my details">My Personal Details</a></li>
						<li><a href="#hometown_descrip" title="Find out about my home town">My Home Town</a></li>
						<li><a href="#achievement" title="Find out about my acheivements">My Achievement</a></li>
						<li><a href="#fav_books_movs_mus">Books, movies, and music</a></li>
						<li><a href="#swinburne_timetable">Swinburne Timetable</a></li>
						<li><a href="#search_swinburne">Search Swinburne</a></li>
					</ul>
				</li>
			</ul>
		</div>
<!--Menu section ends-->

This is the css:


#menu{
	float:right;
	padding: 0px;
	width: 172px;
	margin: -21px 0 0 0;
	border-bottom: 2px solid grey;
	
}#menu a:link{
	text-decoration: none;
	color: yellow;
}
#menu a:visited{
	color: yellow;
}
#menu a:hover{
	color: white;
}
#menu:hover ul ul{
	display: block;
}
#menu ul ul{
	display: none;
	list-style: none;
	padding: 0px;
	background-color: red;
}
#menu ul{
	list-style: none;
	padding: 0px;
	margin: 0px;
	background-color: grey;
	border: 1px solid blue;
}
#menu ul ul li{
	border-top: white dashed 2px;
	padding: 5px;
	font-family: "Comic Sans MS";
}

Please do help, thanks

2

hi,

This is one way.

li span {
    margin-left: -11px;
}

<ul>
<li><span>1</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

3

I have to use heading tags in the li because our lecturer said to give the menu a header.

Are you sure they didn’t mean, a header above your menu? That is not uncommon on a web page:


<h2>Main Navigation</h2>
<ul id="menu">
<li><a href="somelink">First Link</a>
  <ul>
     <li><a href="#">sublink1</a></li>
     ... blah blah
   </ul>
</li>
<li></li>
...
</ul>

It’s also not uncommon to have headers inside the submenu, especially with mega dropdowns like so


<ul id="menu">
<li><a href="somelink">First Link</a>
  <div>
    <h2>Food!</h2>
    <ul>
    ...food submenu...
    </ul>
    <h2>Films!</h2>
     <ul>
      ... films submenu...
     </ul>
      <h3>horror</h3>
       <ul>
        ...specifically horror films, so a submenu also under teh earlier Films h2...
        </ul>
       <h2>Fun</h2>
       <ul>
        ... fun submenu...
       </ul>
  </div><!-- this whole div is the box who comes onscreen, holding headers, multiple submenus, and CSS styling-->
</li>
<li>next menu item</li>
...
</ul>

(pay no attention to my indentation, it’s out of whack)

Also, regarding question #2: now that I can see the image, it’s likely because both the div around the menu and the menu itself have borders, and you were only commenting out someone’s borders, but not the other thing’s borders.

Usually you can get away with a ul doing all the work by itself. You only need a wrapping div when you need another box to hold a background image or colour, or need those to extend much further than the width of the ul itself.

That saves you some markup and makes your CSS easier!

4

Its working now.

I forgot that each element has its own margin and padding attributes not just the div element.

So I set the h2 tags margin to 0 and took your advice on changing the font size.

I have to use heading tags in the li because our lecturer said to give the menu a header.

I do have another problem however. This problem only occurs in IE. It works fine in Chrome and Firefox.

I will post this problem in another thread.

Thanks for your help once again. :slight_smile:

5

Images aren’t approved yet, but you did choose to make your top-level text a second-level header.

Browsers have default sizes for those, and h2’s are by default usually large and bold.

I tend to encourage anchors rather than headers for those top-level links, simply because with the h2, only people with mice will get access to your submenu. Anchors can do things on :focus as well as :hover.

But if you want to keep the h2, you can give it a normal size.

#menu h2 {
font: normal 1em/1.2em thefontfamilyyouwant;
}

or if you don’t want to (re)set font family:
#menu h2 {
font-weight: normal; /headers are bold by default usually/
font-size: 1em; /assuming you didn’t set any weird font sizes on the body or page container, this should be the same as whatever your computer’s default font size is/
line-height: 1.2em; /not a bad idea to set this when setting font-size/
}

6

It would be much easier to help if you could provide a link, or at least a fully working page of code (with HTML and CSS together).