Dropdown Menu in Css and Html

-
DROPDOWN MENU IN CSS AND HTML


HTML



<ul id="menu">
                <li><a href="#">Mobile</a>
              
                    <ul class="submenu">
                  
                    <li><a href="#">sony</a></li>
                    <li><a href="#">apple</a></li>
                    <li><a href="#">micromax</a></li>
                    </ul>
              
                    </li>
                <li class="tablet"><a href="#">tablet</a></li>
              
              
                <li class="accessries"><a href="#">accessries</a></li>
                
                 </ul>



CSS


ul#menu,ul#menu ul.submenu{
margin:0;
padding:0;
}

ul#menu li,ul#menu ul.submenu li
{
list-style-type:none;
display:inline-block;
}
ul#menu li a,ul#menu ul.submenu li a{

text-decoration:none;
color:#666;
background:#fff;
display:inline-block;
padding:5px;

}
ul#menu li{
position:relative;
}
ul#menu li ul.submenu{
display:none;
position:absolute;
top:30px;
left:0px;
}
ul#menu li:hover ul.submenu{

display:block;
}






Comments

Post a Comment

Popular posts from this blog

How to check if current post have specific shortcode in Wordpress

-
Shortcode is the one of powerful feature in Wordpress which provides so much flexibility to enhance functionalities. Sometime you need to detect if current post/page have already specific shortcode. Here is the following two snippets which you could use for check specific shprtcode into your shortcode callback function. Snippet -1(Using has_shortcode() function) <?php  add_shortcode('shortcode_name','shortcode_callback'); function  shortcode_callback($atts){ global $post; $shortcode_feature = ' '; if (has_shortcode(  $post->content ,  ' shortcode_name '  )){ // Apply your specific code here. } // Do whatever you want return  $shortcode_feature; } Snippet -2 (Using strpos() function) $shortcode = '[shortcode_name'; $check = strpos( $post->content,$shortcode ); if ( $check !== false ) { //Return already matched } Prefer to use Snippet-1 using default function of wordpress. Cheers ...
Read more

How to show Squarespace gallery in Masonry view

-
Image
Squarespace have awesome powerful feature to manage images using gallery feature. There is lot of flexible option to present images into different layout. Show images into masonry view is a passion. There is no inbuilt option for show images into masonry view. Here is the following steps to show your gallery images into Masonry view:- 1. Create a gallery page and upload your all images. 2. After uploading all images. Now time to show your all images using Squarespace Gallery Block. You could select your existing gallery page and select gallery type Grid. Now you could there is all gallery images showing. 3. Here is the following code you have to add into Advanced =>  PAGE HEADER CODE INJECTION  of page setting to show your images in Masonry view. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.js"></scrip...
Read more

How to Create Secondary Menu in Squarespace

-
Image
Here is the following steps to create secondary menu into Squarespace website. 1. Enable Developer Mode    a) First, Login into your Squarespace admin panel using /config at end of your website URL.  like-   https://your-domaine.com/config b) Navigate to Settings=>Advanced=> Developer Mode and enable developer mode. c) Now you will get details of your Squarespace SFTP account. Configure these details with your Filezilla or any other server connecting tool. 2. Menu Registration  a)Please open  template.conf file and find the  navigations into JSON array. b) Apend your menu name and title into Navigation JSON array as given below. {       "title": "Primary Navigation",       "name": "topnav"     }, c)  Now update file on server and you could see new menu register into your Squarespace website under Pages section. 3. Display Menu  You have successfully reg...
Read more