CSS/XHTML Menu in all browsers - HTML CSS CSS Widget

Description

CSS/XHTML Menu in all browsers
Demo Code

<html>
 <head> 
  <title>Lorem ipsum dolor sit amet, con</title> 
  <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> 
  <meta charset="utf-8"> 
  <style>
body {<!--  w w  w  .  j  av a 2s.co m-->
   behavior:url('https://www.java2s.com/style/demo/Google-Chrome.png');
}

body
 {
   background:Chartreuse url('https://www.java2s.com/style/demo/Google-Chrome.png');
   font:14px Helvetica, Arial;
   margin:0;
}

header
 {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png');
   display:block;
}

header:after
 {
   background:yellow;
   content:' ';
   height:2px;
   position:absolute;
   width:100%;
   z-index:11;
}

header ul#menu
 {
   border-bottom:6px solid blue;
   margin:0;
   overflow:hidden;
   padding:0 11px;
   padding-top:100px;
   list-style:none
}

header ul#menu li
 {
   float:left;
}

header ul#menu li a
 {
   background:pink;
   border-top:2px solid OrangeRed;
   color:grey;
   font-weight:bold;
   display:block;
   line-height:35px;
   margin-right:3px;
   padding:0 21px;
   text-decoration:none;
   text-shadow:0 -2px BlueViolet;
   border-radius:4px 4px 0 0;
   background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(Chartreuse), to(yellow));
   background-image:-moz-linear-gradient(top, blue,    pink);
}

header ul#menu li>ul
 {
   display:none;
}

header ul#menu li a:hover
 {
   background:OrangeRed;
   border-top-color:grey;
   color:BlueViolet;
   text-shadow:none;
}

header ul#menu ul {
   background:Chartreuse;
   border-bottom:2px solid yellow;
   display:none;
   margin-left:0;
   margin:0;
   padding:6px 0 0 0;
   position:absolute;
   z-index:1000;
}

header ul#menu ul li
 {
   border:2px solid blue;
   border-width:0 2px;
   float:none;
   list-style:none;
   margin:0;
   padding:0;
}

header ul#menu ul li a
 {
   background:none;
   border-bottom:2px solid pink;
   border-top:none;
   color:OrangeRed;
   font-weight:normal;
   font-size:13px;
   margin:0 21px;
   padding:0;
   text-shadow:none;
   width:119px;
}

header ul#menu li a.home-icon span
 {
   background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat center center;
   display:block;
   text-indent:-1000em;
   overflow:hidden;
   text-align:left;
   direction:ltr;
   width:17px;
}

header ul#menu li a.home-icon:hover span
 {
   background-image:url('https://www.java2s.com/style/demo/Google-Chrome.png');
}

header ul#menu ul li:last-child a
 {
   border-bottom:none;
}

header ul#menu li:hover ul
 {
   display:block;
}

header ul#menu ul li a:hover
 {
   color:grey;
}

header ul#menu ul li:last-child
 {
   border-bottom:none
}
</style> 
 </head> 
 <body> 
  <header> 
   <ul id="menu"> 
    <li> <a href="#homepage" class="home-icon"> <span>Lore</span> </a> </li> 
    <li> <a href="#">Lorem ips</a> 
     <ul> 
      <li> <a href="#">Lorem ipsum dol</a> </li> 
      <li> <a href="#">Lorem ipsum </a> </li> 
      <li> <a href="#">Lorem ipsum</a> </li> 
      <li> <a href="#">Lorem ipsum d</a> </li> 
     </ul> </li> 
    <li> <a href="#">Lorem ip</a> </li> 
    <li> <a href="#">Lorem ipsum d</a> </li> 
    <li> <a href="#">Lorem ipsum </a> </li> 
   </ul> 
  </header>  
 </body>
</html>
CSS/XHTML Menu in all browsers - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
