CODEWITHSUNDEEP
htmlcss
Betzyc
Betzyc

Reputation: 47

li menu underline style will not go away

I created a menu with ul and li tags and have tried putting in the css font-style:none in all 3 sections, but was still not able to take out the underline from the menu.

<div class=menu>
    <ul>
        <a href="http://www.bettyzhangart.com"><img id=smalllog src="http://images2.webydo.com/31/313624/3958%2f7f54386b-c039-47a9-b2f5-eda78fc87287.png"/></a>
        </li>
        <li><a href="http://bettyzhangart.com/about.html">BIO & CV</a></li>
        <li><a href="http://bettyzhangart.com/gallery.html">FINE ART</a></li>
        <li><a href="http://bettyzhangart.com/contact.html">GRAPHIC DESIGN</a></li>
        <li><a href="http://bettyzhangart.blogspot.ca/" /a>BLOG</li>
        <li><a href=""/a>CONTACT</li>
    </ul>
</div>

ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
li {
    padding:50px 0px 30px 10px;
    display:inline;
    vertical-align: middle;
}
li a {
    padding: 0px 30px 0px 30px;
    text-align:center;
    font-family:'Quicksand', sans-serif;
    font-size: 16px;
    font-style: none;
    color: #8e8e8e;  
}

Upvotes: 0

Views: 328

Answers (2)

Steven Lacks
Steven Lacks

Reputation: 904

The underline is the value of the attribute text-decoration for "a" (the link tags, or anchors). 

li a {
         ...your styles
         text-decoration: none;
     }

The available options are none, underline, overline, line-through, inherit (from parent) and some browsers support blink, which you should never use because it is annoying and was included as a joke.

Here's a list of the default styles for html4 tags - http://www.w3.org/TR/CSS2/sample.html - these are the most used. Of course "a" is on there as :link but that's an answer for another question.

none | [ underline || overline || line-through || blink ] | inherit

Upvotes: 1

Kai Qing
Kai Qing

Reputation: 18843

Ok, since the comment worked I'll post it as an answer. to eliminate the normal underline of anchor tags on hover, you apply this:

a:hover{
    text-decoration:none;
}

this is what worked for you. Since font-style is used for other things, like oblique, normal, etc.

Upvotes: 1

Related Questions