• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

CSS, rozwijane manu pionowe. Menu sie rozwija, ale nie moge zmienic jego szerokosci, ani top margin.

VPS Starter Arubacloud
0 głosów
925 wizyt
pytanie zadane 19 marca 2018 w HTML i CSS przez Kamil Różański Nowicjusz (170 p.)

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 &copy; 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;   
}

 

1 odpowiedź

+1 głos
odpowiedź 19 marca 2018 przez Danrox Bywalec (2,370 p.)
Usuń padding dla listy ul
komentarz 19 marca 2018 przez Kamil Różański Nowicjusz (170 p.)
Dziala.

Jakie to bylo proste, a ja caly poranek nad tym siedzialem.

Dzieki
komentarz 19 marca 2018 przez zgrybus Pasjonat (24,860 p.)
Zawsze możesz używać konsoli  przeglądarki w celu sprawdzenia styli i zachowania elementów :)

Podobne pytania

0 głosów
1 odpowiedź 1,908 wizyt
pytanie zadane 29 stycznia 2018 w HTML i CSS przez Kamil Różański Nowicjusz (170 p.)
0 głosów
1 odpowiedź 256 wizyt
pytanie zadane 12 stycznia 2019 w HTML i CSS przez adikpl Użytkownik (660 p.)
0 głosów
1 odpowiedź 380 wizyt
pytanie zadane 26 maja 2018 w HTML i CSS przez robiczQ Nowicjusz (190 p.)

93,078 zapytań

142,041 odpowiedzi

321,445 komentarzy

62,422 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

...