CODEWITHSUNDEEP
css
thatdude38
thatdude38

Reputation: 3

cant get my navigation to work right

hey guys Im new to web design but cant get my navigation to align across the top or remove the bullets from the li. I had it worked out but it started interferring with the rest of the page so I reworked it some and cant get it to work now. Any help will be greatly appreciated!

.menuitem {
    list-style-type: none;
    text-align: center;
    color: #fff;
    text-decoration: none;
    width: 240px;
}

#navigation {
    width: 1000px;
    background-color: #0b61a4;
    font-size: 18pt;
}

nav a:visited{
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:hover {
    color: #CED9D9;
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:link{
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:active {
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

HTML

<div id="navigation">
  <ul>                 
    <li><a href="index.html" class="menuitem">Home</a></li>                 
    <li><a href="pharmacy_solutions" class="menuitem">Pharmacy Solutions</a></li>                 
    <li><a href="about_us.html" class="menuitem">About Us</a></li>                 
    <li><a href="contact_us.html" class="menuitem">Contact Us</a></li>             
  </ul>         
</div>

Upvotes: 0

Views: 27

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

How about something like this? http://jsfiddle.net/ACQ27/2/

#navigation {
    width: 1040px;
    background-color: #0b61a4;
    font-size: 18pt;
}

#navigation ul{
    list-style-type: none;
    text-align: center;
    color: #fff;
     display:inline-block;
}
#navigation ul li {
     display:inline-block;
     width: 240px;
    margin-bottom: -6px;
}

#navigation ul li a {
    color: #fff;
    text-decoration: none;
}

#navigation ul li a:hover {
    color: #CED9D9;

}

Upvotes: 1

Related Questions