Home > Article > Web Front-end > Collected several good drop-down menu effects_Navigation menu

Collected several good drop-down menu effects_Navigation menu

WBOYOriginal: 2016-05-16 19:13:141196browse

The compatibility of the current drop-down menu is getting better and better. The one without js is the best, but if the effect can be achieved with the least code, it is also good
The first one is used js, but very short and clear

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]

这一个也不错

<title>THE ULTIMATE CSS ONLY DROPDOWN MENU</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<style type="text/css"> 
.menu { 
    FONT-SIZE: 0.85em; WIDTH: 750px; FONT-FAMILY: verdana, sans-serif; POSITION: relative 
} 
.menu UL { 
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none 
} 
.menu UL LI { 
    FLOAT: left; POSITION: relative 
} 
.menu UL LI A { 
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none 
} 
.menu UL LI A:visited { 
    BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #dfc184; BORDER-LEFT: #fff 0px solid; WIDTH: 139px; COLOR: #000; LINE-HEIGHT: 3em; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 3em; TEXT-DECORATION: none 
} 
* HTML .menu UL LI A { 
    WIDTH: 139px 
} 
.menu UL LI A:visited { 
    WIDTH: 139px 
} 
.menu UL LI UL { 
    DISPLAY: none 
} 
TABLE { 
    FONT-SIZE: 1em; MARGIN: -1px; BORDER-COLLAPSE: collapse 
} 
.menu UL LI:hover A { 
    BACKGROUND: #bd8d5e; COLOR: #fff 
} 
.menu UL LI:hover UL { 
    MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 150px; POSITION: absolute; TOP: 3em 
} 
.menu UL LI:hover UL LI UL { 
    DISPLAY: none 
} 
.menu UL LI:hover UL LI A { 
    PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #faeec7; PADDING-BOTTOM: 5px; WIDTH: 129px; COLOR: #000; LINE-HEIGHT: 1.2em; PADDING-TOP: 5px; HEIGHT: auto 
} 
.menu UL LI:hover UL LI A.drop { 
    BACKGROUND: url(drop.png) #c9c9a7 no-repeat right bottom 
} 
.menu UL LI:hover UL LI A:hover { 
    BACKGROUND: #c9c9a7; COLOR: #000 
} 
.menu UL LI:hover UL LI:hover UL { 
    DISPLAY: block; LEFT: 150px; WIDTH: 150px; POSITION: absolute; TOP: 0px 
} 
.menu UL LI:hover UL LI:hover UL.left { 
    LEFT: -150px 
} 
</style> 
 
<meta content="MSHTML 6.00.6000.16441" name="GENERATOR"> 
 
<div class="menu"> 
<ul> 
  <li>
<a class="drop" href="http://www.jluvip.com/works/css/menu/index.html">DEMOS</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="The zero dollar ads page" href="http://www.jluvip.com/works/css/menu/zero_dollars.html">zero  
          dollars advertising page</a> </li> 
          <li>
<a title="Wrapping text around images" href="http://www.jluvip.com/works/css/menu/embed.html">wrapping text  
          around images</a> </li> 
          <li>
<a title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled form</a>  
          </li> 
          <li>
<a title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">active  
          focus</a> </li> 
          <li>
<a class="drop" title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click  
          with no borders</a> 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                <ul> 
                  <li>
<a title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled  
                  form</a> </li> 
                  <li>
<a title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing  
                  active/focus borders</a> </li> 
                  <li>
<a title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</a>  
                  </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
          <li class="upone">
<a title="Multi-position drop shadow" href="http://www.jluvip.com/works/css/menu/shadow_boxing.html">shadow  
          boxing</a> </li> 
          <li>
<a title="Image Map for detailed information" href="http://www.jluvip.com/works/css/menu/old_master.html">image map  
          for detailed information</a> </li> 
          <li>
<a title="fun with background images" href="http://www.jluvip.com/works/css/menu/bodies.html">fun with  
          background images</a> </li> 
          <li>
<a title="fade-out scrolling" href="http://www.jluvip.com/works/css/menu/fade_scroll.html">fade  
          scrolling</a> </li> 
          <li>
<a title="em size images compared" href="http://www.jluvip.com/works/css/menu/em_images.html">em image  
          sizes compared</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/boxes/index.html">BOXES </A> 
  </a><table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="a coded list of spies" href="http://www.jluvip.com/works/css/dropmenu/spies.html">a coded  
          list of spies</a> </li> 
          <li>
<a title="a horizontal vertical menu" href="http://www.jluvip.com/works/css/dropmenu/vertical.html">vertical  
          menu</a> </li> 
          <li>
<a title="an enlarging unordered list" href="http://www.jluvip.com/works/css/dropmenu/expand.html">enlarging  
          unordered list</a> </li> 
          <li>
<a title="an unordered list with link images" href="http://www.jluvip.com/works/css/dropmenu/enlarge.html">link  
          images</a> </li> 
          <li>
