如何使用css3製作吸引人的下拉菜單？

-1

家

服務

帳戶

<ul><li><a href=#>Home</a></li> 
<li><a href=#>Services</a></li> 
<li><a href=#>Account</a></li></ul>

我該如何申請CSS列出標籤，以顯示不同顏色的鼠標懸停？

該怎麼辦？

li { 
    Background-color:#696969; 
    display:Inline; 
}

來源

2013-08-02 Dineshcool

有吸引力的下拉菜單無法使用2個屬性和單一規則塊上進行，也讓事情變得更低的情況下 –

啊，這是笏我問。我對css很陌生。我不知道如何使它更具吸引力。用css3製作更有吸引力的菜單有哪些屬性？ – Dineshcool

你應該學會更多的CSS，在線看一些例子 –

我想你想

li:hover { 
background-color: New Color; 
}

這裏是我做的Html

一個非常簡單的下拉菜單

<div id="newsletter" class="navigation"> 
<span style="display:block;" id="newsletterMain" href="index.html">Newsletter</span> 
<a style="margin-top:19px; border-top: ridge thin rgba(0,0,0,.3);" class="month" href="index.html">Month</a> 
<a class="month" href="index.html">Month</a> 
<a class="monthLast" href="index.html">Month</a> 
</div>

CSS #newsletter .month { 顯示：塊;保證金左：-11px; padding-top：0; padding-bottom：0; 寬度：100％; 身高：0; border-bottom：脊瘦rgba（0,0,0，.3）; 背景：＃3D0F5F; font-size：1px; 不透明度：0; -webkit-transition：全部.5s; -moz-transition：全部.5s; -ms-transition：all .5s; -o-transition：all .5s; transition：all .5s;

} 
#newsletter .monthLast { 
    display:block; margin-left:-11px; 
    padding-top: 0; 
    padding-bottom: 0; 
    width:100%; 
    height:0; 
    background:#3D0F5F; 
    font-size:1px; 
    opacity:0; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -ms-transition:  all .5s; 
    -o-transition:  all .5s; 
    transition:   all .5s; 

} 
#newsletter:hover .month{ 
    display:block; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    height:auto; 
    border-right: thin ridge #000; 

    border-left: thin ridge #000; 
    background:#F8F8F8; 
    font-size:18px; 
    opacity:1; 


} 

#newsletter:hover .monthLast { 
    display:block; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    height:auto; 
    border-right: thin ridge #000; 
    border-bottom: thin ridge #000; 
    border-left: thin ridge #000; 
    background:#F8F8F8; 
    font-size:18px; 
    opacity:1; 

} 
#newsletterMain { 
    color:#FFF; 
    text-decoration:none; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -ms-transition:  all .5s; 
    -o-transition:  all .5s; 
    transition:   all .5s; 
} 
#newsletterMain:hover { 
    background: transparent; 
    /*color:#BBAFFF; 


    text-shadow: 0 0 15px #BB74FF;*/ 
} 
#newsletter { 
    border: thin ridge #FFF; 
    border-top: none; 
    background:#3D0F5F; 
    color:#FFF; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -ms-transition:  all .5s; 
    -o-transition:  all .5s; 
    transition:   all .5s; 
} 
#newsletter:hover { 
    border: thin ridge #000; 
    border-top: none; 
    background:/*#CDA0FF*/#F8F8F8; 
} 
#newsletter #newsletterMain { 
    color:#FFF; 
} 
#newsletter:hover #newsletterMain { 
    color:#3D0F5F; 
}

來源

2013-08-02 04:47:55 rjf0909

好的。如何讓鼠標懸停在這裏下拉列表？ – Dineshcool

我想我在編輯中加入了你需要的東西。 – rjf0909

我覺得，我可以做，你的帖子更有用.. – Dineshcool

在CSS中，鼠標懸停（懸停效果）可以使用:hover CSS pseudo-class實現。

li a:hover { 
    background-color:#ccc; 
}

JSFiddle

來源

2013-08-02 04:55:57 Praveen

這裏是例子。像這樣，你可以根據你的要求製作菜單。

<html> 
    <head> 
     <style type="text/css"> 
      ul {list-style: none;padding: 0px;margin: 0px;} 
      ul li {display: block;position: relative;float: left;border:1px solid #000} 
      li ul {display: none;} 
      ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none; 
      white-space: nowrap;color: #fff;} 
      ul li a:hover {background: #f00;} 
      li:hover ul {display: block; position: absolute;} 
      li:hover li {float: none;} 
      li:hover a {background: #f00;} 
      li:hover li a:hover {background: #000;} 
      #drop-nav li ul li {border-top: 0px;} 
     </style> 
    </head> 

    <body> 
     <ul id="drop-nav"> 
      <li><a href="#">Support</a></li> 

      <li><a href="#">Web Design</a> 
      <ul> 
       <li><a href="#">HTML</a></li> 
       <li><a href="#">CSS</a></li> 
       <li><a href="#">JavaScript</a></li> 
      </ul> 
      </li> 

      <li><a href="#">Content Management</a> 
      <ul> 
       <li><a href="#">Joomla</a></li> 
       <li><a href="#">Drupal</a></li> 
       <li><a href="#">WordPress</a></li> 
       <li><a href="#">Concrete 5</a></li> 
      </ul> 
      </li> 

      <li><a href="#">Contact</a> 
      <ul> 
       <li><a href="#">General Inquiries</a></li> 
       <li><a href="#">Ask me a Question</a></li> 
      </ul> 
      </li> 
     </ul> 
</body> 
</html>

來源

2013-08-02 05:06:11 Pirates

不錯的貼子，很好的工作。我知道了。 – Dineshcool

如何使用css3製作吸引人的下拉菜單？

回答

相關問題