HTML CSS - menu

pytanie zadane 8 października 2022 w HTML i CSS przez mateusz2115 Nowicjusz (120 p.)
edycja 8 października 2022 przez mateusz2115

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<title>Menu bar</title>
</head>
<body>

<div class='menu'>
	<ul>
		<li><a href="#">Strona główna</a></li>
		<li><a href="#">Oferta</a></li>
	</ul>
</div>

</body>
</html>

CSS

body{
	margin: 0;
	padding: 0;
}

li, a{
	list-style-type: none;
	text-decoration: none;
}

li{
	background: darkblue;
	border-left: 10px solid red;
	border-bottom: 1px solid white;
	text-align: center;
	width: 100px;
	height: 20px;
}

a{
	font-family: Arial;
	font-size: 12px;
	color: white;
}

Problem

2 odpowiedzi

odpowiedź 8 października 2022 przez ScriptyChris Mędrzec (190,190 p.)

odpowiedź 8 października 2022 przez VBService Ekspert (254,480 p.)

Możesz też wykorzystać border elementu <a>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>Menu bar</title>
  </head>
  <body>

    <div class='menu'>
      <ul>
        <li><a href="#">Strona główna</a></li>
        <li><a href="#">Oferta</a></li>
      </ul>
    </div>

  </body>
</html>

body{
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}
li {
  background: darkblue;
  border-left: 10px solid red;
  text-align: center;
  width: 100px;
  height: 20px;
}

a {
  display: block;
  text-decoration: none;
  font: 300 0.8em/1.5 Arial;
  color: white;
  border-bottom: 1px solid white;
  width: 100%;
}