Scribd
Upload
20 views3 pages

Relative Inline-Block: Position Display

The document contains CSS styles for a dropdown menu and sections of a webpage. It defines the appearance and behavior of dropdown content, including hover effects and layout positioning. Additionally, it includes HTML structure for a menu bar with various links and a dropdown for services offered.

Uploaded by

MUTANGUHA VALENTIN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
20 views3 pages

Relative Inline-Block: Position Display

The document contains CSS styles for a dropdown menu and sections of a webpage. It defines the appearance and behavior of dropdown content, including hover effects and layout positioning. Additionally, it includes HTML structure for a menu bar with various links and a dropdown for services offered.

Uploaded by

MUTANGUHA VALENTIN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

.

dropdown {

position: relative;

display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background-color: blue;

min-width: 160px;

box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

z-index: 1;

.dropdown-content a {

color: white;

padding: 12px 16px;

text-decoration: none;

display: block;

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {

display: block;

.dropdown:hover .dropbtn {

background-color: #3e8e41;

.section1{

position: absolute;
top: 2px;

left: 10px;

margin-top: 100px;

width: 350px;

height: 400px;

.section2{

width: 200px;

height: 100px;

html

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="top_image">

</div>

<div class="menu_bar">

<ul>

<li><a href="#">home</a></li>

<div class="dropdown">

<li><a href="#">servis</a></li>

<div class="dropdown-content">

<a href="#">web development</a>

<a href="#">web design</a>

<a href="#">software</a>
<a href="#">development</a>

<a href="#">web hosting</a>

<a href="#">digital marketing</a>

</div>

</div>

<li><a href="#">business</a></li>

<li><a href="#">news</a></li>

<li><a href="#">product</a></li>

<li><a href="#">about us</a></li>

<li><a href="#">contact us</a></li>

</ul>

</div>

You might also like