Searching...
Thursday, January 1, 2015
Home » HTML » Light Opera Drop Down Menu

Light Opera Drop Down Menu

January 01, 2015

Drop Down Menu Css

  <style type="text/css">
  #cssmenu ul,
  #cssmenu li,
  #cssmenu span,
  #cssmenu a{margin:0;
  padding:0;
  position:relative
  }
  #cssmenu{
  height:49px;
  border-radius:5px 5px 0 0;
  -moz-border-radius:5px 5px 0 0;
  -webkit-border-radius:5px 5px 0 0;
  background:#fefefe;
  background:-moz-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#eee9f0));
  background:-webkit-linear-gradient(top,#fefefe 0%,#eee9f0 100%);background:-o-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:-ms-linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  background:linear-gradient(top,#fefefe 0%,#eee9f0 100%);
  border-bottom:2px solid #db000b;
  width:auto}#cssmenu:after,
  #cssmenu ul:after{
  content:'';display:block;
  clear:both
  }
  #cssmenu a{background:#fefefe;
  background:-moz-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#fefefe),color-stop(100%,#ececec));
  background:-webkit-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:-o-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:-ms-linear-gradient(top,#fefefe 0%,#ececec 100%);
  background:linear-gradient(top,#fefefe 0%,#ececec 100%);
  color:#000;
  display:inline-block;
  font-family:Helvetica,Arial,Verdana,sans-serif;
  font-size:12px;
  line-height:49px;
  padding:0 20px;
  text-decoration:none
  }
  #cssmenu ul{
  list-style:none
  }
  #cssmenu > ul{float:left
  }
  #cssmenu > ul > li{float:left
  }
  #cssmenu > ul > li > a{
  color:#000;font-size:12px
  }
  #cssmenu > ul > li:hover:after{
  content:'';
  display:block;
  width:0;
  height:0;
  position:absolute;
  left:50%;
  bottom:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #db000b;
  margin-left:-10px
  }
  #cssmenu > ul > li:first-child > a{border-radius:5px 0 0 0;
  -moz-border-radius:5px 0 0 0;
  -webkit-border-radius:5px 0 0 0
  }
  #cssmenu > ul > li.active:after{content:'';
  display:block;
  width:0;
  height:0;
  position:absolute;
  left:50%;
  bottom:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:10px solid #db000b;
  margin-left:-10px
  }
  #cssmenu > ul > li.active > a{
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  background:#ececec;
  background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));
  background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:linear-gradient(top,#ececec 0%,#fef ef 100%)
  }
  #cssmenu > ul > li:hover > a{
  background:#ececec;
  background:-moz-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#ececec),color-stop(100%,#fef ef));
  background:-webkit-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-o-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:-ms-linear-gradient(top,#ececec 0%,#fef ef 100%);
  background:linear-gradient(top,#ececec 0%,#fef ef 100%);
  -moz-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 2px rgba(0,0,0,0.1);
  box-shadow:inset 0 0 2px rgba(0,0,0,0.1)
  }
  #cssmenu .has-sub{z-index:1
  }
  #cssmenu .has-sub:hover > ul{
  display:block
  }
  #cssmenu .has-sub ul{
  display:none;position:absolute;
  width:200px;
  top:100%;
  left:0
  }
  #cssmenu .has-sub ul li{*margin-bottom:-1px
  }
  #cssmenu .has-sub ul li a{
  background:#db000b;
  border-bottom:1px dotted #ff0f1b;
  filter:none;
  font-size:11px;
  display:block;line-height:120%;
  padding:10px;
  color:#fff
  }
  #cssmenu .has-sub ul li:hover a{
  background:#a80008}#cssmenu .has-sub .has-sub:hover > ul{display:block
  }
  #cssmenu .has-sub .has-sub ul{
  display:none;
  position:absolute;
  left:100%;
  top:0
  }
  #cssmenu .has-sub .has-sub ul li a{
  background:#a80008;
  border-bottom:1px dotted #ff0f1b
  }
  #cssmenu .has-sub .has-sub ul li a:hover{
  background:#8f0007
  }

    </style>

menus Links

<div id="cssmenu">
<ul>
<li class="active"><a href="#"><span>Home</span></a></li>
<li class="has-sub"><a href="#"><span>Products</span></a>
<ul>
<li><a href="#"><span>Widgets</span></a></li>
<li><a href="#"><span>Menus</span></a></li>
<li class="last"><a href="#"><span>Products</span></a></li>
</ul>
</li>
<li class="has-sub"><a href="#"><span>Company</span></a>
<ul>
<li><a href="#"><span>About</span></a></li>
<li class="last"><a href="#"><span>Location</span></a></li>
</ul>
</li>
<li class="last"><a href="#"><span>Contact</span></a></li>
</ul>
</div>

div css

  <style type="text/css">
#div {
 
    padding: 0px 25px 25px;
    background: #fff;
    box-shadow: 
        0px 0px 0px 5px rgba( 255,255,255,0.4 ), 
        0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
 margin: 20px 300px 100px 200px;
   width: 1150px;
   height:400px;
}
    </style>

edit this div

<div  id="div">
<h1>Div Middle <br>WRITE YOUR WEBSITE CONTENT HERE </h1>

<img src="https://lh6.googleusercontent.com/-xA2R1yIkZXA/VKV2H9EUruI/AAAAAAAAAKw/0Ro-IhzLXMA/w1142-h516-no/java9r.png"/>

</div>

By at January 01, 2015
Labels:
Share:

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)

ads2