<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
margin:0px;
padding:0;
overflow:hidden;
list-style-type: none;
}
li a{
display:inline;
color:black;
font-family:Georgia;
text-align: center;
font-size:200%;
text-decoration:none;
border-left:1px solid gray;
}
li a:hover{
color:rgb(72, 145, 123);
text-align:center;
font-family:Georgia;
font-size:250%;
background:green;
text-decoration:none;
display:inline;
padding:0%;
}
li a:active{
color:chartreuse;
}
body
{
width:100%;
height:100%;
margin:0
}
li{float:left; padding-left:3%; background:#c0c9d3;}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
Так что да, это немного грязно, но в основном я пытаюсь выучить немного Html + CSS, и у меня есть проблема при создании панели навигации. Я хочу сделать текст «всплывающим» при наведении на него курсора, поэтому я увеличил размер текста до 250% при наведении ... однако я также хочу, чтобы этот «всплывающий» изменил свой фон на зеленый (только для ради этого обсуждения), но я хочу, чтобы этот зеленый фон расширялся, чтобы он достиг предыдущего <li> и <li> после него. Например, я наведу курсор мыши на «Новости», и оно всплывает, и фон достигает «е» из дома и «C» из контактов. Я надеюсь, что все это имеет смысл.
Кроме того, это не что-то для моего университета / компании ... et c ... только для моей личной выгоды как новичка, который хочет научиться создавать сайты с нуля. Также это моя первая навигационная панель, которую я когда-либо делал, поэтому не стесняйтесь критиковать меня: D