2017-04-02 7 views
0

私は垂直方向のナビゲーションをテストしていて、私のulから弾丸を削除したいと思います。 私は適用を試みました!重要な場合に備えて重要です。私の李の下の境界も適用されません。私はオンラインで調査しましたが、解決策を見つけることはできません。リストスタイルなし適用なし+ li border

"NAV" idは

#nav a { 
    text-decoration: none; 
} 

リンクcodepenを除いて適用される範囲内ナッシング:

<!Doctype html> 
<html> 
<head> 
    <title>About Us</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 
    <div id="nav"> 
    <ul> 
     <li><a href="#">Mission</a></li> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Executive Team</a> 
      <ul> 
     <li><a href='#'>&raquo; CEO</a> 
     <li><a href='#'>&raquo; CFO</a> 
     <li><a href='#'>&raquo; COO</a> 
     <li><a href='#'>&raquo; Other Minions</a> 
     </ul> 
    </li> 
    <li><a href='#'>Contact Us</a></li> 
    </ul> 
    </div> 

    <div id="content"> 
    <h1>About Us</h1> 
    <ul> 
    <p><li><a href="#">Mission</a> Lorem ipsum dolor sit amet, ultricies adipiscing lectus, pharetra mauris amet luctus, ac vitae pulvinar, aenean urna porttitor eu etiam eu non. Accumsan tortor sit ac integer. Ipsum occaecat ad ipsum vestibulum, pellentesque posuere, sit enim curabitur odio.</li> 

     <li><a href="#">History</a> Ut at montesdui ullam orci, justo leo sem vitae sit quam, quis massa cras volutpat eget ac a.</li> 

     <li><a href="#">Executive team</a> Vitaeconvallis duis, dui adipiscing felis quam, laoreet nec non, lectus massa morbi et, amet nec in lacus urna.</li> 

     <li><a href="#">Contact us</a> Proin enim venenatis diam nascetur odio, nullam dui nam mauris quisque dignissim, eleifend sed platea ut, risus temporibus ante eu, dui eros libero ultrices eget non. Iaculis mauris nulla phasellus vel, pede nunc et libero mauris ac, erat volutpat non netus sed risus sed, dignissim aenean sit curabitur.</li> 
     </p> 
     </ul> 
    </div> 
</body> 
</html> 

のCss:

body { 
    font: 12pt Verdana, Arial, Georgia, sans-serif; 
} 

#nav { 
    width:150px; 
    float:left; 
    margin-top:12px; 
    margin-right:18px; 
} 



#nav a { 
    text-decoration: none; 
} 


//making sure there are no extra padding or margins lying around to line up with ABOUT US content 

#nav ul { 
    list-style-type: none; 
    margin: 12px 0px 0px 0px; 
    padding: 0px; 
} 

//border for visual seperation 

#nav li { 
    border-bottom: 1px solid #ffffff; 
} 



#nav li a:link, #nav li a:visited { 
    font-size: 10pt; 
    font-weight: bold; 
    display: block; 
    padding: 3px 0px 3px 3px; 
    background-color: #628794; 
    color: #ffffff; 
} 

//higlight when hover 

#nav li a:hover, #nav li a:active { 
    font-size: 10pt; 
    font-weight: bold; 
    display: block; 
    padding: 3px 0px 3px 3px; 
    background-color: #6cac46; 
    color: #000000; 
} 

#content { 
    width:550px; 
    float: left; 
} 

#content a { 
    text-decoration: none; 
    font-weight: bold; 
} 
ここ https://codepen.io/Saharalara/pen/WpPgpJ

はhtmlです

+0

にこの1 https://jsfiddle.net/ak6vgcbu/ –

答えて

0

あなたのコードの問題はセレクタではなく、コメントです。

生のCSSを使用している場合は、ブロックコメントを使用する必要があります。なぜなら、インラインコメントはエラーの原因となり、残りのCSSは処理されないからです。 text-decorationが機能する理由は、最初のインラインコメントの前に発生するためです。

変更

//making sure there are no extra padding or margins lying around to line up with ABOUT US content 

/* making sure there are no extra padding or margins lying around to line up with ABOUT US content */ 
+0

を試しそんなにクリスチャンありがとうございます。私はそれを見落として信じられない。 – Sarah

関連する問題