- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Rishi Rathor](https://www.tutorialspoint.com/assets/profiles/13563/profile/60_89283-1512714754.jpg)
3K+ Views
With CSS, you can add a small arrow to the tooltip, using :after. With that, use the content property as well.You can try to run the following code to add an arrow in the tooltip:ExampleLive Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; bottom: 100%; left: 60%; margin-left: -90px; text-align: center; ... Read More
![varun](https://www.tutorialspoint.com/assets/profiles/13559/profile/60_29674-1512637943.jpg)
3K+ Views
To set the navigation bar at bottom, use position: fixed property, with bottom property.You can try to run the following code to implement a menu that stays on the bottom, ExampleLive Demo ul { list-style-type: none; position: fixed; bottom: 0; width: 100%; } li { float: left; ... Read More
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
200 Views
To set the navigation bar at top, use position: fixed property, with top property.You can try to run the following code to implement a menu that stays on the top, ExampleLive Demo ul { list-style-type: none; position: fixed; top: 0; width: 100%; } li { float: left; ... Read More
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
166 Views
To create a sticky navbar, use the position: sticky; property. You can try to run the following code to create a sticky navbar, ExampleLive Demo ul { list-style-type: none; position: sticky; overflow: hidden; top: 0; width: 100%; } li { float: left; ... Read More
![Nancy Den](https://www.tutorialspoint.com/assets/profiles/13557/profile/60_88439-1512714529.jpg)
685 Views
Use the top CSS property to add arrow to the bottom of the tooltip.ExampleYou can try to run the following code to add a tooltip with arrow to the bottom:Live Demo .mytooltip .mytext { visibility: hidden; width: 140px; background-color: blue; color: #fff; z-index: 1; bottom: 100%; left: 60%; margin-left: -90px; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; } .mytooltip { position: relative; display: inline-block; margin-top: 50px; } .mytooltip .mytext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -10px; border-width: 7px; border-style: solid; border-color: blue transparent transparent transparent; } .mytooltip:hover .mytext { visibility: visible; } Keep mouse cursor over me My Tooltip text
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
2K+ Views
To add link dividers in a Navigation Bar, use the border-right property for the element.ExampleLive Demo ul { list-style-type: none; margin: 0; padding: 0; } li { float: left; border-right: 1px solid white; } li a { display: block; padding: 8px; background-color: orange; } li:last-child { border-right: none; } Home News Contact About
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
2K+ Views
To float the list items to the right, use float: right property in CSS. You can try to run the following code to implement it,ExampleLive Demo ul { list-style-type: none; margin: 0; padding: 0; } li { float: left; } li a { display: block; padding: 8px; background-color: orange; } Home News Contact About
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
800 Views
To create a horizontal navigation bar, use the floating list item.ExampleYou can try to run the following code to create a horizontal navigation barLive Demo ul { list-style-type: none; margin: 0; padding: 0; } li { float: left; } li a { display: block; padding: 8px; background-color: orange; } Home News Contact About
![seetha](https://www.tutorialspoint.com/assets/profiles/13549/profile/60_42938-1512640859.jpg)
461 Views
To create a horizontal navigation bar, use the floating list item.ExampleYou can try to run the following code to create horizontal navigation bar −Live Demo ul { list-style-type: none; margin: 0; padding: 0; } li { float: left; } li a { display: block; padding: 8px; background-color: orange; } Home News Contact About
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
3K+ Views
To create a horizontal navigation bar, set the elements as inline.ExampleYou can try to run the following code to create horizontal navigation barLive Demo ul { list-style-type: none; margin: 0; padding: 0; } .active { background-color: #4CAF50; color: white; } li { border-bottom: 1px solid #555; display: inline; } Home Company Product Services Contact