Slide down menu bar using CSS3 and HTML5 -

-

i have html5 , css3 menu bar i've been working on , i'm trying make visible when hovering on div. on have done wrong appreciated.

here code, thankyou in advance:

html

<!doctype html> <html>     <head>         <title>             navigation         </title>         <link rel="stylesheet" type="text/css" href="navigation.css"/>     </head>     <body>         <nav>             <ul>                 <li><a href="#">home</a></li>                 <li><a href="#">menu 1</a>                     <ul>                         <li><a href="#">submenu 1</a></li>                         <li><a href="#">submenu 2</a></li>                         <li><a href="#">submenu 3</a></li>                     </ul>                 </li>                 <li><a href="#">menu 2</a>                     <ul>                         <li><a href="#">submenu 4</a></li>                         <li><a href="#">submenu 5</a></li>                     </ul>                 </li>                 <li><a href="#">menu 3</a></li>             </ul>         </nav>         <div id="hideshow">             <center>                 <p style="font-size: 25px">                     .&nbsp.&nbsp.                 </p>             </center>         </div>     </body> </html>

css

nav ul ul  {     display: none; }  nav {     display: none; }  nav ul li:hover > ul  {     display: block; }  nav ul  {     margin-right: 1em;     display: inline-table;     margin-left: 0;     padding-left: 0;     opacity: 0.6;     margin: 0;     width: 100%;     background: #c6e2ff;      box-shadow: 0px 0px 9px rgba(0,0,0,0.15);     padding: 0 20px;     border-radius: 10px;       list-style: none;     position: relative; }  nav ul li  {     float: left;     background-color: #ff5050;     border-right: 20px solid #ff0000;     border-left: 20px solid #ff0000; }  nav ul li:hover  {     border-radius: 10px;     background: #ffa000;     border-right: 40px solid #ff0000;     -webkit-transition: 1s ease; }  nav ul li:hover {     color: #fff; }  nav ul li  {     display: block; padding: 25px 40px;     color: #e0e0e0; text-decoration: none; }  nav ul ul  {     border-radius: 0px;     background: #c6e2ff; border-radius: 0px; padding: 0;     position: absolute; top: 100%; }  nav ul ul li  {     float: none;      border-top: 3px solid #c6e2ff;     border-bottom: 3px solid #c6e2ff;     position: relative;      }  nav ul ul li  {     padding: 15px 40px;     color: #fff; }  nav ul ul li a:hover  {     background: #ff5050;     border-left: 12px solid #ffa000;     -webkit-transition: 1s; }  nav ul li:hover > ul ul li {     background: #ff5050;     border-left: 12px solid #ffa000;     -webkit-transition: 1s; }  nav ul ul li:hover {     background: #ff5050;     border-left: 12px solid #ffa000;     -webkit-transition: 1s;     background-color: #ff5050; }  nav ul:hover {     opacity: 1;     -webkit-transition: 1s; }  #hideshow {     border: 2px dashed #e0e0ee;     box-shadow: 0px 0px 9px rgba(0,0,0,0.15);     width: 100%;     background-color: #e0e0e0; }  #hideshow:hover  nav  ul {     display: inline-table;     border: 2px dashed #e0e0ee;     box-shadow: 0px 0px 9px rgba(0,0,0,0.15); }  #hideshow  p {     color: #9c9c78; }

you using "adjacent sibling combinator"

#hideshow:hover + nav {     display: block; }

here jsfiddle: example

but way won't able use it. if want use have restructure markup. example putting nav element div element. here jsfiddle: another example


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more