Css Navigation Menu Text
Question
I'm new to Stackoverflow, Just want to build simple CSS navigation menu. How can I align these items from left to right and can make sub-items on mouse focus?
<html> <head> <title>Test App</title> <style> li{ list-style:none; } ul{ background-color: green; } </style> </head> <body> <ul> <li> George </li> <li> Belly </li> <li> Mac </li> </ul> </body> </html>
3 answers
solution1
1 2016-10-30 05:19:40
These are very basic ideas behind CSS, so I will not explain them. Hopefully this starts you off.
.nav { list-style-type: none; } .nav li { display: inline-block; height:55px; box-sizing:border-box; text-align:center; line-height:15px; padding:20px 10px; } .nav li:hover{ background-color:darkgreen; }
<html> <head> <title>Test App</title> <style> li { list-style: none; } ul { background-color: green; } </style> </head> <body> <ul class="nav"> <li> George </li> <li> Belly </li> <li> Mac </li> </ul> </body> </html>
solution2
0 2016-10-30 07:03:50
You can fix that by changing the display css property of li element.
.nav li {
display: inline-block;
}
Generally, the
display property can have many values - out of which there are mainly 3 values you need to be considered here ( and hereafter ) to make your life beautiful.
-
display: inline;: cannot have a width and height set, allows other elements to sit to their left and right. -
display: block;: force a line break after the block element -
display: inline-block: combination of the above properties.
It is fundamental to undestand the basic difference between these values.
You can see a detailed discussion here .
solution3
0 ACCPTED 2016-10-30 08:15:56
Try this :) hope this will be helped to you
<!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: green; } li { float: left; } li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover, .dropdown:hover .dropbtn { background-color: red; } li.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <ul> <li><a href="#home">George</a></li> <li><a href="#news">Belly</a></li> <li class="dropdown"> <a href="#" class="dropbtn">Mac</a> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </li> </ul> <h4>Dropdown Menu inside a Mac</h4> <p>Hover over (mouse focus) the "Mac" you can see the dropdown menu.</p> <p>Hope this will be helped to you,please put a comment if answer is helpful.Good Luck!!!</p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.