Menu
I was creating this header menu using <ul> and I wanted to stretch it to all top of the page. I first used width:100% but it didn't work.Then I saw a similar example somewhere , it had used overflow:hidden so when I used that it streched the list to the end.I wanted to know what does overflow do in here and why width:100% can not do the similar action?
ul {
list-style-type: none;
padding: 0;
margin: 0;
overflow: hidden;
background-color: black;
}
li {
background-color: black;
color: red;
float: left;
}
li a{
display: inline-block;
color: white;
text-decoration:none;
padding: 20px;
text-align: center;
}
li a:hover{
background-color:red;
}<!DOCTYPE html>
<html lang="fa">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul>
<li><a target="_blank" href="http://www.google.com">Google</a></li>
<li><a target="_blank" href="http://www.yahoo.com">Yahoo!</a></li>
<li><a target="_blank" href="http://www.Amazon.com">Amazon</a></li>
</ul>
</body>
</html>
720
using overflow makes element stretch to match its children when they have set float property - it's basically one of ways to implement clearfix
139
Float property in li affect the parent ul width 100%. so It not worked. Try this below code.
ul {
list-style-type: none;
padding: 0;
background-color: black;
width:100%;
text-align:center;
}
li {
background-color: black;
color: red;
width:33.3333%;
float: left;
}
li a{
display: inline-block;
color: white;
text-decoration:none;
padding: 20px;
}
li:hover{
background-color:red;
}<!DOCTYPE html>
<html lang="fa">
<head>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body>
<ul>
<li><a target="_blank" href="http://www.google.com">Google</a></li>
<li><a target="_blank" href="http://www.yahoo.com">Yahoo!</a></li>
<li><a target="_blank" href="http://www.Amazon.com">Amazon</a></li>
</ul>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
