<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> unordered list </title>
<style>
ul{width:250px;height:150px;background-color:gray;border:1px solid white;border-radius:10px;}
UL li{margin-top:5px;}
A{text-decoration:none;color:black;}
A:hover{text-decoration:underline;color:white;}
</style>
<body>
<ul>
<li><a href= "#" > This paragraph in the source code </a></li>
<li><a href= "#" > This paragraph in the source code </a></li>
<li><a href= "#" > This paragraph in the source code </a></li>
<li><a href= "#" > This paragraph in the source code </a></li>
<li><a href= "#" > This paragraph in the source code </a></li>
</ul>
</body>
Browser display
The mouse does not pass the situation:
Mouse over the situation:
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> unordered list </title>
<style>
Ul{list-style-type:none;}
UL Li{margin:0;padding:0;float:left;}
UL Li a{text-decoration:none;color:black;background-color:red;width:80px;height:40px;padding:10px;}
A:hover{text-decoration:underline;color:white;background-color:green;}
</style>
<body>
<ul>
<li><a href= "#" > This paragraph </a></li>
<li><a href= "#" > This paragraph </a></li>
<li><a href= "#" > This paragraph </a></li>
<li><a href= "#" > This paragraph </a></li>
<li><a href= "#" > This paragraph </a></li>
</ul>
</body>
Mouse over:
The UL unordered list of HTML