<a title="non-rectangular links" href="http://www.jluvip.com/works/css/dropmenu/cross.html">non-rectangular</a>  
          </li> 
          <li>
<a title="jigsaw links" href="http://www.jluvip.com/works/css/dropmenu/jigsaw.html">jigsaw  
          links</a> </li> 
          <li>
<a title="circular links" href="http://www.jluvip.com/works/css/dropmenu/circles.html">circular  
          links</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/mozilla/index.html">MOZILLA</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="A drop down menu" href="http://www.jluvip.com/works/css/mozilla/dropdown.html">drop down  
          menu</a> </li> 
          <li>
<a title="A cascading menu" href="http://www.jluvip.com/works/css/mozilla/cascade.html">cascading  
          menu</a> </li> 
          <li>
<a title="Using content:" href="http://www.jluvip.com/works/css/mozilla/content.html">content:</a>  
          </li> 
          <li>
<a title=":hover applied to a div" href="http://www.jluvip.com/works/css/mozilla/moxbox.html">mozzie  
          box</a> </li> 
          <li>
<a title="I can build a rainbow" href="http://www.jluvip.com/works/css/mozilla/rainbow.html">I can  
          build a rainbow with transparent borders</a> </li> 
          <li>
<a title="Snooker cue" href="http://www.jluvip.com/works/css/mozilla/snooker.html">a snooker  
          cue using border art</a> </li> 
          <li>
<a title="Target Practise" href="http://www.jluvip.com/works/css/mozilla/target.html">target  
          practise</a> </li> 
          <li>
<a title="Two tone headings" href="http://www.jluvip.com/works/css/mozilla/splittext.html">two tone  
          headings</a> </li> 
          <li>
<a title="Shadow text" href="http://www.jluvip.com/works/css/mozilla/shadow_text.html">shadow  
          text</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/ie/index.html">EXPLORER</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="Example one" href="http://www.jluvip.com/works/css/ie/exampleone.html">the first  
          example for Internet Explorer</a> </li> 
          <li>
<a title="Weft fonts" href="http://www.jluvip.com/works/css/ie/weft.html">weft fonts</a>  
          </li> 
          <li>
<a title="Vertical align" href="http://www.jluvip.com/works/css/ie/exampletwo.html">vertically  
          aligning text</a> </li>
</ul>
</td>
</tr>
</tbody>
</table>

</li> 
  <li>
<a href="http://www.jluvip.com/works/css/opacity/index.html">OPACITY</a> 
  <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <table> 
    <tbody> 
    <tr> 
      <td> 
        <ul> 
          <li>
<a title="colour wheel" href="http://www.jluvip.com/works/css/opacity/colours.html">a colour  
          wheel using opaque colours</a> </li> 
          <li>
<a title="a menu using opacity" href="http://www.jluvip.com/works/css/opacity/picturemenu.html">a menu  
          using opacity</a> </li> 
          <li>
<a title="partial opacity" href="http://www.jluvip.com/works/css/opacity/png.html">partial  
          opacity</a> </li> 
          <li>
<a title="partial opacity II" href="http://www.jluvip.com/works/css/opacity/png2.html">partial  
          opacity II</a> </li> 
          <li>
<a class="drop" title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">HOVER/CLICK</a> 
          <table> 
            <tbody> 
            <tr> 
              <td> 
                <ul class="left"> 
                  <li>
<a title="Styling forms" href="http://www.jluvip.com/works/css/menu/form.html">styled  
                  form</a> </li> 
                  <li>
<a title="Removing active/focus borders" href="http://www.jluvip.com/works/css/menu/nodots.html">removing  
                  active/focus borders</a> </li> 
                  <li>
<a title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">hover/click</a>  
                  </li>
</ul>
</td>
</tr>
</tbody>
</table>
<a title="colour wheel" href="http://www.jluvip.com/works/css/opacity/colours.html">a colour  
          wheel using opaque colours</a><a title="a menu using opacity" href="http://www.jluvip.com/works/css/opacity/picturemenu.html">a menu  
          using opacity</a>
</li> </ul> 
          </td>
<a title="partial opacity" href="http://www.jluvip.com/works/css/opacity/png.html">partial  
          opacity</a>
</tr> </tbody> 
          </table>
<a title="partial opacity II" href="http://www.jluvip.com/works/css/opacity/png2.html">partial  
          opacity II</a><a class="drop" title="Hover/click with no active/focus borders" href="http://www.jluvip.com/works/css/menu/hover_click.html">HOVER/CLICK  
</a>
</ul>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Very good simulated typing effect, currently only supports plain text, BR tags, and P tags_Typical special effectsNext article：Very good simulated typing effect, currently only supports plain text, BR tags, and P tags_Typical special effects

See more

Collected several good drop-down menu effects_Navigation menu

Related articles