Navbar item aligning - HTML CSS CSS Widget

Description

Navbar item aligning
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.myMenuTop {<!--   www. j a v a  2s  .  c om-->
   height:41px;
   width:100%;
   min-width:537px;
   background-color:Chartreuse;
   position:fixed;
}

.myFont1 {
   font-color:white;
   font-family:Tangerine, Lucida Calligraphy, Snell Rounded;
   font-face:Tangerine;
   font-size:21pt;
   color:yellow;
   line-height:0px;
   display:inline-block;
}

.myLogo {
   height:301px;
   width:100%;
   min-width:537px;
   border-bottom:2px solid blue;
   border-top:2px solid pink;
   align:center;
   text-align:center;
}

* {
   margin:0;
   padding:0;
}

.img1 {
   height:212px;
   width:551px;
   min-width:501px;
}

#navmenu
 {
   float:right;
}

ul#navmenu, ul.sub1, ul.sub2 {
   list-style-type:none;
   font-size:10pt;
}

ul#navmenu li {
   width:100px;
   position:relative;
   text-align:center;
   float:left;
   margin-right:5px;
}

ul#navmenu a {
   text-decoration:none;
   display:block;
   width:100px;
   height:26px;
   line-height:26px;
   background-color:OrangeRed;
   border:2px solid grey;
   border-radius:6px;
}

ul#navmenu .sub1 a {
   margin-top:6px;
}

ul#navmenu .sub2 a {
   margin-left:11px;
}

ul#navmenu li:hover>a {
   background-color:BlueViolet;
}

ul#navmenu li:hover a:hover {
   background-color:Chartreuse;
}

ul#navmenu ul.sub1 {
   display:none;
   position:absolute;
   top:27px;
   left:0px;
}

ul#navmenu ul.sub2 {
   display:none;
   position:absolute;
   top:0px;
   left:102px;
}

ul#navmenu li:hover .sub1 {
   display:block;
}

ul#navmenu .sub1 li:hover .sub2 {
   display:block;
}

.darrow {
   position:absolute;
   top:6px;
   right:5px;
   font-size:12pt;
}

.rarrow {
   position:absolute;
   top:7px;
   right:5px;
   font-size:14pt;
}
</style> 
 </head> 
 <body> 
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> 
  <style>

</style> 
  <script type="text/javascript">

      </script> 
  <div class="myMenuTop"> 
   <span class="myFont1">Lorem ip</span> 
   <ul id="navmenu"> 
    <li> <a href="#">L</a> </li> 
    <li> <a href="#">L</a> </li> 
    <li> <a href="#">L</a> <span class="darrow">L</span> 
     <ul class="sub1"> 
      <li> <a href="#">Lor</a> </li> 
      <li> <a href="#">Lor</a> </li> 
      <li> <a href="#">Lor</a> </li> 
     </ul> </li> 
    <li> <a href="#">L</a> <span class="darrow">L</span> 
     <ul class="sub1"> 
      <li> <a href="#">Lor</a> </li> 
      <li> <a href="#">Lor</a> </li> 
      <li> <a href="#">Lor</a> <span class="rarrow">L</span> 
       <ul class="sub2"> 
        <li> <a href="#">Lorem</a> </li> 
        <li> <a href="#">Lorem</a> </li> 
        <li> <a href="#">Lorem</a> </li> 
       </ul> </li> 
     </ul> </li> 
    <li> <a href="#">L</a> </li> 
   </ul> 
  </div> 
  <br> 
  <br> 
  <div class="myLogo"> 
   <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="img1"> 
  </div> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br> 
  <br>Lorem ip 
  <br> 
  <br>Lorem 
  <br> 
  <br> 
  <br> 
  <br> 
  <br>Lorem ip 
  <br> 
  <br>Lorem 
  <br> 
  <br> 
  <br> 
  <br> 
  <br>Lorem ip 
  <br> 
  <br>Lorem 
  <br> 
  <br> 
  <br> 
  <br> 
  <br>Lorem ip 
  <br> 
  <br>Lorem 
  <br> 
  <br> 
  <br> 
  <br> 
  <br>Lorem ip 
  <br> 
  <br>Lorem  
 </body>
</html>
Navbar item aligning - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
