We help IT Professionals succeed at work.

CSS making my menu look right.

tmonteit
tmonteit asked
on
I am trying to build an html menu, but I am having difficulty making the menu look and behave correctly.
I have a start but I am not a CSS expert and I'm not sure what css modifications will fix my issues.

Issues:
   >  The links are underlined.  (see pic1) How do I turn off the underlining?
   >  When I select a link the select box is much bigger than the text I want to select.  (see pic2) How do I make the select box smaller or preferably go away.   The red arrows indicate how much extra box needs to be removed.

Thanks....Any advice is appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
   <ul id="menu">
      <li> <a href="#">Company</a> </li>
      <li> <a href="#">Services</a> </li>
      <li>
          <a href="#">Solutions</a>
          <ul>
              <li><a href="#">Logos</a></li>
              <li><a href="#">Brochures</a></li>
              <li><a href="#">Advertising</a></li>
              <li><a href="#">PowerPoint</a></li>
              <li><a href="#">Web Sites</a></li>
          </ul>
      </li>
      <li> <a href="#">Contact</a> </li>
   </ul>

</body>
</html>

Open in new window

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.2em;
}
p {
  line-height: 1.5em;
}
#menu {
  position: absolute;
  top:200px;
  left:150px;
}

ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 15em;
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {
  color: yellow;	
  padding: 1.0em;
}

ul#menu li ul li a {
  color: yellow;
  padding-left: 35px;
} 

ul#menu li ul li a:hover {
  padding-left: 25px;
} 

.code { border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }  
.indent1 { padding-left: 1em; }
.indent2 { padding-left: 2em; }

Open in new window

shot1png
shot2.png
Comment
Watch Question

Commented:
you just need to change this part on you CSS file

the text-decoration will skip underlining the links
the display block will assign to each element on your list all of the space they need, nothing else
ul#menu li a {
    color: yellow;
    text-decoration:none;
    display: block;
}

Open in new window