/* A simple, css only, (some-what) responsive menu */
body {
background: #ffffff;
font-family: helvetica, arial, serif;
font-size: 13px;
text-transform: uppercase;
text-align: center;
}
.contener {
background: #ffffff;
margin: .5%;
padding: 2%
width: 90%;
}
.images1 {
margin-left: 5%;
padding: 15%
text-align: center;
width: 100%
}
.wrap {
width: 100;
display: inline-block;
-webkit-box-shadow: 0 0 70px #fff;
-moz-box-shadow: 0 0 70px #fff;
box-shadow: 0 0 70px #fff;
margin-top: 20px;
}
/* a little "umph" */
.decor {
background: #ccc;
background: -moz-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: -o-linear-gradient(left, #CDEBDB 50%, #6EAF8D 50%);
background: linear-gradient(left, white 50%, #6EAF8D 50%);
background-size: 50px 25%;;
padding: 2px;
display: block;
}
a {
text-decoration: none;
color: #fff;
display: block;
}
ul {
list-style: none;
position: relative;
text-align: left;
}
li {
float: left;
}
/* clear'n floats */
ul:after {
clear: both;
}
ul:before,
ul:after {
content: " ";
display: table;
}
nav {
position: relative;
background: #2B2B2B;
background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%);
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #0E0E0E;
-webkit-box-shadow: 2px 2px 3px #888;
-moz-box-shadow: 2px 2px 3px #888;
box-shadow: 2px 2px 3px #888;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
/* prime */
ul.primary li a {
display: block;
padding: 20px 30px;
border-right: 1px solid #3D3D3D;
}
ul.primary li:last-child a {
border-right: none;
}
ul.primary li a:hover {
color: #000;
}
/* subs */
ul.sub {
position: absolute;
z-index: 200;
box-shadow: 2px 2px 0 #BEBEBE;
width: 35%;
display:none;
}
ul.sub li {
float: none;
margin: 0;
}
ul.sub li a {
border-bottom: 1px dotted #ccc;
border-right: none;
color: #000;
padding: 15px 30px;
}
ul.sub li:last-child a {
border-bottom: none;
}
ul.sub li a:hover {
color: #000;
background: #eeeeee;
}
/* sub display*/
ul.primary li:hover ul {
display: block;
background: #fff;
}
/* keeps the tab background white */
ul.primary li:hover a {
background: #fff;
color: #666;
text-shadow: none;
}
ul.primary li:hover > a{
color: #000;
}
@media only screen and (max-width: 600px) {
.decor {
padding: 3px;
}
.wrap {
width: 100%;
margin-top: 0px;
}
li {
float: none;
}
ul.primary li:hover a {
background: none;
color: #8B8B8B;
text-shadow: 1px 1px #000;
}
ul.primary li:hover ul {
display: block;
background: #272727;
color: #fff;
}
ul.sub {
display: block;
position: static;
box-shadow: none;
width: 100%;
}
ul.sub li a {
background: #272727;
border: none;
color: #8B8B8B;
}
ul.sub li a:hover {
color: #ccc;
background: none;
}
}
a.class1:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a.class1:visited {
color: blue;
background-color: #000000;
text-decoration: none;
}
a.class1:hover {
color: red;
background-color:#000000;
}
a.class1:active {
color: yellow;
background-color: #000000;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wagdy Moamen Group</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS\style.css">
<link rel="icon" type="image/png" href="http://wagdymoamen.com/Images/Logo.PNG">
</head>
<body>
<style>
div.container {
display:inline-block;
width: 80%;
text-align: center;
padding: 2%;
}
body {
background: #ffffff;
text-align: center;
width: 65%;
margin-left:17.5%;
margin-right:17.5%;
}
@media only screen and (max-width:480px) {
img {
display:block;
float:none;
margin:0 auto 20px !important;
}
}
</style>
<div class="wrap">
<span class="decor"></span>
<img src="Images/Logo.PNG" alt="WMG">
<nav>
<ul class="primary">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="Mens_shirts.html">Men's shirts</a>
</li>
<li>
<a href="About.html">About WMG</a>
</li>
<li>
<a href="">Contact</a>
<ul class="sub">
<li><a href="Local.html">Local</a></li>
<li><a href="Export.html">Export</a></li>
</ul>
</li>
</ul>
</nav>
<div style="Margin:20px;">
<img src="http://wagdymoamen.com/Images/1.gif" align="left" width="55%" height=395px border="0" style="Margin:0 0 20px 20px; background:#ffffff;" />
<div id="bodydesc" style="margin-left:.1%; margin-right:auto; width:40%; height: 395px; overflow-y: scroll;background:#3F2E1E;">
<p id="desc" style="float:left;color: #ffffff; width:290px;margin-left:.5%; font-family: Calibri; font-size: 15px; border-right: thin dotted #666666; line-height: 18px;">
Men’s Shirt <br><br>
Formal or Casual shirtsWMG skils & experiences are covering most shirt stylings – from Evening Shirts over “City Look” shirts to Causual Shirts – and our skilled staff has the required experience to offer the matching trimmings per “look”, ie. from interlining to packaging.<br><br>
Our Washing Technologies are correspondent to accomplish the complete look.
</p>
<!-- <p style="Margin:0; font:16px/1.25 sans-serif; color:#4CB3E8; text-align:justify;">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta,
aut eligendi dignissimos, illum eaque ut architecto quisquam! Odio,
aliquam eligendi iste tempore beatae, deserunt! Officia temporibus at,
debitis excepturi porro mollitia aspernatur labore unde dolores quae blanditiis
dignissimos error aut iure magnam sed placeat impedit incidunt praesentium natus dolorum.
</p> -->
</div>
<div style=float:left;>
<UL style= " list-style-type: none;font-size: 10px; ">
<li style= display: inline;>
<a href="EGYPT_and_its_cotton.html" class="class1">EGYPT and its cotton :|</a></li>
<li style= display: inline;>
<a href="Designed_in_Italy.html" class="class1">: Designed in Italy :|</a></li>
<li style= display: inline;>
<a href="Value_Creation.html" class="class1">: Value Creation :|</a></li>
<li style= display: inline;>
<a href="DNA.html" class="class1">: DNA :|</a></li>
<li style= display: inline;>
<a href="Return_on_Procurement.html" class="class1">: Return on Procurement :|</a></li>
<li style= display: inline;>
<a href="Speed_and_Effectiveness.html" class="class1">: Speed and Effectiveness</a></li>
</ul>
</div>
</div>
</div>
<span class="decor"></span>
</body>
</html>