Hej.
Ponownie/Pani potrzebuje waszej pomocy.
Przy prostym, rozwijanym menu w CSS po najechaniu na dany element pokazuje sie menu, ale niestety nie wyglada ona za dobrze.
Przykleja sie ono to prawej stony ( jest za ktorkie) i nachodzi z gory na glowna liste manu.
Probowalem zmienic jego szerokosc ( width: ... ; w sekcji ul > li, ul > li:a ) ale nic to nie daje. Zwiekszenie marginesow tez nic nie daje.
Macie jakis pomysl gdzie tkwi problem?
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Japan Motorbikes</title>
<meta chartset="utf-8"/>
<meta keywords="description" content="motorbikes sport honda yamaha suzuki kawasaki Japan"/>
<meta name="description" content="The most fames Japan sports motorbikes"/>
<link rel="stylesheet" type="text/css" href="motory.css"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/fontello.css"/>
</head>
<body>
<div id="logo">
<h1>The best Japan motorbikes</h1>
</div>
<div id="menu">
<div class="motonav">
<ol>
<li>Honda
<ul>
<li><a href="#">CBR 600</a></li>
<li><a href="#">CBR 929</a></li>
<li><a href="#">CBR 1000</a></li>
</ul>
</li>
<li>Suzuki
<ul>
<li><a href="#">Suzuki 600</a></li>
<li><a href="#">Suzuki 750</a></li>
<li><a href="#">Suzuki1000</a></li>
</ul>
</li>
<li>Yamaha
<ul>
<li><a href="#">Yamaha 600</a></li>
<li><a href="#">Yamaha MT01</a></li>
<li><a href="#">Yamaha 1000</a></li>
</ul>
</li>
<li>Kawasaki
<ul>
<li><a href="#">Kawasaki 600</a></li>
<li><a href="#">Kawasaki 636</a></li>
<li><a href="#">Kawasaki 1000</a></li>
</ul>
</li>
<li>about Author</li>
</ol>
</div>
<div id="content">Japan is a Giant in World Motorcycle Market
Japan is the world's largest motorcycle manufacturer. Japanese motorcycle has about 50% share of world motorbike production as of year 2014.<br>
It is home of the world's 4 biggest motorcycle companies such as Honda, Yamaha, Suzuki, and Kawasaki, the "BIG 4". <br>
The Fastest and the Most Advanced Motorbikes
From the 1960s onwards, Japanese motorcycles dominated the world’s markets. The performance of the Japanese motorcycles was directly related to their involvement in international motorcycle road racing, first in the I.O.M. TT, then later in the world championship Grand Prix racing (MotoGP). Much like their street bikes, the early Japanese racers were no match for their European competitors at first, but within a few years they were beating them.<br>
Over the years, Japanese motorcycles became the world leaders offering innovative design and major forces in the racing world.<br>
European and North American motorcycles have always been popular, both with racing enthusiasts and pleasure riders. Ducati, BMW, and Harley Davidson models do well internationally, each with their own niche market. But, in terms of numbers sold, the undisputed leaders are the four Japanese giants: Honda, Yamaha, Suzuki, and Kawasaki. Honda, in fact, has destroyed the competition with around 16 million units sold worldwide, compared to its next closest competitor, Yamaha, at roughly 8 million. By comparison, Harley Davidson has sold around 260,000 motorcycles, and Ducati just over 44,000.
</div>
<div id="socialmedia">
<a href="http://facebook.com" target="_blank"><div class="socialmediafb">
<i class="icon-facebook"></i>
</div></a>
<a href="http://youtube.com"target="_blank"><div class="socialmediayt">
<i class="icon-youtube"></i>
</div></a>
<a href="http://twitter.com"target="_blank"><div class="socialmediatw">
<i class="icon-twitter"></i>
</div></a>
<a href="https://plus.google.com"target="_blank"><div class="socialmediagplus">
<i class="icon-gplus"></i>
</div></a>
</div>
<div style="clear: both;"></div>
<div id="footer">Kamil Rozanski 2018 © Wszelkie prawa zastrzezezone </div>
</body>
</html>
body
{
background-color: #303030;
margin-left: auto;
margin-right: auto;
font-family: 'Poppins', sans-serif;
}
#logo
{
width: 600px;
height: 150px;
margin: auto;
text-align: center;
color: #ffb84d;
letter-spacing: 2px;
font-size: 26px;
}
.motonav
{
width: 100%;
padding: 15px 0;
background-color: #ffb84d;
text-align: center;
color: #d9d9d9;
transition-duration: 1s;
}
#menu
{
width: 100%;
height: 60px;
margin-top: 20px;
}
.motonav:hover
{
background-color: #eea63b;
transition-duration: 1s;
}
#content
{
width:1000px;
margin-top: 20px;
font-size: 18px;
margin-left:auto;
margin-right:auto;
text-align: justify;
color: #d9d9d9;
padding: 10px;
}
#socialmedia
{
width: 100%;
height: 60px;
text-align: center;
padding: 15px;
}
.socialmediaimg
{
float: left;
width: 20%;
text-align: center;
padding: 15px;
margin-left: 25px;
color: #fff;
}
.socialmediafb
{
float:left;
margin-left: auto;
margin: right:auto;
width: 25%;
height: 60px;
text-align: center;
margin-top: 20px;
font-size: 40px;
color: #fff;
transition-duration: 2s;
}
.socialmediafb:hover
{
background-color: #4668b3;
transition-duration: 2s;
}
.socialmediayt
{
float:left;
margin-left: auto;
margin: right:auto;
width: 25%;
height: 60px;
text-align: center;
margin-top: 20px;
font-size: 40px;
color: #fff;
transition-duration: 2s;
}
.socialmediayt:hover
{
background-color: #d94348;
transition-duration: 2s;
}
.socialmediatw
{
float:left;
margin-left: auto;
margin: right:auto;
width: 25%;
height: 60px;
text-align: center;
margin-top: 20px;
font-size: 40px;
color: #fff;
transition-duration: 2s;
}
.socialmediatw:hover
{
background-color: #3095d3;
transition-duration: 2s;
}
.socialmediagplus
{
float:left;
margin-left:auto;
margin: right:auto;
width: 25%;
height: 60px;
text-align: center;
margin-top: 20px;
font-size: 40px;
color: #fff;
transition-duration: 2s;
}
.socialmediagplus:hover
{
background-color: #d96333;
transition-duration: 2s;
}
#footer
{
width: 100%;
height: 50px;
text-align: center;
padding-left: 15px;
margin-top: 20px;
}
ol
{
color: #ffffff;
list-style-type: none;
text-decoration: none;
padding: 0;
margin: 0;
line-height: 200%;
height: 40px;
font-size: 20px;
display: inline-block;
}
ol a
{
list-style-type: none;
color: #ffffff;
text-decoration: none;
display: block;
}
ul > li
{
list-style-type: none;
display: none;
background-color: #eea63b;
transition: .8s;
position: relative;
z-index: 100;
line-height: 3;
}
ol > li:hover > ul > li
{
display: block;
}
ul > li:hover
{
background-color: #ebc163;
transition: .8s;
}
ol > li
{
float: left;
border-right: dotted 1px gray;
width: 180px;
height: 45px;
transition: .8s;
}
ol > li:hover
{
background-color: #ebc163;
transition: .8s;
}
ol > li:first-child
{
border-left: dotted 1px gray;
}
