make vertical menu horizontal remove bullets underline and change font with css - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Menu

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Menu

Description

make vertical menu horizontal remove bullets underline and change font with css

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>Lorem ipsum do</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#menu {<!-- www.  ja v a2s. c  o  m-->
   width:851px;
   height:26px;
   margin:0 auto;
   padding:0;
   border-color:Chartreuse;
   border-style:solid;
   border-width:2px;
}

#menu ul {
   margin:0;
   padding:0;
   list-style:none;
   line-height:normal;
}

#menu li {
   float:left;
}

#menu a {
   display:block;
   margin-right:-2px;
   height:13px;
   padding:5px 21px 10px 21px;
   text-decoration:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size:18px;
   font-weight:bold;
   color:yellow;
   border:none;
   border-left:2px solid blue;
   border-right:2px solid pink;
}
</style> 
 </head> 
 <body> 
  <div id="menu"> 
   <ul> 
    <li> <a href="index.html">Lore</a> </li> 
    <li> <a href="about.html">Lorem ip</a> </li> 
    <li> <a href="menu.html">Lorem ip</a> </li> 
    <li> <a href="Location.html">Lorem ipsum d</a> </li> 
    <li> <a href="contact.html">Lorem ipsu</a> </li> 
   </ul> 
  </div>  
 </body>
</html>

Related Tutorials